Customize (Style) Components Guide

One of the strengths of Mantine React Table is that it exposes a majority of all the underlying Mantine component props used to build the table.

Additionally, in one of the sections below, you will learn how to customize and use the Mantine Theme to customize colors, typography, or any other default CSS that is used by Mantine React Table.

Relevant Table Options

All props labeled mantine...Props get forwarded to Mantine components. Here is a list of all the props that are exposed in both the root props and column options.

#	Type	Default Value	More Info Links
1	'semantic' \| 'grid'	'semantic'	TODO

2	BoxProps \| ({ table }) => BoxProps		Mantine Toolbar Docs

3	ActionIconProps \| (({table, column }) => ActionIconProps);		Mantine ActionIcon Docs

4	ActionIconProps \| ({table, column }) => ActionIconProps		Mantine ActionIcon Docs

5	UnstyledButtonProps \| ({ cell, column, row, table }) => UnstyledButtonProps		Mantine UnstyledButton Docs

6	ModalProps \| ({ row, table }) => ModalProps		Mantine Modal Docs

7	BoxProps \| ({ row, table }) => BoxProps		Mantine Box Docs

8	ModalProps \| ({ row, table }) => ModalProps		Mantine Modal Docs

9	SelectProps \| ({ cell, column, row, table }) => SelectProps		Mantine Select Docs

10	TextInputProps \| ({ cell, column, row, table }) => TextInputProps		Mantine TextInput Docs

11	ActionIconProps \| ({ table }) => ActionIconProps		Mantine ActionIcon Docs

12	ActionIconProps \| ({ row, table }) => ActionIconProps		Mantine ActionIcon Docs

13	AutocompleteProps \| ({ column, table, rangeFilterIndex }) => AutocompleteProps		Mantine Autocomplete Docs

14	CheckboxProps \| ({ column, table }) => CheckboxProps		Mantine Checkbox Docs

15	MultiSelectProps \| ({ column, table }) => MultiSelectProps		Mantine MultiSelect Docs

16	RangeSliderProps \| ({ column, table }) => RangeSliderProps		Mantine Slider Docs

17	SelectProps \| ({ column, table }) => SelectProps		Mantine Select Docs

18	TextInputProps \| ({ table, column, rangeFilterIndex }) => TextInputProps		Mantine TextInput Docs

19	HighlightProps \| ({ cell, column, row, table }) => HighlightProps		Mantine Highlight Docs

20	LoadingOverlayProps \| ({ table }) => LoadingOverlayProps		Mantine LoadingOverlay Docs

21	PaginationProps & { rowsPerPageOptions?: string[], showRowsPerPage?: boolean; }		Mantine Pagination Docs

22	PaperProps \| ({ table }} => PaperProps		Mantine Paper Docs

23	ProgressProps \| ({ isTopToolbar, table }) => ProgressProps		Mantine Progress Docs

24	ActionIconProps \| ({ row, table }) => ActionIconProps		Mantine ActionIcon Docs

25	TextInputProps \| ({ table }) => TextInputProps		Mantine TextInput Docs

26	CheckboxProps \| ({ table }) => CheckboxProps		Mantine Checkbox Docs

27	CheckboxProps \| ({ row, table }) => CheckboxProps		Mantine Checkbox Docs

28	SkeletonProps \| ({ cell, column, row, table }) => SkeletonProps		Mantine Skeleton Docs

29	BoxProps \| ({ cell, column, row, table }) => BoxProps		Mantine Box Docs

30	BoxProps \| ({ table }) => BoxProps		Mantine Box Docs

31	BoxProps \| ({ isDetailPanel, row, staticRowIndex, table }) => BoxProps		Mantine Box Docs

32	BoxProps \| ({ table }) => BoxProps		Mantine Box Docs

33	BoxProps\| ({table, column }) => BoxProps		Mantine Box Docs

34	BoxProps \| ({ table }) => BoxProps);		Mantine Box Docs

35	BoxProps \| ({table, footerGroup}) => BoxProps		Mantine Box Docs

36	BoxProps \| ({ table, column }) => BoxProps		Mantine Box Docs

37	BoxProps \| ({ table }) => BoxProps		Mantine TableHead Docs

38	BoxProps \| ({ table, headerGroup}) => BoxProps		Mantine Box Docs

39	TableProps \| ({ table }} => TableProps		Mantine Table Docs

40	BadgeProps\| ({ table }} => BadgeProps		Mantine Chip Docs

41	AlertProps \| ({ table }) => AlertProps		Mantine Alert Docs

42	BoxProps \| ({ table }) => BoxProps		Mantine Toolbar Docs

Relevant Column Options

Some of the column options expose the same props as above, but on a per column basis.

#	Type	More Info Links
1	ActionIconProps \| ({ column, table }) => ActionIconProps	Mantine ActionIcon API

2	ActionIconProps \| ({ column, table }) => ActionIconProps	Mantine ActionIcon API

3	UnstyledButtonProps \| ({ cell, column, row, table }) => UnstyledButtonProps	Mantine UnstyledButton API

4	SelectProps \| ({ cell, column, row, table }) => SelectProps	Mantine Select Docs

5	TextInputProps \| ({ cell, column, row, table }) => TextInputProps	Mantine TextInput API

6	AutocompleteProps \| ({ column, table, rangeFilterIndex}) => AutocompleteProps	Mantine Autocomplete Docs

7	CheckboxProps \| ({ column, table }) => CheckboxProps	Mantine Checkbox Props

8	MultiSelectProps \| ({ column, table }) => MultiSelectProps	Mantine MultiSelect Docs

9	RangeSliderProps \| ({ column, table }) => RangeSliderProps	Mantine Slider Docs

10	SelectProps \| ({ column, table }) => SelectProps	Mantine Select Docs

11	TextInputProps \| ({ column, rangeFilterIndex, table }) => TextInputProps	Mantine TextInput Docs

12	BoxProps \| ({ cell, table }) => BoxProps	Mantine Box API

13	BoxProps \| ({ column, table }) => BoxProps	Mantine Box API

14	BoxProps \| ({ column, table }) => BoxProps	Mantine Box API

Each prop can either be passed as an object or as a callback function where you get access to the underlying table instance and any other relevant callback parameters, such as cell, row, column, etc. This lets you easily run conditional logic on the props you pass. Let's take a look at a few examples.

All mantine...Props props are strongly typed and you should get ts hints as you write them. API docs are available on the Mantine website for each component.

Static Prop Objects

<MantineReactTable
  columns={columns}
  data={data}
  enableRowSelection
  //passing the static object variant if no dynamic logic is needed
  mantineSelectCheckboxProps={{
    color: 'violet', //makes all checkboxes use a different color other than the primaryColor
  }}
/>

Callback Functions to Dynamically Set Prop Values

<MantineReactTable
  columns={columns}
  data={data}
  enableRowSelection
  //passing the callback function variant. (You should get type hints for all the callback parameters available)
  mantineSelectCheckboxProps={({ row }) => ({
    color: 'violet',
    disabled: row.original.isAccountLocked, //access the row data to determine if the checkbox should be disabled
  })}
/>

Styling Mantine Components

Each mantine...Prop has multiple options for you to add styling to the component. You could simply pass className or style props to any mantine...Props prop, but there is also the sx prop.

The SX Prop

Note: Mantine V7 (coming out at the end of 2023) is getting rid of emotion and the sx prop. So MRT V2 is going to have very different advice than down below. Consider using CSS modules with the className prop instead of the sx prop. Or just using the style prop. Or consider using Tailwind. 🤪

The recommended way to style Mantine components in Mantine React Table will be the sx prop throughout this docs site, as it is both the most simple and the most powerful way to style Mantine components. They can work and be as simple as a style prop, but behind the scenes, they work more like emotion styled-components by using Emotion.

Do not worry, className and style props will still work, but let's show off some of the more elegant syntax you can use with the sx prop.

The sx prop can be used just a simply as a style prop by default

<MantineReactTable
  columns={columns}
  data={data}
  mantineTableHeadCellProps={{
    //simple styling with the `sx` prop, works just like a style prop in this example
    sx: {
      fontWeight: 'normal',
      fontSize: '14px',
    },
  }}
/>

The sx prop gets easy access to your mantineTheme without you having to call the theme from a useMantineTheme hook.

<MantineReactTable
  columns={columns}
  data={data}
  mantineTableHeadCellProps={{
    //no useMantineTheme hook needed, just use the `sx` prop with the theme callback
    sx: (theme) => ({
      color: theme.colors.red[5],
    }),
  }}
/>

The sx prop gives you a much more concise way to add media queries to your styling.

<MantineReactTable
  columns={columns}
  data={data}
  mantineTableHeadCellProps={{
    //easier way to create media queries, no useMediaQuery hook needed.
    sx: {
      fontSize: '14px',
      '@media (min-width: 600px)': {
        fontSize: '12px',
      },
    },
  }}
/>

There are many more advantages to using the sx prop, but that is all we will discuss in these docs. You can learn more about it the official Mantine Docs.

Mantine Theme

Mantine React Table respects your Mantine Theme. If you have already set up Mantine and a global Mantine Theme, you should already be set. But if you have not, you should visit the official Mantine Theming Docs to learn how to set that up.

function App() {
  //Have you setup your Mantine Theme globally in your app root?
  return (
    <ThemeProvider theme={createTheme({...})}>
      ...rest of your application
    </ThemeProvider>
  );
}

Customize Theme Just for your Table

Thanks to Mantine allowing you to nest multiple Theme Providers, you can change your Mantine Theme just for the <MantineReactTable /> component by wrapping a <MantineProvider theme={{...}}> around just your table. The values in this theme will only effect the <MantineReactTable /> component, and not the rest of your site. It will also inherit values from your global theme, so you do not have to redefine everything again. You can just tweak the values you want to change.

import { MantineProvider } from '@mantine/core';
//in one of your normal components
return (
  <MantineProvider
    theme={{
      primaryColor: 'blue',
      primaryShade: 8,
      colors: {
        blue: [
          //define 9 custom blue shades
        ],
      },
    }}
  >
    <MantineReactTable columns={columns} data={data} />
  </MantineProvider>
);

Important Theme Values used by Mantine React Table

<MantineReactTable /> will primarily use the following values internally from your Mantine Theme by default:

theme.colors[theme.primaryColor[theme.primaryShade]] - used as the primary color for anything colorful in the table (primary buttons, text inputs, checkboxes, dragging borders, etc.)
theme.colors.gray[3, 7, 8] - used for some borders
theme.colors.dark[7, 8] - used as the default backgroundColor for the entire table in dark mode
theme.white - used as the default backgroundColor for the entire table in light mode
theme.black - used for some box shadows

If you want to change some of the colors used by specific components within the table, remember that you can use the sx prop in any of the mantine...Props to override the default styles.

Custom Mantine Theme Example

A common use case for this could be if you want to switch your primary and secondary colors, just for this table. Let's take a look at an example that does that, along with some other styling tweaks, so that we can make an ugly table.

Demo

First Name	Last Name	Address	City	State
Dylan	Murray	261 Erdman Ford	East Daphne	Kentucky
Raquel	Kohler	769 Dominic Grove	Columbus	Ohio
Ervin	Reinger	566 Brakus Inlet	South Linda	West Virginia
Brittany	McCullough	722 Emie Stream	Lincoln	Nebraska
Branson	Frami	32188 Larkin Turnpike	Charleston	South Carolina

Rows per page

1-5 of 5

1
import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
2
import { MantineProvider, useMantineTheme } from '@mantine/core';
3

4
type Person = {
5
  firstName: string;
6
  lastName: string;
7
  address: string;
8
  city: string;
9
  state: string;
10
};
11

12
const columns: MRT_ColumnDef<Person>[] = [
13
  {
14
    accessorKey: 'firstName',
15
    header: 'First Name',
16
  },
17
  {
18
    accessorKey: 'lastName',
19
    header: 'Last Name',
20
  },
21
  {
22
    accessorKey: 'address',
23
    header: 'Address',
24
  },
25
  {
26
    accessorKey: 'city',
27
    header: 'City',
28
  },
29
  {
30
    accessorKey: 'state',
31
    header: 'State',
32
  },
33
];
34

35
const data = [
36
  {
37
    firstName: 'Dylan',
38
    lastName: 'Murray',
39
    address: '261 Erdman Ford',
40
    city: 'East Daphne',
41
    state: 'Kentucky',
42
  },
43
  {
44
    firstName: 'Raquel',
45
    lastName: 'Kohler',
46
    address: '769 Dominic Grove',
47
    city: 'Columbus',
48
    state: 'Ohio',
49
  },
50
  {
51
    firstName: 'Ervin',
52
    lastName: 'Reinger',
53
    address: '566 Brakus Inlet',
54
    city: 'South Linda',
55
    state: 'West Virginia',
56
  },
57
  {
58
    firstName: 'Brittany',
59
    lastName: 'McCullough',
60
    address: '722 Emie Stream',
61
    city: 'Lincoln',
62
    state: 'Nebraska',
63
  },
64
  {
65
    firstName: 'Branson',
66
    lastName: 'Frami',
67
    address: '32188 Larkin Turnpike',
68
    city: 'Charleston',
69
    state: 'South Carolina',
70
  },
71
];
72

73
const Example = () => {
74
  const globalTheme = useMantineTheme(); //(optional) if you already have a theme defined in your app root, you can import here
75

76
  return (
77
    //Override theme just for this table
78
    <MantineProvider
79
      theme={{ ...globalTheme, primaryColor: 'red', primaryShade: 5 }}
80
    >
81
      <MantineReactTable
82
        columns={columns}
83
        data={data}
84
        enableRowSelection
85
        enableColumnOrdering
86
        enablePinning
87
      />
88
    </MantineProvider>
89
  );
90
};
91

92
export default Example;

1
import { MantineReactTable } from 'mantine-react-table';
2
import { MantineProvider, useMantineTheme } from '@mantine/core';
3

4
const columns = [
5
  {
6
    accessorKey: 'firstName',
7
    header: 'First Name',
8
  },
9
  {
10
    accessorKey: 'lastName',
11
    header: 'Last Name',
12
  },
13
  {
14
    accessorKey: 'address',
15
    header: 'Address',
16
  },
17
  {
18
    accessorKey: 'city',
19
    header: 'City',
20
  },
21
  {
22
    accessorKey: 'state',
23
    header: 'State',
24
  },
25
];
26

27
const data = [
28
  {
29
    firstName: 'Dylan',
30
    lastName: 'Murray',
31
    address: '261 Erdman Ford',
32
    city: 'East Daphne',
33
    state: 'Kentucky',
34
  },
35
  {
36
    firstName: 'Raquel',
37
    lastName: 'Kohler',
38
    address: '769 Dominic Grove',
39
    city: 'Columbus',
40
    state: 'Ohio',
41
  },
42
  {
43
    firstName: 'Ervin',
44
    lastName: 'Reinger',
45
    address: '566 Brakus Inlet',
46
    city: 'South Linda',
47
    state: 'West Virginia',
48
  },
49
  {
50
    firstName: 'Brittany',
51
    lastName: 'McCullough',
52
    address: '722 Emie Stream',
53
    city: 'Lincoln',
54
    state: 'Nebraska',
55
  },
56
  {
57
    firstName: 'Branson',
58
    lastName: 'Frami',
59
    address: '32188 Larkin Turnpike',
60
    city: 'Charleston',
61
    state: 'South Carolina',
62
  },
63
];
64

65
const Example = () => {
66
  const globalTheme = useMantineTheme(); //(optional) if you already have a theme defined in your app root, you can import here
67

68
  return (
69
    //Override theme just for this table
70
    <MantineProvider
71
      theme={{ ...globalTheme, primaryColor: 'red', primaryShade: 5 }}
72
    >
73
      <MantineReactTable
74
        columns={columns}
75
        data={data}
76
        enableRowSelection
77
        enableColumnOrdering
78
        enablePinning
79
      />
80
    </MantineProvider>
81
  );
82
};
83

84
export default Example;

Customize Table Paper Styling

You can customize both the props and the styles of the internal <Paper /> component that wraps the table by passing in a mantinePaperProps prop. This is useful if you want to change the elevation of the paper, or add a border radius, or any other styling you want to do to the paper.

<MantineReactTable
  columns={columns}
  data={data}
  mantinePaperProps={{
    shadow: 'lg', //use a larger shadow
    //customize paper styles
    sx: {
      borderRadius: '0',
      border: '1px dashed #e0e0e0',
    },
  }}
/>

Customize Table Body, Rows, Columns, and Cells

Here are a few examples of how you can customize the table body, rows, columns, and cells.

Stripe Rows Example

Mantine's Table component has a striped prop that you can use to stripe the rows.

<MantineReactTable
  columns={columns}
  data={data}
  mantineTableProps={{
    striped: true,
  }}
/>

But if you want to stripe the rows yourself, you can do something like this:

<MantineReactTable
  columns={columns}
  data={data}
  mantineTableBodyProps={{
    sx: {
      //stripe the rows, make odd rows a darker color
      '& tr:nth-of-type(odd)': {
        backgroundColor: '#f5f5f5',
      },
    },
  }}
/>

Stripe Columns Example

Similarly, if you want to stripe the columns, you can do something like this:

<MantineReactTable
  columns={columns}
  data={data}
  mantineTableBodyProps={{
    sx: {
      //stripe the rows, make odd rows a darker color
      '& td:nth-of-type(odd)': {
        backgroundColor: '#f5f5f5',
      },
    },
  }}
  mantineTableBodyCellProps={{
    sx: {
      borderRight: '2px solid #e0e0e0', //add a border between columns
    },
  }}
/>

Demo

ID	First Name	Middle Name	Last Name	Address	City	State
1	Dylan	Sprouse	Murray	261 Erdman Ford	East Daphne	Kentucky
2	Raquel	Hakeem	Kohler	769 Dominic Grove	Columbus	Ohio
3	Ervin	Kris	Reinger	566 Brakus Inlet	South Linda	West Virginia
4	Brittany	Kathryn	McCullough	722 Emie Stream	Lincoln	Nebraska
5	Branson	John	Frami	32188 Larkin Turnpike	Charleston	South Carolina

Rows per page

1-5 of 5

1
import { useMemo } from 'react';
2
import { MantineReactTable, type MRT_ColumnDef } from 'mantine-react-table';
3
import { data, type Person } from './makeData';
4

5
const Example = () => {
6
  const columns = useMemo<MRT_ColumnDef<Person>[]>(
7
    () => [
8
      {
9
        accessorKey: 'id',
10
        header: 'ID',
11
        size: 50,
12
      },
13
      {
14
        accessorKey: 'firstName',
15
        header: 'First Name',
16
      },
17
      {
18
        accessorKey: 'middleName',
19
        header: 'Middle Name',
20
      },
21
      {
22
        accessorKey: 'lastName',
23
        header: 'Last Name',
24
      },
25
      {
26
        accessorKey: 'address',
27
        header: 'Address',
28
        size: 300,
29
      },
30
      {
31
        accessorKey: 'city',
32
        header: 'City',
33
      },
34

35
      {
36
        accessorKey: 'state',
37
        header: 'State',
38
      },
39
    ],
40
    [],
41
  );
42

43
  return (
44
    <MantineReactTable
45
      columns={columns}
46
      data={data}
47
      mantinePaperProps={{
48
        shadow: 'none',
49
        sx: {
50
          borderRadius: '0',
51
          border: '1px dashed #e0e0e0',
52
        },
53
      }}
54
      mantineTableProps={{
55
        striped: true,
56
      }}
57
    />
58
  );
59
};
60

61
export default Example;

1
import { useMemo } from 'react';
2
import { MantineReactTable } from 'mantine-react-table';
3
import { data } from './makeData';
4

5
const Example = () => {
6
  const columns = useMemo(
7
    () => [
8
      {
9
        accessorKey: 'id',
10
        header: 'ID',
11
        size: 50,
12
      },
13
      {
14
        accessorKey: 'firstName',
15
        header: 'First Name',
16
      },
17
      {
18
        accessorKey: 'middleName',
19
        header: 'Middle Name',
20
      },
21
      {
22
        accessorKey: 'lastName',
23
        header: 'Last Name',
24
      },
25
      {
26
        accessorKey: 'address',
27
        header: 'Address',
28
        size: 300,
29
      },
30
      {
31
        accessorKey: 'city',
32
        header: 'City',
33
      },
34

35
      {
36
        accessorKey: 'state',
37
        header: 'State',
38
      },
39
    ],
40
    [],
41
  );
42

43
  return (
44
    <MantineReactTable
45
      columns={columns}
46
      data={data}
47
      mantinePaperProps={{
48
        shadow: 'none',
49
        sx: {
50
          borderRadius: '0',
51
          border: '1px dashed #e0e0e0',
52
        },
53
      }}
54
      mantineTableProps={{
55
        striped: true,
56
      }}
57
    />
58
  );
59
};
60

61
export default Example;