MRT logoMantine React Table

On This Page

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.

#
Prop Name
Type
Default Value
More Info Links
1'semantic' | 'grid''semantic'TODO
2BoxProps | ({ table }) => BoxPropsMantine Toolbar Docs
3ActionIconProps | (({table, column }) => ActionIconProps);Mantine ActionIcon Docs
4ActionIconProps | ({table, column }) => ActionIconPropsMantine ActionIcon Docs
5UnstyledButtonProps | ({ cell, column, row, table }) => UnstyledButtonPropsMantine UnstyledButton Docs
6ModalProps | ({ row, table }) => ModalPropsMantine Modal Docs
7BoxProps | ({ row, table }) => BoxPropsMantine Box Docs
8ModalProps | ({ row, table }) => ModalPropsMantine Modal Docs
9SelectProps | ({ cell, column, row, table }) => SelectPropsMantine Select Docs
10TextInputProps | ({ cell, column, row, table }) => TextInputPropsMantine TextInput Docs
11ActionIconProps | ({ table }) => ActionIconPropsMantine ActionIcon Docs
12ActionIconProps | ({ row, table }) => ActionIconPropsMantine ActionIcon Docs
13AutocompleteProps | ({ column, table, rangeFilterIndex }) => AutocompletePropsMantine Autocomplete Docs
14CheckboxProps | ({ column, table }) => CheckboxPropsMantine Checkbox Docs
15MultiSelectProps | ({ column, table }) => MultiSelectProps{ clearable: true }Mantine MultiSelect Docs
16RangeSliderProps | ({ column, table }) => RangeSliderPropsMantine Slider Docs
17SelectProps | ({ column, table }) => SelectPropsMantine Select Docs
18TextInputProps | ({ table, column, rangeFilterIndex }) => TextInputPropsMantine TextInput Docs
19HighlightProps | ({ cell, column, row, table }) => HighlightPropsMantine Highlight Docs
20LoadingOverlayProps | ({ table }) => LoadingOverlayPropsMantine LoadingOverlay Docs
21PaginationProps & { rowsPerPageOptions?: string[], showRowsPerPage?: boolean; }Mantine Pagination Docs
22PaperProps | ({ table }} => PaperPropsMantine Paper Docs
23ProgressProps | ({ isTopToolbar, table }) => ProgressPropsMantine Progress Docs
24ActionIconProps | ({ row, table }) => ActionIconPropsMantine ActionIcon Docs
25TextInputProps | ({ table }) => TextInputPropsMantine TextInput Docs
26CheckboxProps | ({ table }) => CheckboxPropsMantine Checkbox Docs
27CheckboxProps | ({ row, table }) => CheckboxPropsMantine Checkbox Docs
28SkeletonProps | ({ cell, column, row, table }) => SkeletonPropsMantine Skeleton Docs
29BoxProps | ({ cell, column, row, table }) => BoxPropsMantine Box Docs
30BoxProps | ({ table }) => BoxPropsMantine Box Docs
31BoxProps | ({ isDetailPanel, row, table }) => BoxPropsMantine Box Docs
32BoxProps | ({ table }) => BoxPropsMantine Box Docs
33BoxProps| ({table, column }) => BoxPropsMantine Box Docs
34BoxProps | ({ table }) => BoxProps);Mantine Box Docs
35BoxProps | ({table, footerGroup}) => BoxPropsMantine Box Docs
36BoxProps | ({ table, column }) => BoxPropsMantine Box Docs
37BoxProps | ({ table }) => BoxPropsMantine TableHead Docs
38BoxProps | ({ table, headerGroup}) => BoxPropsMantine Box Docs
39TableProps | ({ table }} => TablePropsMantine Table Docs
40BadgeProps| ({ table }} => BadgePropsMantine Chip Docs
41AlertProps | ({ table }) => AlertPropsMantine Alert Docs
42BoxProps | ({ table }) => BoxPropsMantine Toolbar Docs

Relevant Column Options

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

#
Column Option
Type
Default Value
More Info Links
1ActionIconProps | ({ column, table }) => ActionIconPropsMantine ActionIcon API
2ActionIconProps | ({ column, table }) => ActionIconPropsMantine ActionIcon API
3UnstyledButtonProps | ({ cell, column, row, table }) => UnstyledButtonPropsMantine UnstyledButton API
4SelectProps | ({ cell, column, row, table }) => SelectPropsMantine Select Docs
5TextInputProps | ({ cell, column, row, table }) => TextInputPropsMantine TextInput API
6AutocompleteProps | ({ column, table, rangeFilterIndex}) => AutocompletePropsMantine Autocomplete Docs
7CheckboxProps | ({ column, table }) => CheckboxPropsMantine Checkbox Props
8MultiSelectProps | ({ column, table }) => MultiSelectPropsMantine MultiSelect Docs
9RangeSliderProps | ({ column, table }) => RangeSliderPropsMantine Slider Docs
10SelectProps | ({ column, table }) => SelectPropsMantine Select Docs
11TextInputProps | ({ column, rangeFilterIndex, table }) => TextInputPropsMantine TextInput Docs
12BoxProps | ({ cell, table }) => BoxPropsMantine Box API
13BoxProps | ({ column, table }) => BoxPropsMantine Box API
14BoxProps | ({ column, table }) => BoxPropsMantine Box API

Mantine Props and Types

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