MRT logoMaterial React Table

Props

Many of the props you can pass to <MaterialReactTable /> are the same as the ones you can pass to the TanStack Table useReactTable hook.

Here is a list of all the props you can pass to the root <MaterialReactTable />.

<MaterialReactTable
//all the props you can pass here
/>
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
MRT Column Resizing Docs
27
boolean
MRT Virtualization Docs
28
boolean
true
MRT Density Toggle Docs
29
boolean | (row: MRT_Row) => boolean
MRT Editing Docs
30
boolean
true
MRT Expanding Sub Rows Docs
31
boolean
MRT Expanding Sub Rows Docs
32
boolean
true
MRT Column Filtering Docs
33
boolean
true
TanStack Filters Docs
34
boolean
true
MRT Full Screen Toggle Docs
35
boolean
true
MRT Global Filtering Docs
36
boolean
true
MRT Global Filtering Docs
37
boolean
true
MRT Global Filtering Docs
38
boolean
MRT Aggregation and Grouping Docs
39
boolean
true
MRT Column Hiding Docs
40
boolean
TanStack Sorting Docs
41
boolean
true
MRT Row Selection Docs
42
boolean
43
boolean
true
44
boolean
45
boolean
46
boolean
47
boolean
Row Numbers Feature Guide
48
boolean
49
boolean | (row: MRT_Row) => boolean
50
boolean
MRT Virtualization Docs
51
boolean
true
52
boolean
true
53
boolean
true
54
boolean
55
boolean
56
boolean
true
57
boolean
true
58
boolean
true
59
boolean
true
60
boolean
true
61
(dataRow: TData) => TData[]
62
Record<string, FilterFn>
TanStack Table Filters Docs
63
boolean
false
TanStack Filtering Docs
64
(column: Column<TData, unknown>) => boolean
65
(table: Table<TData>) => () => RowModel<TData>
TanStack Table Core Table Docs
66
() => MRT_RowModel<TData>
67
() => Map<any, number>
TanStack Table Filters Docs
68
() => RowModel<TData>
TanStack Table Filters Docs
69
() => Map<any, number>
TanStack Table Filters Docs
70
() => RowModel<TData>
TanStack Table Filters Docs
71
(table: Table<TData>) => () => RowModel<TData>
TanStack Table Grouping Docs
72
(row: Row<TData>) => boolean
TanStack Table Expanding Docs
73
() => MRT_RowModel<TData>
74
(row: Row<TData>) => boolean
TanStack Table Expanding Docs
75
(originalRow: TData, index: number, parent?: MRT_Row<TData>) => string
TanStack Table Core Table Docs
76
(table: Table<TData>) => () => RowModel<TData>
TanStack Table Sorting Docs
77
(originalRow: TData, index: number) => undefined | TData[]
TanStack Table Core Table Docs
78
MRT_FilterOption
79
Array<MRT_FilterOption | string> | null
80
false | 'reorder' | 'remove'
reorder
TanStack Table Grouping Docs
81
Partial<MRT_Icons>;
82
Partial<MRT_TableState<TData>>
Table State Management Guide
83
(e: unknown) => boolean
TanStack Table Sorting Docs
84
'semantic' | 'grid'
'semantic'
TODO
85
MRT_Localization
Localization (i18n) Guide
86
boolean
TanStack Table Expanding Docs
87
boolean
TanStack Table Filters Docs
88
boolean
TanStack Table Grouping Docs
89
boolean
TanStack Table Pagination Docs
90
boolean
TanStack Table Sorting Docs
91
number
100
TanStack Table Filtering Docs
92
number
TanStack Table Sorting Docs
93
'cell' | 'row' | 'table-body'
Memoize Components Guide
94
<T>(defaultOptions: T, options: Partial<T>) => T
TanStack Table Core Docs
95
TableMeta
TanStack Table Core Docs
96
ToolbarProps | ({ table }) => ToolbarProps
Material UI Toolbar Props
97
IconButtonProps | ({ table }) => IconButtonProps
Material UI IconButton Props
98
IconButtonProps | ({ row, table }) => IconButtonProps
Material UI IconButton Props
99
LinearProgressProps | ({ isTopToolbar, table }) => LinearProgressProps
Material UI LinearProgress Props
100
TextFieldProps | ({ table }) => TextFieldProps
Material UI TextField Props
101
CheckboxProps | ({ table }) => CheckboxProps
Material UI Checkbox Props
102
CheckboxProps | ({ row, table }) => CheckboxProps
Material UI Checkbox Props
103
ButtonProps | ({ cell, column, row, table }) => ButtonProps
Material UI Button Props
104
TextFieldProps | ({ cell, column, row, table }) => TextFieldProps
Material UI TextField Props
105
TableCellProps | ({ cell, column, row, table }) => TableCellProps
Material UI TableCell Props
106
SkeletonProps | ({ cell, column, row, table }) => SkeletonProps
Material UI Skeleton Props
107
TableBodyProps | ({ table }) => TableBodyProps
Material UI TableBody Props
108
IconButtonProps | ({ row, table }) => IconButtonProps
Material UI IconButton Props
109
TableRowProps | ({ isDetailPanel, row, table }) => TableRowProps
{ hover: true }
Material UI TableRow Props
110
TableContainerProps | ({ table }) => TableContainerProps
Material UI TableContainer Props
111
TableCellProps | ({ row, table }) => TableCellProps
Material UI TableCell Props
112
TableCellProps| ({table, column}) => TableCellProps
Material UI TableCell Props
113
TableFooterProps | ({ table }) => TableFooterProps);
Material UI TableFooter Props
114
TableRowProps | ({table, footerGroup}) => TableRowProps
Material UI TableRow Props
115
IconButtonProps | (({table, column}) => IconButtonProps);
Material UI IconButton Props
116
IconButtonProps | ({table, column}) => IconButtonProps
Material UI IconButton Props
117
CheckboxProps | ({ column, table}) => CheckboxProps
Material UI Checkbox Props
118
TextFieldProps | ({ table, column, rangeFilterIndex}) => TextFieldProps
Material UI TextField Props
119
TableCellProps | ({ table, column}) => TableCellProps
Material UI TableCell Props
120
TableHeadProps | ({ table }) => TableHeadProps
Material UI TableHead Props
121
TableRowProps | ({ table, headerGroup}) => TableRowProps
Material UI TableRow Props
122
Partial<TablePaginationProps> | ({ table }) => Partial<TablePaginationProps>
Material UI TablePagination Props
123
PaperProps | ({ table }} => PaperProps
Material UI Paper API Docs
124
TableProps
Material UI TableProps API Docs
125
ChipProps| ({ table }} => ChipProps
Material UI Chip Props
126
AlertProps | ({ table }) => AlertProps
Material UI Alert Props
127
ToolbarProps | ({ table }) => ToolbarProps
Material UI Toolbar Props
128
OnChangeFn<{ [key: string]: MRT_FilterOption }>
129
OnChangeFn<ColumnFiltersState>
TanStack Table Filter Docs
130
OnChangeFn<ColumnOrderState>
TanStack Table Column Ordering Docs
131
OnChangeFn<ColumnPinningState>
TanStack Table Column Pinning Docs
132
OnChangeFn<ColumnSizingState>
TanStack Table Column Sizing Docs
133
OnChangeFn<ColumnSizingInfoState>
TanStack Table Column Sizing Docs
134
OnChangeFn<ColumnVisibilityState>
TanStack Table Column Visibility Docs
135
OnChangeFn<MRT_DensityState>
MRT Density Toggle Docs
136
OnChangeFn<MRT_Column<TData> | null>
137
OnChangeFn<MRT_Row<TData> | null>
138
OnChangeFn<MRT_Cell<TData> | null>
139
({ row, table }) => void
MRT Editing Docs
140
OnChangeFn<MRT_Row<TData> | null>
141
({ exitEditingMode, row, table, values}) => Promise<void> | void
MRT Editing Docs
142
OnChangeFn<ExpandedState>
TanStack Table Expanding Docs
143
OnChangeFn<GlobalFilterState>
TanStack Table Filters Docs
144
OnChangeFn<GlobalFilterState>
TanStack Table Filters Docs
145
OnChangeFn<GroupingState>
TanStack Table Grouping Docs
146
OnChangeFn<MRT_Column<TData> | null>
147
OnChangeFn<MRT_Row<TData> | null>
148
OnChangeFn<boolean>
MRT Full Screen Toggle Docs
149
OnChangeFn<PaginationState>
TanStack Table Pagination Docs
150
OnChangeFn<RowSelectionState>
TanStack Table Row Selection Docs
151
OnChangeFn<boolean>
152
OnChangeFn<boolean>
153
OnChangeFn<boolean>
154
OnChangeFn<boolean>
155
OnChangeFn<SortingState>
TanStack Table Sorting Docs
156
number
TanStack Table Pagination Docs
157
boolean
TanStack Table Expanding Docs
158
'first' | 'last'
159
'first' | 'last'
160
'left' | 'right'
161
'bottom' | 'top' | 'both'
162
'bottom' | 'top' | 'none'
163
'bottom' | 'top' | 'both' | 'none'
164
ReactNode | ({ table }) => ReactNode
165
({ table }) => ReactNode
166
({ closeMenu, column, table }) => ReactNode[]
167
({ column, internalFilterOptions, onSelectFilterMode, table }) => ReactNode[]
168
({ row, table }) => ReactNode
169
({ table }) => ReactNode
170
({ internalFilterOptions, onSelectFilterMode, table }) => ReactNode[]
171
({ closeMenu, row, table }) => ReactNode[]
172
({ cell, row, table }) => ReactNode
173
({ table}) => ReactNode
174
ReactNode | ({ table }) => ReactNode
175
({ table }) => ReactNode
176
number
177
'original' | 'static'
'original'
178
MutableRefObject<Virtualizer | null>
179
Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>
180
'all' | 'page'
'page'
181
boolean
TanStack Table Sorting Docs
182
Record<string, SortingFn>
TanStack Table Sorting Docs
183
Partial<MRT_TableState<TData>>
Table State Management Guide
184
Array<MRT_CreateTableFeature<TData>>
185
MutableRefObject<MRT_TableInstance<TData> | null>

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 MaterialReactTableProps,
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 PropRow, rootProps } from './rootProps';
16
17interface Props {
18 onlyProps?: Set<keyof MaterialReactTableProps>;
19}
20
21const RootPropTable = ({ onlyProps }: Props) => {
22 const theme = useTheme();
23 const isDesktop = useMediaQuery('(min-width: 1200px)');
24
25 const columns = useMemo<MRT_ColumnDef<PropRow>[]>(
26 () => [
27 {
28 enableClickToCopy: true,
29 header: 'Prop Name',
30 accessorKey: 'propName',
31 muiTableBodyCellCopyButtonProps: ({ 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', 'propName'],
134 right: ['link'],
135 });
136 } else {
137 setColumnPinning({});
138 }
139 }
140 }, [isDesktop]);
141
142 const data = useMemo(() => {
143 if (onlyProps) {
144 return rootProps.filter(({ propName }) => onlyProps.has(propName));
145 }
146 return rootProps;
147 }, [onlyProps]);
148
149 return (
150 <MaterialReactTable
151 columns={columns}
152 data={data}
153 displayColumnDefOptions={{
154 'mrt-row-numbers': {
155 size: 10,
156 },
157 'mrt-row-expand': {
158 size: 10,
159 },
160 }}
161 enableColumnActions={!onlyProps}
162 enableColumnFilterModes
163 enablePagination={false}
164 enablePinning
165 enableRowNumbers
166 enableBottomToolbar={false}
167 enableTopToolbar={!onlyProps}
168 initialState={{
169 columnVisibility: { required: false, description: false },
170 density: 'compact',
171 showGlobalFilter: true,
172 sorting: [
173 { id: 'required', desc: true },
174 { id: 'propName', desc: false },
175 ],
176 }}
177 muiSearchTextFieldProps={{
178 placeholder: 'Search All Props',
179 sx: { minWidth: '18rem' },
180 variant: 'outlined',
181 }}
182 muiTablePaperProps={{
183 sx: { mb: '1.5rem' },
184 id: onlyProps ? 'relevant-props-table' : 'props-table',
185 }}
186 positionGlobalFilter="left"
187 renderDetailPanel={({ row }) => (
188 <Typography
189 color={row.original.description ? 'secondary.main' : 'text.secondary'}
190 >
191 {row.original.description || 'No Description Provided... Yet...'}
192 </Typography>
193 )}
194 rowNumberMode="static"
195 onColumnPinningChange={setColumnPinning}
196 state={{ columnPinning }}
197 />
198 );
199};
200
201export default RootPropTable;
202