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

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