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
#
Prop Name
Type
Default Value
More Info Links
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
SliderProps | ({ column, table}) => SliderProps
Material UI Slider Props
115
TextFieldProps | ({ table, column, rangeFilterIndex}) => TextFieldProps
Material UI TextField Props
116
LinearProgressProps | ({ isTopToolbar, table }) => LinearProgressProps
Material UI LinearProgress Props
117
Partial<PaginationProps> | ({ table }) => Partial<PaginationProps>
Material UI TablePagination Props
118
IconButtonProps | ({ row, table }) => IconButtonProps
Material UI IconButton Props
119
TextFieldProps | ({ table }) => TextFieldProps
Material UI TextField Props
120
CheckboxProps | ({ table }) => CheckboxProps
Material UI Checkbox Props
121
CheckboxProps | ({ row, table }) => CheckboxProps
Material UI Checkbox Props
122
SkeletonProps | ({ cell, column, row, table }) => SkeletonProps
Material UI Skeleton Props
123
TableCellProps | ({ cell, column, row, table }) => TableCellProps
Material UI TableCell Props
124
TableBodyProps | ({ table }) => TableBodyProps
Material UI TableBody Props
125
TableRowProps | ({ isDetailPanel, row, table }) => TableRowProps
{ hover: true }
Material UI TableRow Props
126
TableContainerProps | ({ table }) => TableContainerProps
Material UI TableContainer Props
127
TableCellProps| ({table, column}) => TableCellProps
Material UI TableCell Props
128
TableFooterProps | ({ table }) => TableFooterProps);
Material UI TableFooter Props
129
TableRowProps | ({table, footerGroup}) => TableRowProps
Material UI TableRow Props
130
TableCellProps | ({ table, column}) => TableCellProps
Material UI TableCell Props
131
TableHeadProps | ({ table }) => TableHeadProps
Material UI TableHead Props
132
TableRowProps | ({ table, headerGroup}) => TableRowProps
Material UI TableRow Props
133
PaperProps | ({ table }} => PaperProps
Material UI Paper API Docs
134
TableProps | ({ table }} => TableProps
Material UI TableProps API Docs
135
ChipProps| ({ table }} => ChipProps
Material UI Chip Props
136
AlertProps | ({ table }) => AlertProps
Material UI Alert Props
137
BoxProps | ({ table }) => BoxProps
Material UI Box Props
138
OnChangeFn<{ [key: string]: MRT_FilterOption }>
139
OnChangeFn<ColumnFiltersState>
TanStack Table Filter Docs
140
OnChangeFn<ColumnOrderState>
TanStack Table Column Ordering Docs
141
OnChangeFn<ColumnPinningState>
TanStack Table Column Pinning Docs
142
OnChangeFn<ColumnSizingState>
TanStack Table Column Sizing Docs
143
OnChangeFn<ColumnSizingInfoState>
TanStack Table Column Sizing Docs
144
OnChangeFn<ColumnVisibilityState>
TanStack Table Column Visibility Docs
145
({ row, table }) => void
MRT Editing Docs
146
OnChangeFn<MRT_Row<TData> | null>
147
({ exitEditingMode, row, table, values}) => Promise<void> | void
MRT Editing Docs
148
OnChangeFn<MRT_DensityState>
MRT Density Toggle Docs
149
OnChangeFn<MRT_Column<TData> | null>
150
OnChangeFn<MRT_Row<TData> | null>
151
OnChangeFn<MRT_Cell<TData> | null>
152
({ row, table }) => void
MRT Editing Docs
153
OnChangeFn<MRT_Row<TData> | null>
154
({ exitEditingMode, row, table, values}) => Promise<void> | void
MRT Editing Docs
155
OnChangeFn<ExpandedState>
TanStack Table Expanding Docs
156
OnChangeFn<GlobalFilterState>
TanStack Table Filters Docs
157
OnChangeFn<GlobalFilterState>
TanStack Table Filters Docs
158
OnChangeFn<GroupingState>
TanStack Table Grouping Docs
159
OnChangeFn<MRT_Column<TData> | null>
160
OnChangeFn<MRT_Row<TData> | null>
161
OnChangeFn<boolean>
MRT Full Screen Toggle Docs
162
OnChangeFn<PaginationState>
TanStack Table Pagination Docs
163
OnChangeFn<RowSelectionState>
TanStack Table Pinning Docs
164
OnChangeFn<RowSelectionState>
TanStack Table Row Selection Docs
165
OnChangeFn<boolean>
166
OnChangeFn<boolean>
167
OnChangeFn<boolean>
168
OnChangeFn<boolean>
169
OnChangeFn<SortingState>
TanStack Table Sorting Docs
170
number
TanStack Table Pagination Docs
171
boolean
TanStack Table Expanding Docs
172
'first' | 'last'
173
'first' | 'last'
174
'left' | 'right'
175
'bottom' | 'top' | 'both'
176
'bottom' | 'top' | 'none'
177
'bottom' | 'top' | 'both' | 'none'
178
ReactNode | ({ table }) => ReactNode
179
({ table }) => ReactNode
180
({ closeMenu, column, internalColumnMenuItems, table }) => ReactNode[]
181
({ column, internalFilterOptions, onSelectFilterMode, table }) => ReactNode[]
182
({ internalEditComponents, row, table }) => ReactNode
183
({ row, table }) => ReactNode
184
({ internalEditComponents, row, table }) => ReactNode
185
({ table }) => ReactNode
186
({ internalFilterOptions, onSelectFilterMode, table }) => ReactNode[]
187
({ closeMenu, row, table }) => ReactNode[]
188
({ cell, row, table }) => ReactNode
189
({ table}) => ReactNode
190
ReactNode | ({ table }) => ReactNode
191
({ table }) => ReactNode
192
number
193
'original' | 'static'
'original'
194
'sticky' | 'top' | 'bottom' | 'top-and-bottom' | 'select-sticky' | 'select-top' | 'select-bottom'
'sticky'
195
MutableRefObject<Virtualizer | null>
196
Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>
197
'all' | 'page'
'page'
198
boolean
TanStack Table Sorting Docs
199
Record<string, SortingFn>
TanStack Table Sorting Docs
200
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