MRT logoMaterial React Table

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
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 Row Selection Docs
22
boolean
true
MRT Customize Toolbars Docs
23
((cell: MRT_Cell<TData>) => boolean) | boolean
24
boolean | 'context-menu' | ((cell: MRT_Cell<TData>) => 'context-menu' | boolean)
false
MRT Click to Copy Docs
25
boolean
true
MRT Column Actions Docs
26
boolean
false
MRT Column Ordering DnD Docs
27
boolean
false
MRT Column Filtering Docs
28
boolean
true
MRT Column Filtering Docs
29
boolean
MRT Column Ordering DnD Docs
30
boolean
31
boolean
MRT Column Resizing Docs
32
boolean
MRT Virtualization Docs
33
boolean
true
MRT Density Toggle Docs
34
boolean | (row: MRT_Row) => boolean
MRT Editing Docs
35
boolean
true
MRT Expanding Sub Rows Docs
36
boolean
MRT Expanding Sub Rows Docs
37
boolean
true
TanStack Filters Docs
38
boolean
true
MRT Column Filtering Docs
39
boolean
true
TanStack Filters Docs
40
boolean
true
MRT Full Screen Toggle Docs
41
boolean
true
MRT Global Filtering Docs
42
boolean
true
MRT Global Filtering Docs
43
boolean
true
MRT Global Filtering Docs
44
boolean
MRT Aggregation and Grouping Docs
45
boolean
true
MRT Column Hiding Docs
46
boolean
TanStack Sorting Docs
47
boolean
true
MRT Row Selection Docs
48
boolean
49
boolean
true
50
boolean
51
boolean
52
boolean
Row Numbers Feature Guide
53
boolean
54
boolean | (row: MRT_Row) => boolean
55
boolean | (row: MRT_Row) => boolean
MRT Row Selection Docs
56
boolean
MRT Virtualization Docs
57
boolean
true
58
boolean
true
59
boolean
true
60
boolean
61
boolean
62
boolean
true
63
boolean
true
64
boolean
true
65
boolean
true
66
boolean
true
67
(dataRow: TData) => TData[]
68
Record<string, FilterFn>
TanStack Table Filters Docs
69
boolean
false
TanStack Filtering Docs
70
(column: Column<TData, unknown>) => boolean
71
(table: Table<TData>) => () => RowModel<TData>
TanStack Table Core Table Docs
72
() => MRT_RowModel<TData>
73
() => Map<any, number>
TanStack Table Filters Docs
74
() => RowModel<TData>
TanStack Table Filters Docs
75
() => Map<any, number>
TanStack Table Filters Docs
76
() => RowModel<TData>
TanStack Table Filters Docs
77
(table: Table<TData>) => () => RowModel<TData>
TanStack Table Grouping Docs
78
(row: Row<TData>) => boolean
TanStack Table Expanding Docs
79
() => MRT_RowModel<TData>
80
(row: Row<TData>) => boolean
TanStack Table Expanding Docs
81
(originalRow: TData, index: number, parent?: MRT_Row<TData>) => string
TanStack Table Core Table Docs
82
(table: Table<TData>) => () => RowModel<TData>
TanStack Table Sorting Docs
83
(originalRow: TData, index: number) => undefined | TData[]
TanStack Table Core Table Docs
84
MRT_FilterOption
85
Array<MRT_FilterOption | string> | null
86
false | 'reorder' | 'remove'
reorder
TanStack Table Grouping Docs
87
Partial<MRT_Icons>;
88
Partial<MRT_TableState<TData>>
Table State Management Guide
89
(e: unknown) => boolean
TanStack Table Sorting Docs
90
boolean
true
91
'semantic' | 'grid' | 'grid-no-grow'
'semantic' //(changes based on other enabled features)
TODO
92
MRT_Localization
Localization (i18n) Guide
93
boolean
TanStack Table Expanding Docs
94
boolean
TanStack Table Filters Docs
95
boolean
TanStack Table Grouping Docs
96
boolean
TanStack Table Pagination Docs
97
boolean
TanStack Table Sorting Docs
98
number
100
TanStack Table Filtering Docs
99
number
TanStack Table Sorting Docs
100
'cell' | 'row' | 'table-body'
Memoize Components Guide
101
<T>(defaultOptions: T, options: Partial<T>) => T
TanStack Table Core Docs
102
TableMeta
TanStack Table Core Docs
103
BoxProps | ({ table }) => BoxProps
Material UI Box Props
104
CircularProgressProps | ({ table }) => CircularProgressProps
Material UI CircularProgress Props
105
IconButtonProps | (({table, column}) => IconButtonProps);
Material UI IconButton Props
106
IconButtonProps | ({table, column}) => IconButtonProps
Material UI IconButton Props
107
ButtonProps | ({ cell, column, row, table }) => ButtonProps
Material UI Button Props
108
TableCellProps | ({ row, table }) => TableCellProps
Material UI TableCell Props
109
IconButtonProps | ({ table }) => IconButtonProps
Material UI Dialog Props
110
TextFieldProps | ({ cell, column, row, table }) => TextFieldProps
Material UI TextField Props
111
IconButtonProps | ({ table }) => IconButtonProps
Material UI IconButton Props
112
IconButtonProps | ({ row, table }) => IconButtonProps
Material UI IconButton Props
113
AutocompleteProps | ({ column, rangeFilterIndex, table }) => AutocompleteProps
Material UI Autocomplete Props
114
CheckboxProps | ({ column, table}) => CheckboxProps
Material UI Checkbox Props
115
DatePickerProps | ({ column, rangeFilterIndex, table }) => DatePickerProps
MUI X DatePicker Props
116
DateTimePickerProps | ({ column, rangeFilterIndex, table }) => DateTimePickerProps
MUI X DateTimePicker Props
117
SliderProps | ({ column, table}) => SliderProps
Material UI Slider Props
118
TextFieldProps | ({ table, column, rangeFilterIndex}) => TextFieldProps
Material UI TextField Props
119
TimePickerProps | ({ column, rangeFilterIndex, table }) => TimePickerProps
MUI X TimePicker Props
120
LinearProgressProps | ({ isTopToolbar, table }) => LinearProgressProps
Material UI LinearProgress Props
121
Partial<PaginationProps> | ({ table }) => Partial<PaginationProps>
Material UI TablePagination Props
122
IconButtonProps | ({ row, table }) => IconButtonProps
Material UI IconButton Props
123
TextFieldProps | ({ table }) => TextFieldProps
Material UI TextField Props
124
CheckboxProps | ({ table }) => CheckboxProps
Material UI Checkbox Props
125
CheckboxProps | ({ row, table }) => CheckboxProps
Material UI Checkbox Props
126
SkeletonProps | ({ cell, column, row, table }) => SkeletonProps
Material UI Skeleton Props
127
TableCellProps | ({ cell, column, row, table }) => TableCellProps
Material UI TableCell Props
128
TableBodyProps | ({ table }) => TableBodyProps
Material UI TableBody Props
129
TableRowProps | ({ isDetailPanel, row, table }) => TableRowProps
{ hover: true }
Material UI TableRow Props
130
TableContainerProps | ({ table }) => TableContainerProps
Material UI TableContainer Props
131
TableCellProps| ({table, column}) => TableCellProps
Material UI TableCell Props
132
TableFooterProps | ({ table }) => TableFooterProps);
Material UI TableFooter Props
133
TableRowProps | ({table, footerGroup}) => TableRowProps
Material UI TableRow Props
134
TableCellProps | ({ table, column}) => TableCellProps
Material UI TableCell Props
135
TableHeadProps | ({ table }) => TableHeadProps
Material UI TableHead Props
136
TableRowProps | ({ table, headerGroup}) => TableRowProps
Material UI TableRow Props
137
PaperProps | ({ table }} => PaperProps
Material UI Paper API Docs
138
TableProps | ({ table }} => TableProps
Material UI TableProps API Docs
139
ChipProps| ({ table }} => ChipProps
Material UI Chip Props
140
AlertProps | ({ table }) => AlertProps
Material UI Alert Props
141
BoxProps | ({ table }) => BoxProps
Material UI Box Props
142
OnChangeFn<{ [key: string]: MRT_FilterOption }>
143
OnChangeFn<ColumnFiltersState>
TanStack Table Filter Docs
144
OnChangeFn<ColumnOrderState>
TanStack Table Column Ordering Docs
145
OnChangeFn<ColumnPinningState>
TanStack Table Column Pinning Docs
146
OnChangeFn<ColumnSizingState>
TanStack Table Column Sizing Docs
147
OnChangeFn<ColumnSizingInfoState>
TanStack Table Column Sizing Docs
148
OnChangeFn<ColumnVisibilityState>
TanStack Table Column Visibility Docs
149
({ row, table }) => void
MRT Editing Docs
150
OnChangeFn<MRT_Row<TData> | null>
151
({ exitEditingMode, row, table, values}) => Promise<void> | void
MRT Editing Docs
152
OnChangeFn<MRT_DensityState>
MRT Density Toggle Docs
153
OnChangeFn<MRT_Column<TData> | null>
154
OnChangeFn<MRT_Row<TData> | null>
155
OnChangeFn<MRT_Cell<TData> | null>
156
({ row, table }) => void
MRT Editing Docs
157
OnChangeFn<MRT_Row<TData> | null>
158
({ exitEditingMode, row, table, values}) => Promise<void> | void
MRT Editing Docs
159
OnChangeFn<ExpandedState>
TanStack Table Expanding Docs
160
OnChangeFn<GlobalFilterState>
TanStack Table Filters Docs
161
OnChangeFn<GlobalFilterState>
TanStack Table Filters Docs
162
OnChangeFn<GroupingState>
TanStack Table Grouping Docs
163
OnChangeFn<MRT_Column<TData> | null>
164
OnChangeFn<MRT_Row<TData> | null>
165
OnChangeFn<boolean>
MRT Full Screen Toggle Docs
166
OnChangeFn<PaginationState>
TanStack Table Pagination Docs
167
OnChangeFn<RowSelectionState>
TanStack Table Pinning Docs
168
OnChangeFn<RowSelectionState>
TanStack Table Row Selection Docs
169
OnChangeFn<boolean>
170
OnChangeFn<boolean>
171
OnChangeFn<boolean>
172
OnChangeFn<boolean>
173
OnChangeFn<SortingState>
TanStack Table Sorting Docs
174
number
TanStack Table Pagination Docs
175
boolean
TanStack Table Expanding Docs
176
'first' | 'last'
177
'top' | 'bottom' | number
'top'
178
'first' | 'last'
'first'
179
'left' | 'right'
'right'
180
'bottom' | 'top' | 'both'
'bottom'
181
'bottom' | 'top' | 'none'
'top'
182
'bottom' | 'top' | 'both' | 'none'
'top'
183
ReactNode | ({ table }) => ReactNode
184
({ table }) => ReactNode
185
ReactNode | ({ table }) => ReactNode
186
{ cell, closeMenu, column, internalMenuItems, row, staticColumnIndex, staticRowIndex, table }) => ReactNode[]
187
({ closeMenu, column, internalColumnMenuItems, table }) => ReactNode[]
188
({ column, internalFilterOptions, onSelectFilterMode, table }) => ReactNode[]
189
({ internalEditComponents, row, table }) => ReactNode
190
({ row, table }) => ReactNode
191
({ internalEditComponents, row, table }) => ReactNode
192
({ table }) => ReactNode
193
({ internalFilterOptions, onSelectFilterMode, table }) => ReactNode[]
194
({ closeMenu, row, table }) => ReactNode[]
195
({ cell, row, table }) => ReactNode
196
({ table}) => ReactNode
197
ReactNode | ({ table }) => ReactNode
198
({ table }) => ReactNode
199
number
200
'original' | 'static'
'original'
201
'sticky' | 'top' | 'bottom' | 'top-and-bottom' | 'select-sticky' | 'select-top' | 'select-bottom'
'sticky'
202
MutableRefObject<Virtualizer | null>
203
Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>
204
'all' | 'page'
'page'
205
boolean
TanStack Table Sorting Docs
206
Record<string, SortingFn>
TanStack Table Sorting Docs
207
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