Customize Component Props 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`	`{ clearable: true }`	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, 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

TODO link style guide