Examples › Overriding the default styles

Mantine DataTable closely follows the current Mantine theme, so it should look great out of the box in most cases.

However, if you’re not happy with the default Mantine DataTable styling, there are several ways to override it.

With color properties

The quickest way to customize the default colors is to use the c, backgroundColor, borderColor, rowBorderColor, stripedColor, highlightOnHoverColor and selectionColor properties.
Each of them accepts either a MantineColor (a key of theme.colors or any valid CSS color string), or an object with light and dark keys and MantineColor values, to be used for the light and dark color schemes respectively.

The c property sets the text color and is applied to:

• the table body, header and footer;
• the pagination text and page buttons (if present).

The backgroundColor property is applied to:

• the table body, header and footer;
• the pagination area (if present).

The borderColor property is applied to:

• the table outer border (if enabled by the withTableBorder property);
• the header bottom border;
• the footer top border (see column footers);
• the pagination top border and page button borders (if present).

The rowBorderColor property defaults to the borderColor value and is applied to:

• the bottom border of each row;
• the column borders (if enabled by the withColumnBorders property).

The stripedColor property sets the background color of striped rows when the striped property is enabled (odd rows by default, or even rows with striped="even"), while highlightOnHoverColor sets the background color of the row under the mouse cursor when the highlightOnHover property is enabled (see basic table properties). The selectionColor property sets the background color of selected rows, which defaults to the light variant of the theme’s primary color.

If you’re using pagination, you can also customize the colors of the active page button with the paginationActiveTextColor and paginationActiveBackgroundColor properties.

For example, this code:

return (
  <DataTable
    withTableBorder
    withColumnBorders
    striped
    highlightOnHover
    // 👇 override default text color for light and dark themes
    c={{ dark: '#dbc7a0', light: '#55350d' }}
    // 👇 override default background color for light and dark themes
    backgroundColor={{ dark: '#232b25', light: '#f0f7f1' }}
    borderColor="#40c057" // 👈 override default border color
    rowBorderColor="#fab005" // 👈 override default row border color
    // 👇 override default striped rows background color for light and dark themes
    stripedColor={{ dark: '#2b3a2e', light: '#e1f0e3' }}
    // 👇 override default background color of the row under the mouse cursor
    highlightOnHoverColor={{ dark: '#3f5242', light: '#c6e5ca' }}
    paginationActiveBackgroundColor="#40c057" // 👈 override default pagination active background color
    paginationActiveTextColor="#1b1f1c" // 👈 override default pagination active text color
    // ...
  />
);

…will produce the following table (hover over the rows to see the highlight color):

With CSS variables

Under the hood, the color properties above are implemented with CSS variables defined on the component root (the element with the mantine-datatable class). You can override these variables in your own CSS, which also gives you access to colors that don’t have a dedicated property, such as the background color of selected rows:

• --mantine-datatable-color
• --mantine-datatable-background-color
• --mantine-datatable-border-color
• --mantine-datatable-row-border-color
• --mantine-datatable-striped-color
• --mantine-datatable-highlight-on-hover-color
• --mantine-datatable-selection-color (background color of selected rows, also settable with the selectionColor property; defaults to --mantine-primary-color-light)

In the example below, a className is used to change the colors of the selected and hovered rows:

Here is the code for the above example:

'use client';

import { DataTable } from 'mantine-datatable';
import { useState } from 'react';
import { type Company, companies } from '~/data';
import classes from './CssVariablesExample.module.css';

const records = companies.slice(0, 5);

export function CssVariablesExample() {
  const [selectedRecords, setSelectedRecords] = useState<Company[]>([records[1], records[2]]);

  return (
    <DataTable
      className={classes.root}
      withTableBorder
      highlightOnHover
      // ...
      selectedRecords={selectedRecords}
      onSelectedRecordsChange={setSelectedRecords}
    />
  );
}

Besides its basic properties and the aforementioned colors, there are several more elaborate ways to change (or completely override) the default styling of Mantine DataTable.

With className

You can pass a className that will be applied to the DataTable component root:

Here is the code for the above example:

import { DataTable } from 'mantine-datatable';
// ...

export function StylingWithClassNameExample() {
  return (
    <DataTable
      className={classes.root}
      // ...
    />
  );
}

With a style object or function

You can style the DataTable component root with a style object:

Here is the code for the above example:

return (
  <DataTable
    style={{
      border: '1px solid #40C057',
      fontStyle: 'italic',
    }}
    // ...
  />
);

The style property also accepts a function that receives the current theme as its argument and returns a style object:

Here is the code for the above example:

return (
  <DataTable
    style={(theme) => ({
      border: `1px solid ${theme.colors.indigo[6]}`,
      borderRadius: theme.radius.md,
      color: theme.colors.violet[6],
    })}
    // ...
  />
);

With multiple class names

You can target the component root, table, header, footer and pagination individually by passing an object with root, table, header, footer and pagination keys to the classNames property:

Here is the code for the above example:

return (
  <DataTable
    withColumnBorders
    classNames={{
      root: classes.root,
      table: classes.table,
      header: classes.header,
      footer: classes.footer,
      pagination: classes.pagination,
    }}
    // ...
  />
);

With multiple style objects or functions

Similarly, the styles property accepts an object with the same keys and style objects (or functions receiving the current theme and returning style objects) as values:

Here is the code for the above example:

return (
  <DataTable
    styles={{
      // 👇 this is a function that receives the current theme as argument
      root: (theme) => ({
        border: `1px solid ${theme.colors.orange[6]}`,
      }),
      table: {
        color: '#666',
      },
      header: {
        color: '#A30',
        fontSize: '125%',
      },
    }}
    // ...
  />
);

With global class names

Finally, Mantine DataTable elements have static class names you can target in your global stylesheets, such as mantine-datatable (the root), mantine-datatable-table, mantine-datatable-header, mantine-datatable-row, mantine-datatable-footer and mantine-datatable-pagination. Prefer the approaches above when possible, though: they are scoped to a single table and less likely to be affected by changes in the component’s internal structure.

Head over to the next example to discover more features.