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 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

29	boolean		MRT Column Resizing Docs

30	boolean		MRT Virtualization Docs

31	boolean	true	MRT Density Toggle Docs

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

33	boolean	true	MRT Expanding Sub Rows Docs

34	boolean		MRT Expanding Sub Rows Docs

35	boolean	true	TanStack Filters Docs

36	boolean	true	MRT Column Filtering Docs

37	boolean	true	TanStack Filters Docs

38	boolean	true	MRT Full Screen Toggle Docs

39	boolean	true	MRT Global Filtering Docs

40	boolean	true	MRT Global Filtering Docs

41	boolean	true	MRT Global Filtering Docs

42	boolean		MRT Aggregation and Grouping Docs

43	boolean	true	MRT Column Hiding Docs

44	boolean		TanStack Sorting Docs

45	boolean	true	MRT Row Selection Docs

46	boolean

47	boolean	true

48	boolean

49	boolean

50	boolean		Row Numbers Feature Guide

51	boolean

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

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

54	boolean		MRT Virtualization Docs

55	boolean	true

56	boolean	true

57	boolean	true

58	boolean

59	boolean

60	boolean	true

61	boolean	true

62	boolean	true

63	boolean	true

64	boolean	true

65	(dataRow: TData) => TData[]

66	Record<string, FilterFn>		TanStack Table Filters Docs

67	boolean	false	TanStack Filtering Docs

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

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

70	() => MRT_RowModel<TData>

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

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

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

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

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

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

77	() => MRT_RowModel<TData>

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

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

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

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

82	MRT_FilterOption

83	Array<MRT_FilterOption \| string> \| null

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

85	Partial<MRT_Icons>;

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

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

88	boolean	true

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

90	MRT_Localization		Localization (i18n) Guide

91	boolean		TanStack Table Expanding Docs

92	boolean		TanStack Table Filters Docs

93	boolean		TanStack Table Grouping Docs

94	boolean		TanStack Table Pagination Docs

95	boolean		TanStack Table Sorting Docs

96	number	100	TanStack Table Filtering Docs

97	number		TanStack Table Sorting Docs

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

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

100	TableMeta		TanStack Table Core Docs

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

141	OnChangeFn<ColumnFiltersState>		TanStack Table Filter Docs

142	OnChangeFn<ColumnOrderState>		TanStack Table Column Ordering Docs

143	OnChangeFn<ColumnPinningState>		TanStack Table Column Pinning Docs

144	OnChangeFn<ColumnSizingState>		TanStack Table Column Sizing Docs

145	OnChangeFn<ColumnSizingInfoState>		TanStack Table Column Sizing Docs

146	OnChangeFn<ColumnVisibilityState>		TanStack Table Column Visibility Docs

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

148	OnChangeFn<MRT_Row<TData> \| null>

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

150	OnChangeFn<MRT_DensityState>		MRT Density Toggle Docs

151	OnChangeFn<MRT_Column<TData> \| null>

152	OnChangeFn<MRT_Row<TData> \| null>

153	OnChangeFn<MRT_Cell<TData> \| null>

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

155	OnChangeFn<MRT_Row<TData> \| null>

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

157	OnChangeFn<ExpandedState>		TanStack Table Expanding Docs

158	OnChangeFn<GlobalFilterState>		TanStack Table Filters Docs

159	OnChangeFn<GlobalFilterState>		TanStack Table Filters Docs

160	OnChangeFn<GroupingState>		TanStack Table Grouping Docs

161	OnChangeFn<MRT_Column<TData> \| null>

162	OnChangeFn<MRT_Row<TData> \| null>

163	OnChangeFn<boolean>		MRT Full Screen Toggle Docs

164	OnChangeFn<PaginationState>		TanStack Table Pagination Docs

165	OnChangeFn<RowSelectionState>		TanStack Table Pinning 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	'first' \| 'last'

175	'first' \| 'last'

176	'left' \| 'right'

177	'bottom' \| 'top' \| 'both'

178	'bottom' \| 'top' \| 'none'

179	'bottom' \| 'top' \| 'both' \| 'none'

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

181	({ table }) => ReactNode

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

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

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

185	({ row, table }) => ReactNode

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

187	({ table }) => ReactNode

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

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

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

191	({ table}) => ReactNode

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

193	({ table }) => ReactNode

194	number

195	'original' \| 'static'	'original'

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

197	MutableRefObject<Virtualizer \| null>

198	Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>

199	'all' \| 'page'	'page'

200	boolean		TanStack Table Sorting Docs

201	Record<string, SortingFn>		TanStack Table Sorting Docs

202	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