### Basic Mantine DataTable Example

Source: https://github.com/icflorescu/mantine-datatable/blob/main/README.md

A fundamental example demonstrating how to use the Mantine DataTable component with data records and column definitions. Includes basic styling and row click handling with notifications.

```tsx
'use client';

import { Box } from '@mantine/core';
import { showNotification } from '@mantine/notifications';
import { DataTable } from 'mantine-datatable';

export function GettingStartedExample() {
  return (
    <DataTable
      withTableBorder
      borderRadius="sm"
      withColumnBorders
      striped
      highlightOnHover
      // 👇 provide data
      records={[
        { id: 1, name: 'Joe Biden', bornIn: 1942, party: 'Democratic' },
        // more records...
      ]}
      // 👇 define columns
      columns={[ 
        {
          accessor: 'id',
          // 👇 this column has a custom title
          title: '#',
          // 👇 right-align column
          textAlign: 'right',
        },
        { accessor: 'name' },
        {
          accessor: 'party',
          // 👇 this column has custom cell data rendering
          render: ({ party }) => (
            <Box fw={700} c={party === 'Democratic' ? 'blue' : 'red'}>
              {party.slice(0, 3).toUpperCase()}
            </Box>
          ),
        },
        { accessor: 'bornIn' },
      ]}
      // 👇 execute this callback when a row is clicked
      onRowClick={({ record: { name, party, bornIn } }) =>
        showNotification({
          title: `Clicked on ${name}`,
          message: `You clicked on ${name}, a ${party.toLowerCase()} president born in ${bornIn}`,
          withBorder: true,
        })
      }
    />
  );
}
```

--------------------------------

### Import CSS Files for Mantine DataTable

Source: https://github.com/icflorescu/mantine-datatable/blob/main/README.md

Import the necessary CSS files for Mantine core and DataTable. Ensure these are imported before your custom layout CSS.

```typescript
import '@mantine/core/styles.layer.css';
import 'mantine-datatable/styles.layer.css';
import './layout.css';
```

--------------------------------

### Apply CSS Layers for Mantine DataTable

Source: https://github.com/icflorescu/mantine-datatable/blob/main/README.md

Apply the CSS layers in the correct order within your layout.css file to ensure proper styling precedence.

```css
/* layout.css */
/* 👇 Apply Mantine core styles first, DataTable styles second */
@layer mantine, mantine-datatable;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.