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	true

48	boolean		TanStack Sorting Docs

49	boolean	true	MRT Row Selection Docs

50	boolean

51	boolean	true

52	boolean

53	boolean

54	boolean		Row Numbers Feature Guide

55	boolean

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

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

58	boolean		MRT Virtualization Docs

59	boolean	true

60	boolean	true

61	boolean	true

62	boolean

63	boolean

64	boolean	true

65	boolean	true

66	boolean	true

67	boolean	true

68	boolean	true

69	(dataRow: TData) => TData[]

70	Record<string, FilterFn>		TanStack Table Filters Docs

71	boolean	false	TanStack Filtering Docs

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

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

74	() => MRT_RowModel<TData>

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

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

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

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

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

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

81	() => MRT_RowModel<TData>

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

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

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

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

86	MRT_FilterOption

87	Array<MRT_FilterOption \| string> \| null

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

89	Partial<MRT_Icons>;

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

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

92	boolean	true

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

94	MRT_Localization		Localization (i18n) Guide

95	boolean		TanStack Table Expanding Docs

96	boolean		TanStack Table Filters Docs

97	boolean		TanStack Table Grouping Docs

98	boolean		TanStack Table Pagination Docs

99	boolean		TanStack Table Sorting Docs

100	number	100	TanStack Table Filtering Docs

101	number		TanStack Table Sorting Docs

102	'cells' \| 'rows' \| 'table-body'		Memoize Components Guide

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

104	TableMeta		TanStack Table Core Docs

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

145	OnChangeFn<ColumnFiltersState>		TanStack Table Filter Docs

146	OnChangeFn<ColumnOrderState>		TanStack Table Column Ordering Docs

147	OnChangeFn<ColumnPinningState>		TanStack Table Column Pinning Docs

148	OnChangeFn<ColumnSizingState>		TanStack Table Column Sizing Docs

149	OnChangeFn<ColumnSizingInfoState>		TanStack Table Column Sizing Docs

150	OnChangeFn<ColumnVisibilityState>		TanStack Table Column Visibility Docs

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

152	OnChangeFn<MRT_Row<TData> \| null>

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

154	OnChangeFn<MRT_DensityState>		MRT Density Toggle Docs

155	OnChangeFn<MRT_Column<TData> \| null>

156	OnChangeFn<MRT_Row<TData> \| null>

157	OnChangeFn<MRT_Cell<TData> \| null>

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

159	OnChangeFn<MRT_Row<TData> \| null>

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

161	OnChangeFn<ExpandedState>		TanStack Table Expanding Docs

162	OnChangeFn<GlobalFilterState>		TanStack Table Filters Docs

163	OnChangeFn<GlobalFilterState>		TanStack Table Filters Docs

164	OnChangeFn<GroupingState>		TanStack Table Grouping Docs

165	OnChangeFn<MRT_Column<TData> \| null>

166	OnChangeFn<MRT_Row<TData> \| null>

167	OnChangeFn<boolean>		MRT Full Screen Toggle Docs

168	OnChangeFn<PaginationState>		TanStack Table Pagination Docs

169	OnChangeFn<RowSelectionState>		TanStack Table Pinning Docs

170	OnChangeFn<RowSelectionState>		TanStack Table Row Selection Docs

171	OnChangeFn<boolean>

172	OnChangeFn<boolean>

173	OnChangeFn<boolean>

174	OnChangeFn<boolean>

175	OnChangeFn<SortingState>		TanStack Table Sorting Docs

176	number		TanStack Table Pagination Docs

177	boolean		TanStack Table Expanding Docs

178	'first' \| 'last'

179	'top' \| 'bottom' \| number	'top'

180	'first' \| 'last'	'first'

181	'left' \| 'right'	'right'

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

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

184	'bottom' \| 'top' \| 'both' \| 'none'	'top'

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

186	({ table }) => ReactNode

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

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

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

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

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

192	({ row, table }) => ReactNode

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

194	({ table }) => ReactNode

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

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

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

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

199	({ table}) => ReactNode

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

201	({ table }) => ReactNode

202	number

203	'original' \| 'static'	'original'

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

205	MutableRefObject<Virtualizer \| null>

206	Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>

207	'all' \| 'page'	'page'

208	boolean		TanStack Table Sorting Docs

209	Record<string, SortingFn>		TanStack Table Sorting Docs

210	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 V3.

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

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