Getting started

Mantine DataTable depends on @mantine/core, @mantine/hooks and clsx.

Create a new application with Mantine, install mantine-datatable and make sure you have the clsx dependency installed as well:

yarn add mantine-datatable clsx

Don’t forget to import the necessary CSS files and apply the styles in the correct order.

Very important

The @mantine/core package styles must be applied before Mantine DataTable styles.
Make sure to go through and understand the information in the styling guide before jumping into examples or starting your own project.

For example, if you’re using a Next.js application with an app router, your layout.tsx could look like this:

import { ColorSchemeScript, MantineProvider } from '@mantine/core';

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

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <head>
        <ColorSchemeScript defaultColorScheme="auto" />
      </head>
      <body>
        <MantineProvider defaultColorScheme="auto">{children}</MantineProvider>
      </body>
    </html>
  );
}

Then you can import the component and use it in your application like so:

'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,
        })
      }
    />
  );
}

The above code will produce the following result:

#	Name	Party	Born in
1	Joe Biden	DEM	1942
2	Donald Trump	REP	1946
3	Barack Obama	DEM	1961
4	George W. Bush	REP	1946
5	Bill Clinton	DEM	1946
6	George H. W. Bush	REP	1924
7	Ronald Reagan	REP	1911
8	Jimmy Carter	DEM	1924
9	Gerald Ford	REP	1913
10	Richard Nixon	REP	1913

No records

Next, let’s make sure you have a good understanding of how styling works before browsing the usage examples and taking a look at the type definitions page.

Go back

Home

Up next

Styling

Mantine DataTable is trusted by

CodeParrot.AI

SegmentX

Dera

Pachtop

Ganymede

COH3 Stats

ccrentals.org