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
});
//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} />;
1
Array<MRT_ColumnDef<TData>>
MRT Column Options API Reference
2
Array<TData>
Usage Docs
3
Record<string, AggregationFn>
TanStack Table Grouping Docs
4
boolean
TanStack Table Core Table Docs
5
boolean
TanStack Table Expanding Docs
6
boolean
TanStack Table Pagination Docs
7
Array<MRT_FilterOption | string> | null
MRT Column Filtering Docs
8
'onEnd' | 'onChange'
'onChange'
MRT Column Resizing Docs
9
MutableRefObject<Virtualizer | null>
10
Partial<VirtualizerOptions<HTMLDivElement, HTMLTableCellElement>>
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'
'semantic'
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
CheckboxProps | ({ column, table}) => CheckboxProps
Material UI Checkbox Props
108
SliderProps | ({ column, table}) => SliderProps
Material UI Slider Props
109
TextFieldProps | ({ table, column, rangeFilterIndex}) => TextFieldProps
Material UI TextField Props
110
LinearProgressProps | ({ isTopToolbar, table }) => LinearProgressProps
Material UI LinearProgress Props
111
IconButtonProps | ({ row, table }) => IconButtonProps
Material UI IconButton Props
112
TextFieldProps | ({ table }) => TextFieldProps
Material UI TextField Props
113
CheckboxProps | ({ table }) => CheckboxProps
Material UI Checkbox Props
114
CheckboxProps | ({ row, table }) => CheckboxProps
Material UI Checkbox Props
115
SkeletonProps | ({ cell, column, row, table }) => SkeletonProps
Material UI Skeleton Props
116
TableCellProps | ({ cell, column, row, table }) => TableCellProps
Material UI TableCell Props
117
TableBodyProps | ({ table }) => TableBodyProps
Material UI TableBody Props
118
TableRowProps | ({ isDetailPanel, row, table }) => TableRowProps
{ hover: true }
Material UI TableRow Props
119
TableContainerProps | ({ table }) => TableContainerProps
Material UI TableContainer Props
120
TableCellProps| ({table, column}) => TableCellProps
Material UI TableCell Props
121
TableFooterProps | ({ table }) => TableFooterProps);
Material UI TableFooter Props
122
TableRowProps | ({table, footerGroup}) => TableRowProps
Material UI TableRow Props
123
TableCellProps | ({ table, column}) => TableCellProps
Material UI TableCell Props
124
TableHeadProps | ({ table }) => TableHeadProps
Material UI TableHead Props
125
TableRowProps | ({ table, headerGroup}) => TableRowProps
Material UI TableRow Props
126
Partial<TablePaginationProps> | ({ table }) => Partial<TablePaginationProps>
Material UI TablePagination Props
127
PaperProps | ({ table }} => PaperProps
Material UI Paper API Docs
128
TableProps
Material UI TableProps API Docs
129
ChipProps| ({ table }} => ChipProps
Material UI Chip Props
130
AlertProps | ({ table }) => AlertProps
Material UI Alert Props
131
ToolbarProps | ({ table }) => ToolbarProps
Material UI Toolbar Props
132
OnChangeFn<{ [key: string]: MRT_FilterOption }>
133
OnChangeFn<ColumnFiltersState>
TanStack Table Filter Docs
134
OnChangeFn<ColumnOrderState>
TanStack Table Column Ordering Docs
135
OnChangeFn<ColumnPinningState>
TanStack Table Column Pinning Docs
136
OnChangeFn<ColumnSizingState>
TanStack Table Column Sizing Docs
137
OnChangeFn<ColumnSizingInfoState>
TanStack Table Column Sizing Docs
138
OnChangeFn<ColumnVisibilityState>
TanStack Table Column Visibility Docs
139
OnChangeFn<MRT_DensityState>
MRT Density Toggle Docs
140
OnChangeFn<MRT_Column<TData> | null>
141
OnChangeFn<MRT_Row<TData> | null>
142
OnChangeFn<MRT_Cell<TData> | null>
143
({ row, table }) => void
MRT Editing Docs
144
OnChangeFn<MRT_Row<TData> | null>
145
({ exitEditingMode, row, table, values}) => Promise<void> | void
MRT Editing Docs
146
OnChangeFn<ExpandedState>
TanStack Table Expanding Docs
147
OnChangeFn<GlobalFilterState>
TanStack Table Filters Docs
148
OnChangeFn<GlobalFilterState>
TanStack Table Filters Docs
149
OnChangeFn<GroupingState>
TanStack Table Grouping Docs
150
OnChangeFn<MRT_Column<TData> | null>
151
OnChangeFn<MRT_Row<TData> | null>
152
OnChangeFn<boolean>
MRT Full Screen Toggle Docs
153
OnChangeFn<PaginationState>
TanStack Table Pagination Docs
154
OnChangeFn<RowSelectionState>
TanStack Table Pinning Docs
155
OnChangeFn<RowSelectionState>
TanStack Table Row Selection Docs
156
OnChangeFn<boolean>
157
OnChangeFn<boolean>
158
OnChangeFn<boolean>
159
OnChangeFn<boolean>
160
OnChangeFn<SortingState>
TanStack Table Sorting Docs
161
number
TanStack Table Pagination Docs
162
boolean
TanStack Table Expanding Docs
163
'first' | 'last'
164
'first' | 'last'
165
'left' | 'right'
166
'bottom' | 'top' | 'both'
167
'bottom' | 'top' | 'none'
168
'bottom' | 'top' | 'both' | 'none'
169
ReactNode | ({ table }) => ReactNode
170
({ table }) => ReactNode
171
({ closeMenu, column, internalColumnMenuItems, table }) => ReactNode[]
172
({ column, internalFilterOptions, onSelectFilterMode, table }) => ReactNode[]
173
({ row, table }) => ReactNode
174
({ table }) => ReactNode
175
({ internalFilterOptions, onSelectFilterMode, table }) => ReactNode[]
176
({ closeMenu, row, table }) => ReactNode[]
177
({ cell, row, table }) => ReactNode
178
({ table}) => ReactNode
179
ReactNode | ({ table }) => ReactNode
180
({ table }) => ReactNode
181
number
182
'original' | 'static'
'original'
183
'sticky' | 'top' | 'bottom' | 'top-and-bottom' | 'select-sticky' | 'select-top' | 'select-bottom'
'sticky'
184
MutableRefObject<Virtualizer | null>
185
Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>
186
'all' | 'page'
'page'
187
boolean
TanStack Table Sorting Docs
188
Record<string, SortingFn>
TanStack Table Sorting Docs
189
Partial<MRT_TableState<TData>>
Table State Management Guide

Wanna see the source code for this table? Check it out down below!


Source Code

1import React, { 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: 'Required',
66 accessorKey: 'required',
67 enableGlobalFilter: false,
68 },
69 {
70 header: 'Default Value',
71 accessorKey: 'defaultValue',
72 enableGlobalFilter: false,
73 Cell: ({ cell }) => (
74 <SampleCodeSnippet
75 className="language-js"
76 enableCopyButton={false}
77 style={{
78 backgroundColor: 'transparent',
79 fontSize: '0.9rem',
80 margin: 0,
81 padding: 0,
82 minHeight: 'unset',
83 }}
84 >
85 {cell.getValue<string>()}
86 </SampleCodeSnippet>
87 ),
88 },
89 {
90 header: 'Description',
91 accessorKey: 'description',
92 enableGlobalFilter: false,
93 },
94 {
95 header: 'More Info Links',
96 accessorKey: 'link',
97 disableFilters: true,
98 enableGlobalFilter: false,
99 Cell: ({ cell, row }) => (
100 <Link href={cell.getValue<string>()} passHref legacyBehavior>
101 <MuiLink
102 color={
103 row.original.source === 'MRT'
104 ? 'text.primary'
105 : row.original.source === 'Material UI'
106 ? 'primary.main'
107 : row.original.source === 'TanStack Table'
108 ? 'secondary.main'
109 : undefined
110 }
111 target={
112 cell.getValue<string>().startsWith('http')
113 ? '_blank'
114 : undefined
115 }
116 rel="noopener"
117 >
118 {row.original?.linkText}
119 </MuiLink>
120 </Link>
121 ),
122 },
123 ],
124 [theme],
125 );
126
127 const [columnPinning, setColumnPinning] = useState({});
128
129 useEffect(() => {
130 if (typeof window !== 'undefined') {
131 if (isDesktop) {
132 setColumnPinning({
133 left: ['mrt-row-expand', 'mrt-row-numbers', 'tableOption'],
134 right: ['link'],
135 });
136 } else {
137 setColumnPinning({});
138 }
139 }
140 }, [isDesktop]);
141
142 const data = useMemo(() => {
143 if (onlyOptions) {
144 return tableOptions.filter(({ tableOption }) =>
145 onlyOptions.has(tableOption),
146 );
147 }
148 return tableOptions;
149 }, [onlyOptions]);
150
151 return (
152 <MaterialReactTable
153 columns={columns}
154 data={data}
155 displayColumnDefOptions={{
156 'mrt-row-numbers': {
157 size: 10,
158 },
159 'mrt-row-expand': {
160 size: 10,
161 },
162 }}
163 enableColumnActions={!onlyOptions}
164 enableColumnFilterModes
165 enablePagination={false}
166 enableColumnPinning
167 enableRowNumbers
168 enableBottomToolbar={false}
169 enableTopToolbar={!onlyOptions}
170 initialState={{
171 columnVisibility: { required: false, description: false },
172 density: 'compact',
173 showGlobalFilter: true,
174 sorting: [
175 { id: 'required', desc: true },
176 { id: 'tableOption', desc: false },
177 ],
178 }}
179 muiSearchTextFieldProps={{
180 placeholder: 'Search All Props',
181 sx: { minWidth: '18rem' },
182 variant: 'outlined',
183 }}
184 muiTablePaperProps={{
185 sx: { mb: '1.5rem' },
186 id: onlyOptions ? 'relevant-props-table' : 'props-table',
187 }}
188 positionGlobalFilter="left"
189 renderDetailPanel={({ row }) => (
190 <Typography
191 color={row.original.description ? 'secondary.main' : 'text.secondary'}
192 >
193 {row.original.description || 'No Description Provided... Yet...'}
194 </Typography>
195 )}
196 rowNumberMode="static"
197 onColumnPinningChange={setColumnPinning}
198 state={{ columnPinning }}
199 />
200 );
201};
202
203export default TableOptionsTable;
204