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