Mantine DataTable

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

You can quickly customize the default colors using the c, backgroundColor, borderColor and rowBorderColor properties.
Each of these properties can be set to a MantineColor (key of theme.colors or any valid CSS color string) or an object with dark and light keys and MantineColor values, which will be used to style dark and light themes accordingly.

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

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

The backgroundColor is applied to:

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

The borderColor is applied to:

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

The rowBorderColor is applied to:

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

If you’re using pagination, you can also customize its colors using the paginationTextColor and paginationActiveTextColor properties.

For example, this code:

return (
  <DataTable
    withTableBorder
    withColumnBorders
    // 👇 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
    paginationActiveBackgroundColor="#40c057" // 👈 override default pagination active background color
    // ...
  />
);

…will produce the following table:

There are even more elaborate ways to destroy the default styling of Mantine DataTable besides setting its basic properties and the aforementioned colors.

With className

You can specify a className that will target the DataTable component root:

Here is the code for the above example:

import { DataTable } from 'mantine-datatable';
import classes from './StylingWithClassNameExample.module.css';
// ...

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

With a style object or function

You can target 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 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 specifically target the component root, table, header, footer and pagination with different classNames:

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

You can specifically target the component root, table, header, footer and pagination with different styles objects or functions:

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

Head over to the next example to discover more features.