Mantine React Table Table Options API Reference

Table Options (Props)

Many of the options you can pass to useMantineReactTable are the same as the ones you can pass to the TanStack Table useReactTable hook.

Here is a list of all the table options that you can pass to the useMantineReactTable hook.

const table = useMantineReactTable({
  // all the options that you can pass here
});

//Note: you can also pass table options directly to the MantineReactTable component instead of the table instance
//But this will not be encouraged as it will be deprecated in the future
return <MantineReactTable table={table} />;

	#	Type	Default Value	More Info Links
	1	Record<string, AggregationFn>		TanStack Table Grouping Docs

	2	boolean		TanStack Table Core Table Docs

	3	boolean		TanStack Table Expanding Docs

	4	boolean		TanStack Table Pagination Docs

	5	'subheader' \| 'popover' \| 'custom'	'subheader'	MRT Column Filtering Docs

	6	Array<MRT_FilterOption \| string> \| null		MRT Column Filtering Docs

	7	'onChange' \| 'onEnd'	'onChange'	MRT Column Resizing Docs

	8	Array<MRT_ColumnDef<TData>>		MRT Column Options API Reference

	9	MutableRefObject<Virtualizer \| null>

	10	Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>

	11	'modal' \| 'row' \| 'custom'	'modal'	MRT Editing Docs

	12	Array<TData>		Usage Docs

	13	boolean	false	TanStack Table Core Table Docs

	14	boolean	false	TanStack Table Core Table Docs

	15	boolean	false	TanStack Table Core Table Docs

	16	boolean	false	TanStack Table Core Table Docs

	17	boolean	false	TanStack Table Core Table Docs

	18	Partial<MRT_ColumnDef<TData>>		TanStack Table Core Table Docs

	19	{ [key: string]: MRT_ColumnDef<TData> }		MRT Display Columns Docs

	20	'modal' \| 'row' \| 'cell' \| 'table' \| 'custom'	'modal'	MRT Editing Docs

	21	boolean	true	MRT Customize Toolbars Docs

	22	boolean	false	MRT Click to Copy Docs

	23	boolean	true	MRT Column Actions Docs

	24	boolean	false	MRT Column Ordering DnD Docs

	25	boolean	false	MRT Column Filtering Docs

	26	boolean	true	MRT Column Filtering Docs

	27	boolean		MRT Column Ordering DnD Docs

	28	boolean		MRT Column Resizing Docs

	29	boolean		MRT Virtualization Docs

	30	boolean	true	MRT Density Toggle Docs

	31	boolean \| (row: MRT_Row<TData>) => boolean		MRT Editing Docs

	32	boolean	true	MRT Expanding Sub Rows Docs

	33	boolean		MRT Expanding Sub Rows Docs

	34	boolean		MRT Column Filtering Docs

	35	boolean	true	MRT Column Filtering Docs

	36	boolean	true	TanStack Filters Docs

	37	boolean	true	MRT Full Screen Toggle Docs

	38	boolean	true	MRT Global Filtering Docs

	39	boolean	true	MRT Global Filtering Docs

	40	boolean	true	MRT Global Filtering Docs

	41	boolean		MRT Aggregation and Grouping Docs

	42	boolean	true	MRT Column Hiding Docs

	43	boolean		TanStack Sorting Docs

	44	boolean	true	MRT Row Selection Docs

	45	boolean

	46	boolean	true

	47	boolean

	48	boolean

	49	boolean

	50	boolean		Row Numbers Feature Guide

	51	boolean

	52	boolean \| (row: MRT_Row) => boolean

	53	boolean		MRT Virtualization Docs

	54	boolean	true

	55	boolean	true

	56	boolean	true

	57	boolean

	58	boolean

	59	boolean	true

	60	boolean	true

	61	boolean	true

	62	boolean	true

	63	boolean	true

	64	(dataRow: TData) => TData[]

	65	Record<string, FilterFn>		TanStack Table Filters Docs

	66	boolean	false	TanStack Filtering Docs

	67	(column: Column<TData, unknown>) => boolean

	68	(table: Table<TData>) => () => RowModel<TData>		TanStack Table Core Table Docs

	69	() => MRT_RowModel<TData>

	70	() => Map<any, number>		TanStack Table Filters Docs

	71	() => RowModel<TData>		TanStack Table Filters Docs

	72	() => Map<any, number>		TanStack Table Filters Docs

	73	() => RowModel<TData>		TanStack Table Filters Docs

	74	(table: Table<TData>) => () => RowModel<TData>		TanStack Table Grouping Docs

	75	(row: Row<TData>) => boolean		TanStack Table Expanding Docs

	76	() => MRT_RowModel<TData>

	77	(row: Row<TData>) => boolean		TanStack Table Expanding Docs

	78	(originalRow: TData, index: number, parent?: MRT_Row<TData>) => string		TanStack Table Core Table Docs
This optional function is used to derive a unique ID for any given row. If not provided the rows index is used (nested rows join together with . using their grandparents' index eg. index.index.index). If you need to identify individual rows that are originating from any server-side operations, it's suggested you use this function to return an ID that makes sense regardless of network IO/ambiguity eg. a userId, taskId, database ID field, etc.
	79	(table: Table<TData>) => () => RowModel<TData>		TanStack Table Sorting Docs

	80	(originalRow: TData, index: number) => undefined \| TData[]		TanStack Table Core Table Docs

	81	MRT_FilterOption

	82	Array<MRT_FilterOption \| string> \| null

	83	false \| 'reorder' \| 'remove'	reorder	TanStack Table Grouping Docs

	84	Partial<MRT_Icons>;

	85	Partial<MRT_TableState<TData>>		Table State Management Guide
Use this option to optionally pass initial state to the table. This state will be used when resetting various table states either automatically by the table (eg. options.autoResetPagination) or via functions like table.resetRowSelection(). Most reset function allow you optionally pass a flag to reset to a blank/default state instead of the initial state. Table state will not be reset when this object changes, which also means that the initial state object does not need to be stable.
	86	(e: unknown) => boolean		TanStack Table Sorting Docs

	87	'semantic' \| 'grid'	'semantic'	TODO

	88	MRT_Localization		Localization (i18n) Guide

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

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

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

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

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

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

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

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

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

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

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

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

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

	102	DateInputProps \| ({ table, column, rangeFilterIndex }) => DateInputProps		Mantine DateInput Docs

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	131	boolean		TanStack Table Expanding Docs

	132	boolean		TanStack Table Filters Docs

	133	boolean		TanStack Table Grouping Docs

	134	boolean		TanStack Table Pagination Docs

	135	boolean		TanStack Table Sorting Docs

	136	number	100	TanStack Table Filtering Docs

	137	number		TanStack Table Sorting Docs

	138	'cell' \| 'row' \| 'table-body'		Memoize Components Guide

	139	<T>(defaultOptions: T, options: Partial<T>) => T		TanStack Table Core Docs

	140	TableMeta		TanStack Table Core Docs

	141	OnChangeFn<{ [key: string]: MRT_FilterOption }>

	142	OnChangeFn<ColumnFiltersState>		TanStack Table Filter Docs

	143	OnChangeFn<ColumnOrderState>		TanStack Table Column Ordering Docs

	144	OnChangeFn<ColumnPinningState>		TanStack Table Column Pinning Docs

	145	OnChangeFn<ColumnSizingState>		TanStack Table Column Sizing Docs

	146	OnChangeFn<ColumnSizingInfoState>		TanStack Table Column Sizing Docs

	147	OnChangeFn<ColumnVisibilityState>		TanStack Table Column Visibility Docs

	148	({ row, table }) => void		MRT Editing Docs

	149	OnChangeFn<MRT_Row<TData> \| null>

	150	({ exitEditingMode, row, table, values}) => Promise<void> \| void		MRT Editing Docs

	151	OnChangeFn<MRT_DensityState>		MRT Density Toggle Docs

	152	OnChangeFn<MRT_Column<TData> \| null>

	153	OnChangeFn<MRT_Row<TData> \| null>

	154	OnChangeFn<MRT_Cell<TData> \| null>

	155	({ row, table }) => void		MRT Editing Docs

	156	OnChangeFn<MRT_Row<TData> \| null>

	157	({ exitEditingMode, row, table, values}) => Promise<void> \| void		MRT Editing Docs

	158	OnChangeFn<ExpandedState>		TanStack Table Expanding Docs

	159	OnChangeFn<GlobalFilterState>		TanStack Table Filters Docs

	160	OnChangeFn<GlobalFilterState>		TanStack Table Filters Docs

	161	OnChangeFn<GroupingState>		TanStack Table Grouping Docs

	162	OnChangeFn<MRT_Column<TData> \| null>

	163	OnChangeFn<MRT_Row<TData> \| null>

	164	OnChangeFn<boolean>		MRT Full Screen Toggle Docs

	165	OnChangeFn<PaginationState>		TanStack Table Pagination Docs

	166	OnChangeFn<RowSelectionState>		TanStack Table Row Selection Docs

	167	OnChangeFn<boolean>

	168	OnChangeFn<boolean>

	169	OnChangeFn<boolean>

	170	OnChangeFn<boolean>

	171	OnChangeFn<SortingState>		TanStack Table Sorting Docs

	172	number		TanStack Table Pagination Docs

	173	boolean		TanStack Table Expanding Docs

	174	'default' \| 'pages' \| 'custom'	'default'	MRT Editing Docs

	175	'first' \| 'last'

	176	'first' \| 'last'

	177	'left' \| 'right'

	178	'bottom' \| 'top' \| 'both'

	179	'bottom' \| 'top' \| 'head-overlay' \| 'none'

	180	'bottom' \| 'top' \| 'both' \| 'none'

	181	ReactNode \| ({ table }) => ReactNode

	182	({ table }) => ReactNode

	183	({ closeMenu, column, table, internalColumnMenuItems }) => ReactNode

	184	({ column, internalFilterOptions, onSelectFilterMode, table }) => ReactNode

	185	({ row, table, internalEditComponents }) => ReactNode

	186	({ row, table }) => ReactNode

	187	({ row, table, internalEditComponents }) => ReactNode

	188	({ table }) => ReactNode

	189	({ internalFilterOptions, onSelectFilterMode, table }) => ReactNode

	190	({ closeMenu, row, table }) => ReactNode

	191	({ cell, row, table }) => ReactNode

	192	({ groupedAlert, selectedAlert, table }) => ReactNode

	193	({ table }) => ReactNode

	194	ReactNode \| ({ table }) => ReactNode

	195	({ table }) => ReactNode

	196	number

	197	'original' \| 'static'	'static'

	198	MutableRefObject<Virtualizer \| null>

	199	Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>

	200	'all' \| 'page'	'page'

	201	'checkbox' \| 'radio' \| 'switch'	'checkbox'	MRT Editing Docs

	202	boolean		TanStack Table Sorting Docs

	203	Record<string, SortingFn>		TanStack Table Sorting Docs

	204	Partial<MRT_TableState<TData>>		Table State Management Guide

Wanna see the source code for this table? Check it out down below!

1
import { useEffect, useMemo, useState } from 'react';
2
import Link from 'next/link';
3
import {
4
  MantineReactTable,
5
  type MRT_TableOptions,
6
  type MRT_ColumnDef,
7
} from 'mantine-react-table';
8
import { Anchor, Text } from '@mantine/core';
9
import { useMediaQuery } from '@mantine/hooks';
10
import { SampleCodeSnippet } from '../mdx/SampleCodeSnippet';
11
import { type TableOption, tableOptions } from './tableOptions';
12
import { getPrimaryColor } from 'mantine-react-table/src/column.utils';
13

14
interface Props {
15
  onlyOptions?: Set<keyof MRT_TableOptions<TableOption>>;
16
}
17

18
const TableOptionsTable = ({ onlyOptions }: Props) => {
19
  const isDesktop = useMediaQuery('(min-width: 1200px)');
20

21
  const columns = useMemo(
22
    () =>
23
      [
24
        {
25
          enableClickToCopy: true,
26
          header: 'Prop Name',
27
          accessorKey: 'tableOption',
28
          mantineCopyButtonProps: ({ cell }) => ({
29
            className: 'prop',
30
            id: `${cell.getValue<string>()}-prop`,
31
          }),
32
          Cell: ({ renderedCellValue, row }) =>
33
            row.original?.required ? (
34
              <Text
35
                component="strong"
36
                sx={(theme) => ({
37
                  color: getPrimaryColor(theme),
38
                })}
39
              >
40
                {renderedCellValue}*
41
              </Text>
42
            ) : (
43
              renderedCellValue
44
            ),
45
        },
46
        {
47
          header: 'Type',
48
          accessorKey: 'type',
49
          enableGlobalFilter: false,
50
          Cell: ({ cell }) => (
51
            <SampleCodeSnippet language="typescript" noCopy>
52
              {cell.getValue<string>()}
53
            </SampleCodeSnippet>
54
          ),
55
        },
56
        {
57
          header: 'Required',
58
          accessorKey: 'required',
59
          enableGlobalFilter: false,
60
        },
61
        {
62
          header: 'Default Value',
63
          accessorKey: 'defaultValue',
64
          enableGlobalFilter: false,
65
          Cell: ({ cell }) => (
66
            <SampleCodeSnippet language="typescript" noCopy>
67
              {cell.getValue<string>()}
68
            </SampleCodeSnippet>
69
          ),
70
        },
71
        {
72
          header: 'Description',
73
          accessorKey: 'description',
74
          enableGlobalFilter: false,
75
        },
76
        {
77
          header: 'More Info Links',
78
          accessorKey: 'link',
79
          disableFilters: true,
80
          enableGlobalFilter: false,
81
          Cell: ({ cell, row }) => (
82
            <Link href={cell.getValue() as string} passHref legacyBehavior>
83
              <Anchor
84
                color={
85
                  row.original.source === 'MRT'
86
                    ? 'dimmed'
87
                    : row.original.source === 'Mantine'
88
                    ? 'teal'
89
                    : row.original.source === 'TanStack Table'
90
                    ? 'blue'
91
                    : undefined
92
                }
93
                target={
94
                  (cell.getValue() as string).startsWith('http')
95
                    ? '_blank'
96
                    : undefined
97
                }
98
                rel="noopener"
99
              >
100
                {row.original?.linkText}
101
              </Anchor>
102
            </Link>
103
          ),
104
        },
105
      ] as MRT_ColumnDef<TableOption>[],
106
    [],
107
  );
108

109
  const [columnPinning, setColumnPinning] = useState({});
110

111
  useEffect(() => {
112
    if (typeof window !== 'undefined') {
113
      if (isDesktop) {
114
        setColumnPinning({
115
          left: ['mrt-row-expand', 'mrt-row-numbers', 'tableOption'],
116
          right: ['link'],
117
        });
118
      } else {
119
        setColumnPinning({});
120
      }
121
    }
122
  }, [isDesktop]);
123

124
  const data = useMemo(() => {
125
    if (onlyOptions) {
126
      return tableOptions.filter(({ tableOption }) =>
127
        onlyOptions.has(tableOption),
128
      );
129
    }
130
    return tableOptions;
131
  }, [onlyOptions]);
132

133
  return (
134
    <MantineReactTable
135
      columns={columns}
136
      data={data}
137
      displayColumnDefOptions={{
138
        'mrt-row-numbers': {
139
          size: 10,
140
        },
141
        'mrt-row-expand': {
142
          size: 10,
143
        },
144
      }}
145
      enableColumnActions={!onlyOptions}
146
      enableColumnFilterModes
147
      enablePagination={false}
148
      enablePinning
149
      enableRowNumbers
150
      enableBottomToolbar={false}
151
      enableTopToolbar={!onlyOptions}
152
      initialState={{
153
        columnVisibility: { required: false, description: false },
154
        density: 'xs',
155
        showGlobalFilter: true,
156
        sorting: [{ id: 'tableOption', desc: false }],
157
      }}
158
      mantineSearchTextInputProps={{
159
        placeholder: 'Search All Props',
160
        sx: { minWidth: '18rem' },
161
        variant: 'filled',
162
      }}
163
      mantinePaperProps={{
164
        sx: { marginBottom: '24px' },
165
        id: onlyOptions ? 'relevant-props-table' : 'props-table',
166
      }}
167
      positionGlobalFilter="left"
168
      renderDetailPanel={({ row }) => (
169
        <Text color={row.original.description ? 'teal' : 'gray'}>
170
          {row.original.description || 'No Description Provided... Yet...'}
171
        </Text>
172
      )}
173
      rowNumberMode="static"
174
      onColumnPinningChange={setColumnPinning}
175
      state={{ columnPinning }}
176
    />
177
  );
178
};
179

180
export default TableOptionsTable;