Styling

Mantine DataTable V7 is a major release with breaking changes and is compatible with Mantine V7.
One of the breaking changes in Mantine V7 is the migration to native CSS.
The styling is no longer done with CSS-in-JS (Emotion), hence the createStyles function is no longer available for use in other libraries built on top of it or in your own code.

If you have used Mantine DataTable with Mantine V6 and you’re migrating to V7, please make sure to check out the Mantine V7.0 and V7.1 changelogs to understand the new styling approach and how you can use CSS layers to control the order of styles in your application.

In V7, all @mantine/* packages are shipped with native CSS files which can be imported from @mantine/{package}/styles.css or @mantine/{package}/styles.layer.css.

Similarly, Mantine DataTable comes with native CSS files which can be imported from mantine-datatable/styles.css or mantine-datatable/styles.layer.css.

Controlling the order of styles with CSS layers

Some bundlers and frameworks (including Next.js) do not allow you to control the order of stylesheets in your application when importing CSS files.

As Mantine documentation suggests, you can mitigate this by making use of CSS layers.

Please keep in mind that:

@mantine/{package}/styles.layer.css files will place styles in a layer named mantine
mantine-datatable/styles.layer.css will place styles in a layer called mantine-datatable

For example, in a Next.js application you could ensure the correct order of styles either by importing the styles.layer.css files and using the @layer directive, like so:

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

// 👇 Import the mantine-core layer CSS file;
//    this will automatically place it in a `mantine` layer
import '@mantine/core/styles.layer.css';

// 👇 Import the mantine-datatable layer CSS file;
//    this will automatically place it in a `mantine-datatable` layer
import 'mantine-datatable/styles.layer.css';

// 👇 Import your own CSS file;
//    make sure to specify the layers order with the `@layer` directive
//    inside that file
import './layout.css';

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

Or, if you want to have even more control over the order of styles, you can make use of the postcss-import plugin to control the layer names when importing the styles.css files, and then use the @layer directive, like so:

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

import './layout.css';

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

Now that you understand how styling works, feel free to browse the code examples to see the DataTable in action and learn how to use it, and refer to the type definitions page for an exhaustive list of customizable options.

Go back

Getting started

Up next

Examples › Basic usage

Mantine DataTable is trusted by

SegmentX

Dera

Pachtop

Ganymede

COH3 Stats

ccrentals.org