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
});

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

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	'onEnd' \| 'onChange'	'onChange'	MRT Column Resizing Docs

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

8	MutableRefObject<Virtualizer \| null>

9	Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>

10	Array<TData>		Usage Docs

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

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

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

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

20	boolean	true	MRT Customize Toolbars Docs

21	boolean	false	MRT Click to Copy Docs

22	boolean	true	MRT Column Actions Docs

23	boolean	false	MRT Column Ordering DnD Docs

24	boolean	false	MRT Column Filtering Docs

25	boolean	true	MRT Column Filtering Docs

26	boolean		MRT Column Ordering DnD Docs

27	boolean

28	boolean		MRT Column Resizing Docs

29	boolean		MRT Virtualization Docs

30	boolean	true	MRT Density Toggle Docs

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

32	boolean	true	MRT Expanding Sub Rows Docs

33	boolean		MRT Expanding Sub Rows Docs

34	boolean	true	TanStack Filters 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		Row Numbers Feature Guide

50	boolean

51	boolean \| (row: MRT_Row) => 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

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

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

87	boolean	true

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

89	MRT_Localization		Localization (i18n) Guide

90	boolean		TanStack Table Expanding Docs

91	boolean		TanStack Table Filters Docs

92	boolean		TanStack Table Grouping Docs

93	boolean		TanStack Table Pagination Docs

94	boolean		TanStack Table Sorting Docs

95	number	100	TanStack Table Filtering Docs

96	number		TanStack Table Sorting Docs

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

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

99	TableMeta		TanStack Table Core Docs

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

138	OnChangeFn<ColumnFiltersState>		TanStack Table Filter Docs

139	OnChangeFn<ColumnOrderState>		TanStack Table Column Ordering Docs

140	OnChangeFn<ColumnPinningState>		TanStack Table Column Pinning Docs

141	OnChangeFn<ColumnSizingState>		TanStack Table Column Sizing Docs

142	OnChangeFn<ColumnSizingInfoState>		TanStack Table Column Sizing Docs

143	OnChangeFn<ColumnVisibilityState>		TanStack Table Column Visibility Docs

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

145	OnChangeFn<MRT_Row<TData> \| null>

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

147	OnChangeFn<MRT_DensityState>		MRT Density Toggle Docs

148	OnChangeFn<MRT_Column<TData> \| null>

149	OnChangeFn<MRT_Row<TData> \| null>

150	OnChangeFn<MRT_Cell<TData> \| null>

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<ExpandedState>		TanStack Table Expanding Docs

155	OnChangeFn<GlobalFilterState>		TanStack Table Filters Docs

156	OnChangeFn<GlobalFilterState>		TanStack Table Filters Docs

157	OnChangeFn<GroupingState>		TanStack Table Grouping Docs

158	OnChangeFn<MRT_Column<TData> \| null>

159	OnChangeFn<MRT_Row<TData> \| null>

160	OnChangeFn<boolean>		MRT Full Screen Toggle Docs

161	OnChangeFn<PaginationState>		TanStack Table Pagination Docs

162	OnChangeFn<RowSelectionState>		TanStack Table Pinning Docs

163	OnChangeFn<RowSelectionState>		TanStack Table Row Selection Docs

164	OnChangeFn<boolean>

165	OnChangeFn<boolean>

166	OnChangeFn<boolean>

167	OnChangeFn<boolean>

168	OnChangeFn<SortingState>		TanStack Table Sorting Docs

169	number		TanStack Table Pagination Docs

170	boolean		TanStack Table Expanding Docs

171	'first' \| 'last'

172	'first' \| 'last'

173	'left' \| 'right'

174	'bottom' \| 'top' \| 'both'

175	'bottom' \| 'top' \| 'none'

176	'bottom' \| 'top' \| 'both' \| 'none'

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

178	({ table }) => ReactNode

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

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

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

182	({ row, table }) => ReactNode

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

184	({ table }) => ReactNode

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

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

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

188	({ table}) => ReactNode

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

190	({ table }) => ReactNode

191	number

192	'original' \| 'static'	'original'

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

194	MutableRefObject<Virtualizer \| null>

195	Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>

196	'all' \| 'page'	'page'

197	boolean		TanStack Table Sorting Docs

198	Record<string, SortingFn>		TanStack Table Sorting Docs

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

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

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