Material React Table Table Options API Reference

Table Options (Props)

Many of the options you can pass to useMaterialReactTable 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 useMaterialReactTable hook.

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

//or all of the props that could be passed to `<MaterialReactTable />` IF not using `useMaterialReactTable` hook
return (
  <MaterialReactTable
  // all of the props that could be passed here if no `table` prop is passed
  />
);

return <MaterialReactTable table={table} />; //recommended

Drop to group by

#	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	Array<MRT_FilterOption \| string> \| null		MRT Column Filtering Docs

6	'ltr' \| 'rtl'	muiTheme.direction \|\| 'ltr'	MRT Column Resizing Docs

7	'onEnd' \| 'onChange'	'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	Array<TData>		Usage Docs

12	boolean	false	TanStack Table Core Table 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	Partial<MRT_ColumnDef<TData>>		TanStack Table Core Table Docs

18	Partial<MRT_DisplayColumnDef<TData>>		MRT Display Columns Docs

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

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

21	boolean	true	MRT Row Selection Docs

22	boolean	true	MRT Customize Toolbars Docs

23	((cell: MRT_Cell<TData>) => boolean) \| boolean

24	boolean \| 'context-menu' \| ((cell: MRT_Cell<TData>) => 'context-menu' \| boolean)	false	MRT Click to Copy Docs

25	boolean	true	MRT Column Actions Docs

26	boolean	false	MRT Column Ordering DnD Docs

27	boolean	false	MRT Column Filtering Docs

28	boolean	true	MRT Column Filtering Docs

29	boolean		MRT Column Ordering DnD Docs

30	boolean

31	boolean		MRT Column Resizing Docs

32	boolean		MRT Virtualization Docs

33	boolean	true	MRT Density Toggle Docs

34	boolean \| (row: MRT_Row) => boolean		MRT Editing Docs

35	boolean	true	MRT Expanding Sub Rows Docs

36	boolean		MRT Expanding Sub Rows Docs

37	boolean	true	TanStack Filters Docs

38	boolean	true	MRT Column Filtering Docs

39	boolean	true	TanStack Filters Docs

40	boolean	true	MRT Full Screen Toggle Docs

41	boolean	true	MRT Global Filtering Docs

42	boolean	true	MRT Global Filtering Docs

43	boolean	true	MRT Global Filtering Docs

44	boolean		MRT Aggregation and Grouping Docs

45	boolean	true	MRT Column Hiding Docs

46	boolean		TanStack Sorting Docs

47	boolean	true	MRT Row Selection Docs

48	boolean

49	boolean	true

50	boolean

51	boolean

52	boolean		Row Numbers Feature Guide

53	boolean

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

55	boolean \| (row: MRT_Row) => boolean		MRT Row Selection Docs

56	boolean		MRT Virtualization Docs

57	boolean	true

58	boolean	true

59	boolean	true

60	boolean

61	boolean

62	boolean	true

63	boolean	true

64	boolean	true

65	boolean	true

66	boolean	true

67	(dataRow: TData) => TData[]

68	Record<string, FilterFn>		TanStack Table Filters Docs

69	boolean	false	TanStack Filtering Docs

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

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

72	() => MRT_RowModel<TData>

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

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

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

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

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

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

79	() => MRT_RowModel<TData>

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

81	(originalRow: TData, index: number, parent?: MRT_Row<TData>) => string		TanStack Table Core Table Docs

82	(table: Table<TData>) => () => RowModel<TData>		TanStack Table Sorting Docs

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

84	MRT_FilterOption

85	Array<MRT_FilterOption \| string> \| null

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

87	Partial<MRT_Icons>;

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

89	(e: unknown) => boolean		TanStack Table Sorting Docs

90	boolean	true

91	'semantic' \| 'grid' \| 'grid-no-grow'	'semantic' //(changes based on other enabled features)	TODO

92	MRT_Localization		Localization (i18n) Guide

93	boolean		TanStack Table Expanding Docs

94	boolean		TanStack Table Filters Docs

95	boolean		TanStack Table Grouping Docs

96	boolean		TanStack Table Pagination Docs

97	boolean		TanStack Table Sorting Docs

98	number	100	TanStack Table Filtering Docs

99	number		TanStack Table Sorting Docs

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

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

102	TableMeta		TanStack Table Core Docs

103	BoxProps \| ({ table }) => BoxProps		Material UI Box Props

104	CircularProgressProps \| ({ table }) => CircularProgressProps		Material UI CircularProgress Props

105	IconButtonProps \| (({table, column}) => IconButtonProps);		Material UI IconButton Props

106	IconButtonProps \| ({table, column}) => IconButtonProps		Material UI IconButton Props

107	ButtonProps \| ({ cell, column, row, table }) => ButtonProps		Material UI Button Props

108	TableCellProps \| ({ row, table }) => TableCellProps		Material UI TableCell Props

109	IconButtonProps \| ({ table }) => IconButtonProps		Material UI Dialog Props

110	TextFieldProps \| ({ cell, column, row, table }) => TextFieldProps		Material UI TextField Props

111	IconButtonProps \| ({ table }) => IconButtonProps		Material UI IconButton Props

112	IconButtonProps \| ({ row, table }) => IconButtonProps		Material UI IconButton Props

113	AutocompleteProps \| ({ column, rangeFilterIndex, table }) => AutocompleteProps		Material UI Autocomplete Props

114	CheckboxProps \| ({ column, table}) => CheckboxProps		Material UI Checkbox Props

115	DatePickerProps \| ({ column, rangeFilterIndex, table }) => DatePickerProps		MUI X DatePicker Props

116	DateTimePickerProps \| ({ column, rangeFilterIndex, table }) => DateTimePickerProps		MUI X DateTimePicker Props

117	SliderProps \| ({ column, table}) => SliderProps		Material UI Slider Props

118	TextFieldProps \| ({ table, column, rangeFilterIndex}) => TextFieldProps		Material UI TextField Props

119	TimePickerProps \| ({ column, rangeFilterIndex, table }) => TimePickerProps		MUI X TimePicker Props

120	LinearProgressProps \| ({ isTopToolbar, table }) => LinearProgressProps		Material UI LinearProgress Props

121	Partial<PaginationProps> \| ({ table }) => Partial<PaginationProps>		Material UI TablePagination Props

122	IconButtonProps \| ({ row, table }) => IconButtonProps		Material UI IconButton Props

123	TextFieldProps \| ({ table }) => TextFieldProps		Material UI TextField Props

124	CheckboxProps \| ({ table }) => CheckboxProps		Material UI Checkbox Props

125	CheckboxProps \| ({ row, table }) => CheckboxProps		Material UI Checkbox Props

126	SkeletonProps \| ({ cell, column, row, table }) => SkeletonProps		Material UI Skeleton Props

127	TableCellProps \| ({ cell, column, row, table }) => TableCellProps		Material UI TableCell Props

128	TableBodyProps \| ({ table }) => TableBodyProps		Material UI TableBody Props

129	TableRowProps \| ({ isDetailPanel, row, table }) => TableRowProps	{ hover: true }	Material UI TableRow Props

130	TableContainerProps \| ({ table }) => TableContainerProps		Material UI TableContainer Props

131	TableCellProps\| ({table, column}) => TableCellProps		Material UI TableCell Props

132	TableFooterProps \| ({ table }) => TableFooterProps);		Material UI TableFooter Props

133	TableRowProps \| ({table, footerGroup}) => TableRowProps		Material UI TableRow Props

134	TableCellProps \| ({ table, column}) => TableCellProps		Material UI TableCell Props

135	TableHeadProps \| ({ table }) => TableHeadProps		Material UI TableHead Props

136	TableRowProps \| ({ table, headerGroup}) => TableRowProps		Material UI TableRow Props

137	PaperProps \| ({ table }} => PaperProps		Material UI Paper API Docs

138	TableProps \| ({ table }} => TableProps		Material UI TableProps API Docs

139	ChipProps\| ({ table }} => ChipProps		Material UI Chip Props

140	AlertProps \| ({ table }) => AlertProps		Material UI Alert Props

141	BoxProps \| ({ table }) => BoxProps		Material UI Box Props

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

143	OnChangeFn<ColumnFiltersState>		TanStack Table Filter Docs

144	OnChangeFn<ColumnOrderState>		TanStack Table Column Ordering Docs

145	OnChangeFn<ColumnPinningState>		TanStack Table Column Pinning Docs

146	OnChangeFn<ColumnSizingState>		TanStack Table Column Sizing Docs

147	OnChangeFn<ColumnSizingInfoState>		TanStack Table Column Sizing Docs

148	OnChangeFn<ColumnVisibilityState>		TanStack Table Column Visibility Docs

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

150	OnChangeFn<MRT_Row<TData> \| null>

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

152	OnChangeFn<MRT_DensityState>		MRT Density Toggle Docs

153	OnChangeFn<MRT_Column<TData> \| null>

154	OnChangeFn<MRT_Row<TData> \| null>

155	OnChangeFn<MRT_Cell<TData> \| null>

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

157	OnChangeFn<MRT_Row<TData> \| null>

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

159	OnChangeFn<ExpandedState>		TanStack Table Expanding Docs

160	OnChangeFn<GlobalFilterState>		TanStack Table Filters Docs

161	OnChangeFn<GlobalFilterState>		TanStack Table Filters Docs

162	OnChangeFn<GroupingState>		TanStack Table Grouping Docs

163	OnChangeFn<MRT_Column<TData> \| null>

164	OnChangeFn<MRT_Row<TData> \| null>

165	OnChangeFn<boolean>		MRT Full Screen Toggle Docs

166	OnChangeFn<PaginationState>		TanStack Table Pagination Docs

167	OnChangeFn<RowSelectionState>		TanStack Table Pinning Docs

168	OnChangeFn<RowSelectionState>		TanStack Table Row Selection Docs

169	OnChangeFn<boolean>

170	OnChangeFn<boolean>

171	OnChangeFn<boolean>

172	OnChangeFn<boolean>

173	OnChangeFn<SortingState>		TanStack Table Sorting Docs

174	number		TanStack Table Pagination Docs

175	boolean		TanStack Table Expanding Docs

176	'first' \| 'last'

177	'top' \| 'bottom' \| number	'top'

178	'first' \| 'last'	'first'

179	'left' \| 'right'	'right'

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

181	'bottom' \| 'top' \| 'none'	'top'

182	'bottom' \| 'top' \| 'both' \| 'none'	'top'

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

184	({ table }) => ReactNode

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

186	{ cell, closeMenu, column, internalMenuItems, row, staticColumnIndex, staticRowIndex, table }) => ReactNode[]

187	({ closeMenu, column, internalColumnMenuItems, table }) => ReactNode[]

188	({ column, internalFilterOptions, onSelectFilterMode, table }) => ReactNode[]

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

190	({ row, table }) => ReactNode

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

192	({ table }) => ReactNode

193	({ internalFilterOptions, onSelectFilterMode, table }) => ReactNode[]

194	({ closeMenu, row, table }) => ReactNode[]

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

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

197	({ table}) => ReactNode

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

199	({ table }) => ReactNode

200	number

201	'original' \| 'static'	'original'

202	'sticky' \| 'top' \| 'bottom' \| 'top-and-bottom' \| 'select-sticky' \| 'select-top' \| 'select-bottom'	'sticky'

203	MutableRefObject<Virtualizer \| null>

204	Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>

205	'all' \| 'page'	'page'

206	boolean		TanStack Table Sorting Docs

207	Record<string, SortingFn>		TanStack Table Sorting Docs

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

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

This example is written for MRT V2.

If your app is still using MRT V1, either Upgrade to MRT V2 or use the V1 Docs instead. (useMaterialReactTable only exists in V2)

Source Code

1import { useEffect, useMemo, useState } from 'react';
2import Link from 'next/link';
3import {
4  MaterialReactTable,
5  type MRT_TableOptions,
6  type MRT_ColumnDef,
7} from 'material-react-table';
8import {
9  Link as MuiLink,
10  Typography,
11  useMediaQuery,
12  useTheme,
13} from '@mui/material';
14import { SampleCodeSnippet } from '../mdx/SampleCodeSnippet';
15import { type TableOption, tableOptions } from './tableOptions';
16
17interface Props {
18  onlyOptions?: Set<keyof MRT_TableOptions<TableOption>>;
19}
20
21const TableOptionsTable = ({ onlyOptions }: Props) => {
22  const theme = useTheme();
23  const isDesktop = useMediaQuery('(min-width: 1200px)');
24
25  const columns = useMemo<MRT_ColumnDef<TableOption>[]>(
26    () => [
27      {
28        enableClickToCopy: true,
29        header: 'Prop Name',
30        accessorKey: 'tableOption',
31        muiCopyButtonProps: ({ cell }) => ({
32          className: 'prop',
33          id: `${cell.getValue<string>()}-prop`,
34        }),
35        Cell: ({ renderedCellValue, row }) =>
36          row.original?.required ? (
37            <strong style={{ color: theme.palette.primary.dark }}>
38              {renderedCellValue}*
39            </strong>
40          ) : (
41            renderedCellValue
42          ),
43      },
44      {
45        header: 'Type',
46        accessorKey: 'type',
47        enableGlobalFilter: false,
48        Cell: ({ cell }) => (
49          <SampleCodeSnippet
50            className="language-ts"
51            enableCopyButton={false}
52            style={{
53              backgroundColor: 'transparent',
54              fontSize: '0.9rem',
55              margin: 0,
56              padding: 0,
57              minHeight: 'unset',
58            }}
59          >
60            {cell.getValue<string>()}
61          </SampleCodeSnippet>
62        ),
63      },
64      {
65        header: 'Default Value',
66        accessorKey: 'defaultValue',
67        enableGlobalFilter: false,
68        Cell: ({ cell }) => (
69          <SampleCodeSnippet
70            className="language-js"
71            enableCopyButton={false}
72            style={{
73              backgroundColor: 'transparent',
74              fontSize: '0.9rem',
75              margin: 0,
76              padding: 0,
77              minHeight: 'unset',
78            }}
79          >
80            {cell.getValue<string>()}
81          </SampleCodeSnippet>
82        ),
83      },
84      {
85        header: 'Description',
86        accessorKey: 'description',
87        enableGlobalFilter: false,
88      },
89      {
90        header: 'More Info Links',
91        accessorKey: 'link',
92        disableFilters: true,
93        enableGlobalFilter: false,
94        Cell: ({ cell, row }) => (
95          <Link href={cell.getValue<string>()} passHref legacyBehavior>
96            <MuiLink
97              color={
98                row.original.source === 'MRT'
99                  ? 'text.primary'
100                  : row.original.source === 'Material UI'
101                    ? 'primary.main'
102                    : row.original.source === 'TanStack Table'
103                      ? 'secondary.main'
104                      : undefined
105              }
106              target={
107                cell.getValue<string>().startsWith('http')
108                  ? '_blank'
109                  : undefined
110              }
111              rel="noopener"
112            >
113              {row.original?.linkText}
114            </MuiLink>
115          </Link>
116        ),
117      },
118    ],
119    [theme],
120  );
121
122  const [columnPinning, setColumnPinning] = useState({});
123
124  useEffect(() => {
125    if (typeof window !== 'undefined') {
126      if (isDesktop) {
127        setColumnPinning({
128          left: ['mrt-row-expand', 'mrt-row-numbers', 'tableOption'],
129          right: ['link'],
130        });
131      } else {
132        setColumnPinning({});
133      }
134    }
135  }, [isDesktop]);
136
137  const data = useMemo(() => {
138    if (onlyOptions) {
139      return tableOptions.filter(({ tableOption }) =>
140        onlyOptions.has(tableOption),
141      );
142    }
143    return tableOptions;
144  }, [onlyOptions]);
145
146  return (
147    <MaterialReactTable
148      columns={columns}
149      data={data}
150      displayColumnDefOptions={{
151        'mrt-row-numbers': {
152          size: 10,
153        },
154        'mrt-row-expand': {
155          size: 10,
156        },
157      }}
158      enableColumnActions={!onlyOptions}
159      enableColumnFilterModes
160      enablePagination={false}
161      enableColumnPinning
162      enableRowNumbers
163      enableBottomToolbar={false}
164      enableTopToolbar={!onlyOptions}
165      initialState={{
166        columnVisibility: { description: false },
167        density: 'compact',
168        showGlobalFilter: true,
169        sorting: [{ id: 'tableOption', desc: false }],
170      }}
171      muiSearchTextFieldProps={{
172        placeholder: 'Search All Props',
173        sx: { minWidth: '18rem' },
174        variant: 'outlined',
175      }}
176      muiTablePaperProps={{
177        sx: { mb: '1.5rem' },
178        id: onlyOptions ? 'relevant-props-table' : 'props-table',
179      }}
180      positionGlobalFilter="left"
181      renderDetailPanel={({ row }) => (
182        <Typography
183          color={row.original.description ? 'secondary.main' : 'text.secondary'}
184        >
185          {row.original.description || 'No Description Provided... Yet...'}
186        </Typography>
187      )}
188      rowNumberDisplayMode="static"
189      onColumnPinningChange={setColumnPinning}
190      state={{ columnPinning }}
191    />
192  );
193};
194
195export default TableOptionsTable;
196