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	Array<TableFeature>		TanStack Table Custom Features Docs

2	Record<string, AggregationFn>		TanStack Table Grouping Docs

3	boolean		TanStack Table Core Table Docs

4	boolean		TanStack Table Expanding Docs

5	boolean		TanStack Table Pagination Docs

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

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

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

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

10	MutableRefObject<Virtualizer \| null>

11	Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>

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	Partial<MRT_DisplayColumnDef<TData>>		MRT Display Columns Docs

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

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

22	boolean	true	MRT Row Selection Docs

23	boolean	true	MRT Customize Toolbars Docs

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

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

26	boolean	true	MRT Column Actions Docs

27	boolean	false	MRT Column Ordering DnD Docs

28	boolean	false	MRT Column Filtering Docs

29	boolean	true	MRT Column Filtering Docs

30	boolean		MRT Column Ordering DnD Docs

31	boolean

32	boolean		MRT Column Resizing Docs

33	boolean		MRT Virtualization Docs

34	boolean	true	MRT Density Toggle Docs

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

36	boolean	true	MRT Expanding Sub Rows Docs

37	boolean		MRT Expanding Sub Rows Docs

38	boolean	true	TanStack Filters Docs

39	boolean	true	MRT Column Filtering Docs

40	boolean	true	TanStack Filters Docs

41	boolean	true	MRT Full Screen Toggle Docs

42	boolean	true	MRT Global Filtering Docs

43	boolean	true	MRT Global Filtering Docs

44	boolean	true	MRT Global Filtering Docs

45	boolean		MRT Aggregation and Grouping Docs

46	boolean	true	MRT Column Hiding Docs

47	boolean		TanStack Sorting Docs

48	boolean	true	MRT Row Selection Docs

49	boolean

50	boolean	true

51	boolean

52	boolean

53	boolean		Row Numbers Feature Guide

54	boolean

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

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

57	boolean		MRT Virtualization Docs

58	boolean	true

59	boolean	true

60	boolean	true

61	boolean

62	boolean

63	boolean	true

64	boolean	true

65	boolean	true

66	boolean	true

67	boolean	true

68	(dataRow: TData) => TData[]

69	Record<string, FilterFn>		TanStack Table Filters Docs

70	boolean	false	TanStack Filtering Docs

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

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

73	() => MRT_RowModel<TData>

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

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

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

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

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

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

80	() => MRT_RowModel<TData>

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

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

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

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

85	MRT_FilterOption

86	Array<MRT_FilterOption \| string> \| null

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

88	Partial<MRT_Icons>;

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

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

91	boolean	true

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

93	MRT_Localization		Localization (i18n) Guide

94	boolean		TanStack Table Expanding Docs

95	boolean		TanStack Table Filters Docs

96	boolean		TanStack Table Grouping Docs

97	boolean		TanStack Table Pagination Docs

98	boolean		TanStack Table Sorting Docs

99	number	100	TanStack Table Filtering Docs

100	number		TanStack Table Sorting Docs

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

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

103	TableMeta		TanStack Table Core Docs

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

144	OnChangeFn<ColumnFiltersState>		TanStack Table Filter Docs

145	OnChangeFn<ColumnOrderState>		TanStack Table Column Ordering Docs

146	OnChangeFn<ColumnPinningState>		TanStack Table Column Pinning Docs

147	OnChangeFn<ColumnSizingState>		TanStack Table Column Sizing Docs

148	OnChangeFn<ColumnSizingInfoState>		TanStack Table Column Sizing Docs

149	OnChangeFn<ColumnVisibilityState>		TanStack Table Column Visibility Docs

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

151	OnChangeFn<MRT_Row<TData> \| null>

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

153	OnChangeFn<MRT_DensityState>		MRT Density Toggle Docs

154	OnChangeFn<MRT_Column<TData> \| null>

155	OnChangeFn<MRT_Row<TData> \| null>

156	OnChangeFn<MRT_Cell<TData> \| null>

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

158	OnChangeFn<MRT_Row<TData> \| null>

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

160	OnChangeFn<ExpandedState>		TanStack Table Expanding Docs

161	OnChangeFn<GlobalFilterState>		TanStack Table Filters Docs

162	OnChangeFn<GlobalFilterState>		TanStack Table Filters Docs

163	OnChangeFn<GroupingState>		TanStack Table Grouping Docs

164	OnChangeFn<MRT_Column<TData> \| null>

165	OnChangeFn<MRT_Row<TData> \| null>

166	OnChangeFn<boolean>		MRT Full Screen Toggle Docs

167	OnChangeFn<PaginationState>		TanStack Table Pagination Docs

168	OnChangeFn<RowSelectionState>		TanStack Table Pinning Docs

169	OnChangeFn<RowSelectionState>		TanStack Table Row Selection Docs

170	OnChangeFn<boolean>

171	OnChangeFn<boolean>

172	OnChangeFn<boolean>

173	OnChangeFn<boolean>

174	OnChangeFn<SortingState>		TanStack Table Sorting Docs

175	number		TanStack Table Pagination Docs

176	boolean		TanStack Table Expanding Docs

177	'first' \| 'last'

178	'top' \| 'bottom' \| number	'top'

179	'first' \| 'last'	'first'

180	'left' \| 'right'	'right'

181	'bottom' \| 'top' \| 'both'	'bottom'

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

183	'bottom' \| 'top' \| 'both' \| 'none'	'top'

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

185	({ table }) => ReactNode

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

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

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

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

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

191	({ row, table }) => ReactNode

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

193	({ table }) => ReactNode

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

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

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

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

198	({ table}) => ReactNode

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

200	({ table }) => ReactNode

201	number

202	'original' \| 'static'	'original'

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

204	MutableRefObject<Virtualizer \| null>

205	Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>

206	'all' \| 'page'	'page'

207	boolean		TanStack Table Sorting Docs

208	Record<string, SortingFn>		TanStack Table Sorting Docs

209	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