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	{ [key: string]: MRT_ColumnDef<TData> }		MRT Display Columns Docs

18	'modal' \| 'cell' \| 'row' \| 'table'	'modal'	MRT Editing Docs

19	boolean	true	MRT Customize Toolbars Docs

20	boolean	false	MRT Click to Copy Docs

21	boolean	true	MRT Column Actions Docs

22	boolean	false	MRT Column Ordering DnD Docs

23	boolean	false	MRT Column Filtering Docs

24	boolean	true	MRT Column Filtering Docs

25	boolean		MRT Column Ordering DnD Docs

26	boolean

27	boolean		MRT Column Resizing Docs

28	boolean		MRT Virtualization Docs

29	boolean	true	MRT Density Toggle Docs

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

31	boolean	true	MRT Expanding Sub Rows Docs

32	boolean		MRT Expanding Sub Rows Docs

33	boolean	true	TanStack Filters Docs

34	boolean	true	MRT Column Filtering Docs

35	boolean	true	TanStack Filters Docs

36	boolean	true	MRT Full Screen Toggle Docs

37	boolean	true	MRT Global Filtering Docs

38	boolean	true	MRT Global Filtering Docs

39	boolean	true	MRT Global Filtering Docs

40	boolean		MRT Aggregation and Grouping Docs

41	boolean	true	MRT Column Hiding Docs

42	boolean		TanStack Sorting Docs

43	boolean	true	MRT Row Selection Docs

44	boolean

45	boolean	true

46	boolean

47	boolean

48	boolean		Row Numbers Feature Guide

49	boolean

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

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

52	boolean		MRT Virtualization Docs

53	boolean	true

54	boolean	true

55	boolean	true

56	boolean

57	boolean

58	boolean	true

59	boolean	true

60	boolean	true

61	boolean	true

62	boolean	true

63	(dataRow: TData) => TData[]

64	Record<string, FilterFn>		TanStack Table Filters Docs

65	boolean	false	TanStack Filtering Docs

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

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

68	() => MRT_RowModel<TData>

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

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

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

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

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

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

75	() => MRT_RowModel<TData>

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

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

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

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

80	MRT_FilterOption

81	Array<MRT_FilterOption \| string> \| null

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

83	Partial<MRT_Icons>;

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

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

86	boolean	true

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

88	MRT_Localization		Localization (i18n) Guide

89	boolean		TanStack Table Expanding Docs

90	boolean		TanStack Table Filters Docs

91	boolean		TanStack Table Grouping Docs

92	boolean		TanStack Table Pagination Docs

93	boolean		TanStack Table Sorting Docs

94	number	100	TanStack Table Filtering Docs

95	number		TanStack Table Sorting Docs

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

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

98	TableMeta		TanStack Table Core Docs

99	ToolbarProps \| ({ table }) => ToolbarProps		Material UI Toolbar Props

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

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

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

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

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

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

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

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

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

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

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

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

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

113	Partial<TablePaginationProps> \| ({ table }) => Partial<TablePaginationProps>		Material UI TablePagination Props

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

130	TableProps		Material UI TableProps API Docs

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

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

133	ToolbarProps \| ({ table }) => ToolbarProps		Material UI Toolbar Props

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

135	OnChangeFn<ColumnFiltersState>		TanStack Table Filter Docs

136	OnChangeFn<ColumnOrderState>		TanStack Table Column Ordering Docs

137	OnChangeFn<ColumnPinningState>		TanStack Table Column Pinning Docs

138	OnChangeFn<ColumnSizingState>		TanStack Table Column Sizing Docs

139	OnChangeFn<ColumnSizingInfoState>		TanStack Table Column Sizing Docs

140	OnChangeFn<ColumnVisibilityState>		TanStack Table Column Visibility Docs

141	OnChangeFn<MRT_DensityState>		MRT Density Toggle Docs

142	OnChangeFn<MRT_Column<TData> \| null>

143	OnChangeFn<MRT_Row<TData> \| null>

144	OnChangeFn<MRT_Cell<TData> \| null>

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

146	OnChangeFn<MRT_Row<TData> \| null>

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

148	OnChangeFn<ExpandedState>		TanStack Table Expanding Docs

149	OnChangeFn<GlobalFilterState>		TanStack Table Filters Docs

150	OnChangeFn<GlobalFilterState>		TanStack Table Filters Docs

151	OnChangeFn<GroupingState>		TanStack Table Grouping Docs

152	OnChangeFn<MRT_Column<TData> \| null>

153	OnChangeFn<MRT_Row<TData> \| null>

154	OnChangeFn<boolean>		MRT Full Screen Toggle Docs

155	OnChangeFn<PaginationState>		TanStack Table Pagination Docs

156	OnChangeFn<RowSelectionState>		TanStack Table Pinning Docs

157	OnChangeFn<RowSelectionState>		TanStack Table Row Selection Docs

158	OnChangeFn<boolean>

159	OnChangeFn<boolean>

160	OnChangeFn<boolean>

161	OnChangeFn<boolean>

162	OnChangeFn<SortingState>		TanStack Table Sorting Docs

163	number		TanStack Table Pagination Docs

164	boolean		TanStack Table Expanding Docs

165	'first' \| 'last'

166	'first' \| 'last'

167	'left' \| 'right'

168	'bottom' \| 'top' \| 'both'

169	'bottom' \| 'top' \| 'none'

170	'bottom' \| 'top' \| 'both' \| 'none'

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

172	({ table }) => ReactNode

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

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

175	({ row, table }) => ReactNode

176	({ table }) => ReactNode

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

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

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

180	({ table}) => ReactNode

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

182	({ table }) => ReactNode

183	number

184	'original' \| 'static'	'original'

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

186	MutableRefObject<Virtualizer \| null>

187	Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>

188	'all' \| 'page'	'page'

189	boolean		TanStack Table Sorting Docs

190	Record<string, SortingFn>		TanStack Table Sorting Docs

191	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      rowNumberMode="static"
189      onColumnPinningChange={setColumnPinning}
190      state={{ columnPinning }}
191    />
192  );
193};
194
195export default TableOptionsTable;
196