Styling

Mantine doesn’t use CSS-in-JS: all @mantine/* packages ship native CSS files, which can be imported from @mantine/{package}/styles.css or @mantine/{package}/styles.layer.css.

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

Order matters

Mantine DataTable styles build on top of the @mantine/core styles, so they must be applied after them. If they’re not, the table may look broken (for instance, missing borders, wrong spacing or misplaced pinned columns).

Importing styles without CSS layers

If your bundler preserves the order of CSS imports (as Vite does, for instance), the simplest approach is to import the styles.css files in the right order, at the root of your application:

// 👇 Import the Mantine core styles first...
import '@mantine/core/styles.css';
// 👇 ...then the mantine-datatable styles
import 'mantine-datatable/styles.css';

import { MantineProvider } from '@mantine/core';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { App } from './App';

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <MantineProvider>
      <App />
    </MantineProvider>
  </StrictMode>
);

Controlling the order of styles with CSS layers

Some bundlers and frameworks (including Next.js) don’t let you control the order in which imported stylesheets are applied.

As the Mantine documentation suggests, you can work around this by using CSS layers.

Please keep in mind that:

@mantine/{package}/styles.layer.css files place their styles in a layer named mantine;
mantine-datatable/styles.layer.css places its styles in a layer named mantine-datatable.

For example, in a Next.js application you can ensure the correct order of styles by importing the styles.layer.css files and declaring the layer order with 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 even more control over the order of styles, you can use the postcss-import plugin to choose your own layer names when importing the styles.css files, and then declare their order with 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>
  );
}

Keep in mind that styles which are not placed in any layer always take precedence over layered styles. This means your own, un-layered CSS will override both Mantine and Mantine DataTable styles, regardless of specificity.

Customizing the look of your tables

Mantine DataTable follows the current Mantine theme, so the best way to achieve a consistent look-and-feel is to customize the theme you pass to MantineProvider. When you need to go further, you can:

use the basic table properties to control borders, spacing, font size, shadow, striping and more;
set custom colors, class names or styles, as shown in the overriding the default styles example;
style individual columns and rows.

Migrating from Mantine V6

Mantine DataTable V7 was a major release with breaking changes, made to support Mantine V7, which migrated to native CSS.
Since then, styling is no longer done with CSS-in-JS (Emotion), so the createStyles function is no longer available, neither to libraries built on top of Mantine nor to your own code.
If you’re migrating an application that used Mantine DataTable with Mantine V6, please read the Mantine V7.0 and V7.1 changelogs to understand the new styling approach and how to use CSS layers to control the order of styles in your application.

Now that you understand how styling works, feel free to browse the code examples to see Mantine 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 used and trusted by

Pachtop

Ganymede

Pipedash

COH3 Stats

ccrentals.org