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