Material React Table Props API Reference

Props

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

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

<MaterialReactTable
//all the props you can pass here
/>

	#	Type	Default Value	More Info Links
	1	Array<MRT_ColumnDef<TData>>		Column Options API Reference
The array of column defs to use for the table.
	2	Array<TData>		Usage Docs
The data for the table to display. This array should match the type you provided to table.setRowType<...>, but in theory could be an array of anything. It's common for each item in the array to be an object of key/values but this is not required. Columns can access this data via string/index or a functional accessor to return anything they want. When the data option changes reference (compared via Object.is), the table will reprocess the data. Any other data processing that relies on the core data model (such as grouping, sorting, filtering, etc) will also be reprocessed.
	3	Record<string, AggregationFn>		TanStack Table Grouping Docs
This option allows you to define custom aggregation functions that can be referenced in a column's aggegationFn option by their key
	4	boolean		TanStack Table Core Table Docs
Set this option to override any of the autoReset... feature options.
	5	boolean		TanStack Table Expanding Docs
Enable this setting to automatically reset the expanded state of the table when grouping state changes.
	6	boolean		TanStack Table Pagination Docs
If set to true, pagination will be reset to the first page when page-altering state changes eg. data is updated, filters change, grouping changes, etc.
	7	(MRT_FilterOption \| string)[] \| null
No Description Provided... Yet...
	8	'onEnd' \| 'onChange'	'onEnd'	TanStack Table Column Sizing Docs
Determines when the columnSizing state is updated. onChange updates the state when the user is dragging the resize handle. onEnd updates the state when the user releases the resize handle.
	9	boolean	false	TanStack Table Core Table Docs
Set this option to true to output all debugging information to the console.
	10	boolean	false	TanStack Table Core Table Docs
Set this option to true to output column debugging information to the console.
	11	boolean	false	TanStack Table Core Table Docs
Set this option to true to output header debugging information to the console.
	12	boolean	false	TanStack Table Core Table Docs
Set this option to true to output row debugging information to the console.
	13	boolean	false	TanStack Table Core Table Docs
Set this option to true to output table debugging information to the console.
	14	Partial<MRT_ColumnDef<TData>>
Default column options to use for all column defs supplied to the table. This is useful for providing default cell/header/footer renderers, sorting/filtering/grouping options, etc.
	15	{ [key: string]: MRT_ColumnDef<TData> }
Customize and override the column definition options for the built-in display columns. (Select, Expand, Row Actions, etc.)
	16	'cell' \| 'row' \| 'table'	'row'
No Description Provided... Yet...
	17	boolean	true
No Description Provided... Yet...
	18	boolean	false
No Description Provided... Yet...
	19	boolean	true
No Description Provided... Yet...
	20	boolean	false
No Description Provided... Yet...
	21	boolean	false
No Description Provided... Yet...
	22	boolean	true
No Description Provided... Yet...
	23	boolean
No Description Provided... Yet...
	24	boolean
No Description Provided... Yet...
	25	boolean	true
No Description Provided... Yet...
	26	boolean
No Description Provided... Yet...
	27	boolean	true
No Description Provided... Yet...
	28	boolean
No Description Provided... Yet...
	29	boolean	true
No Description Provided... Yet...
	30	boolean	true
No Description Provided... Yet...
	31	boolean	true
No Description Provided... Yet...
	32	boolean	true
No Description Provided... Yet...
	33	boolean	true
No Description Provided... Yet...
	34	boolean
No Description Provided... Yet...
	35	boolean	true
No Description Provided... Yet...
	36	boolean
No Description Provided... Yet...
	37	boolean
No Description Provided... Yet...
	38	boolean
No Description Provided... Yet...
	39	boolean	true
No Description Provided... Yet...
	40	boolean
No Description Provided... Yet...
	41	boolean
No Description Provided... Yet...
	42	boolean
No Description Provided... Yet...
	43	boolean		Row Numbers Feature Guide
No Description Provided... Yet...
	44	boolean
No Description Provided... Yet...
	45	boolean
No Description Provided... Yet...
	46	boolean
No Description Provided... Yet...
	47	boolean	true
No Description Provided... Yet...
	48	boolean	true
No Description Provided... Yet...
	49	boolean	true
No Description Provided... Yet...
	50	boolean
No Description Provided... Yet...
	51	boolean
No Description Provided... Yet...
	52	boolean	true
No Description Provided... Yet...
	53	boolean	true
No Description Provided... Yet...
	54	boolean	true
No Description Provided... Yet...
	55	boolean	true
No Description Provided... Yet...
	56	boolean	true
No Description Provided... Yet...
	57	(dataRow: TData) => TData[]
No Description Provided... Yet...
	58	Record<string, FilterFn>		TanStack Table Filters Docs
This option allows you to define custom filter functions that can be referenced in a column's filterFn option by their key
	59	boolean
No Description Provided... Yet...
	60	(column: Column<TData, unknown>) => boolean
No Description Provided... Yet...
	61	(table: Table<TData>) => () => RowModel<TData>		TanStack Table Core Table Docs
Material React Table uses the default core row model function from TanStack Table, but you can override its implementation here. It is called once per table and should return a new function which will calculate and return the row model for the table.
	62	() => MRT_RowModel<TData>
No Description Provided... Yet...
	63	() => Map<any, number>		TanStack Table Filters Docs
A function that computes and returns a min/max tuple derived from column.getFacetedRowModel. Useful for displaying faceted result values.
	64
No Description Provided... Yet...
	65
No Description Provided... Yet...
	66
No Description Provided... Yet...
	67
No Description Provided... Yet...
	68
No Description Provided... Yet...
	69
No Description Provided... Yet...
	70
No Description Provided... Yet...
	71
No Description Provided... Yet...
	72
No Description Provided... Yet...
	73
No Description Provided... Yet...
	74
No Description Provided... Yet...
	75	(MRT_FilterOption \| string)[] \| null
No Description Provided... Yet...
	76
No Description Provided... Yet...
	77
No Description Provided... Yet...
	78
No Description Provided... Yet...
	79
No Description Provided... Yet...
	80
No Description Provided... Yet...
	81
No Description Provided... Yet...
	82
No Description Provided... Yet...
	83
No Description Provided... Yet...
	84
No Description Provided... Yet...
	85
No Description Provided... Yet...
	86
No Description Provided... Yet...
	87
No Description Provided... Yet...
	88
No Description Provided... Yet...
	89
No Description Provided... Yet...
	90	IconButtonProps \| ({ table }) => IconButtonProps		Material UI IconButton Props
No Description Provided... Yet...
	91	IconButtonProps \| ({ row, table }) => IconButtonProps		Material UI IconButton Props
No Description Provided... Yet...
	92	LinearProgressProps \| ({ isTopToolbar, table }) => LinearProgressProps		Material UI LinearProgress Props
No Description Provided... Yet...
	93	TextFieldProps \| ({ table }) => TextFieldProps		Material UI TextField Props
No Description Provided... Yet...
	94	CheckboxProps \| ({ table }) => CheckboxProps		Material UI Checkbox Props
No Description Provided... Yet...
	95	CheckboxProps \| ({ row, table }) => CheckboxProps		Material UI Checkbox Props
No Description Provided... Yet...
	96	ButtonProps \| ({ cell, column, row, table }) => ButtonProps		Material UI Button Props
No Description Provided... Yet...
	97	TextFieldProps \| ({ cell, column, row, table }) => TextFieldProps		Material UI TextField Props
No Description Provided... Yet...
	98	TableCellProps \| ({ cell, column, row, table }) => TableCellProps		Material UI TableCell Props
No Description Provided... Yet...
	99	SkeletonProps \| ({ cell, column, row, table }) => SkeletonProps		Material UI Skeleton Props
No Description Provided... Yet...
	100			Material UI TableBody Props
No Description Provided... Yet...
	101
No Description Provided... Yet...
	102
No Description Provided... Yet...
	103
No Description Provided... Yet...
	104
No Description Provided... Yet...
	105
No Description Provided... Yet...
	106
No Description Provided... Yet...
	107
No Description Provided... Yet...
	108
No Description Provided... Yet...
	109
No Description Provided... Yet...
	110
No Description Provided... Yet...
	111
No Description Provided... Yet...
	112
No Description Provided... Yet...
	113
No Description Provided... Yet...
	114
No Description Provided... Yet...
	115
No Description Provided... Yet...
	116			MUI Paper API Docs
No Description Provided... Yet...
	117	TableProps		MUI TableProps API Docs
No Description Provided... Yet...
	118
No Description Provided... Yet...
	119
No Description Provided... Yet...
	120
No Description Provided... Yet...
	121
No Description Provided... Yet...
	122
No Description Provided... Yet...
	123
No Description Provided... Yet...
	124
No Description Provided... Yet...
	125
No Description Provided... Yet...
	126
No Description Provided... Yet...
	127
No Description Provided... Yet...
	128
No Description Provided... Yet...
	129
No Description Provided... Yet...
	130
No Description Provided... Yet...
	131
No Description Provided... Yet...
	132
No Description Provided... Yet...
	133
No Description Provided... Yet...
	134
No Description Provided... Yet...
	135
No Description Provided... Yet...
	136
No Description Provided... Yet...
	137
No Description Provided... Yet...
	138
No Description Provided... Yet...
	139
No Description Provided... Yet...
	140
No Description Provided... Yet...
	141
No Description Provided... Yet...
	142
No Description Provided... Yet...
	143
No Description Provided... Yet...
	144
No Description Provided... Yet...
	145
No Description Provided... Yet...
	146
No Description Provided... Yet...
	147	number
No Description Provided... Yet...
	148
No Description Provided... Yet...
	149	'first' \| 'last'
No Description Provided... Yet...
	150	'first' \| 'last'
No Description Provided... Yet...
	151
No Description Provided... Yet...
	152
No Description Provided... Yet...
	153
No Description Provided... Yet...
	154	'bottom' \| 'top' \| 'both' \| 'none'
No Description Provided... Yet...
	155
No Description Provided... Yet...
	156
No Description Provided... Yet...
	157
No Description Provided... Yet...
	158
No Description Provided... Yet...
	159
No Description Provided... Yet...
	160
No Description Provided... Yet...
	161
No Description Provided... Yet...
	162
No Description Provided... Yet...
	163
No Description Provided... Yet...
	164
No Description Provided... Yet...
	165
No Description Provided... Yet...
	166	number
No Description Provided... Yet...
	167	'original' \| 'static'	'original'
No Description Provided... Yet...
	168	'all' \| 'page'	page
No Description Provided... Yet...
	169
No Description Provided... Yet...
	170
No Description Provided... Yet...
	171
No Description Provided... Yet...
	172
No Description Provided... Yet...
	173
No Description Provided... Yet...
	174
No Description Provided... Yet...

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

Source Code

1import React, { FC, useEffect, useMemo, useState } from 'react';
2import Link from 'next/link';
3import MaterialReactTable, {
4  MaterialReactTableProps,
5  MRT_ColumnDef,
6} from 'material-react-table';
7import {
8  Link as MuiLink,
9  Typography,
10  useMediaQuery,
11  useTheme,
12} from '@mui/material';
13import { SampleCodeSnippet } from '../mdx/SampleCodeSnippet';
14import { PropRow, rootProps } from './rootProps';
15
16interface Props {
17  onlyProps?: Set<keyof MaterialReactTableProps>;
18}
19
20const RootPropTable: FC<Props> = ({ onlyProps }) => {
21  const theme = useTheme();
22  const isDesktop = useMediaQuery('(min-width: 1200px)');
23
24  const columns = useMemo(
25    () =>
26      [
27        {
28          enableClickToCopy: true,
29          header: 'Prop Name',
30          accessorKey: 'propName',
31          muiTableBodyCellCopyButtonProps: ({ cell }) => ({
32            className: 'prop',
33            // component: 'a',
34            id: `${cell.getValue<string>()}-prop`,
35            // href: `#${cell.getValue<string>()}-prop`,
36          }),
37          Cell: ({ cell, row }) =>
38            row.original?.required ? (
39              <strong style={{ color: theme.palette.primary.dark }}>
40                {cell.getValue<string>()}*
41              </strong>
42            ) : (
43              cell.getValue<string>()
44            ),
45        },
46        {
47          header: 'Type',
48          accessorKey: 'type',
49          enableGlobalFilter: false,
50          Cell: ({ cell }) => (
51            <SampleCodeSnippet
52              className="language-js"
53              enableCopyButton={false}
54              style={{
55                backgroundColor: 'transparent',
56                fontSize: '0.9rem',
57                margin: 0,
58                padding: 0,
59                minHeight: 'unset',
60              }}
61            >
62              {cell.getValue<string>()}
63            </SampleCodeSnippet>
64          ),
65        },
66        {
67          header: 'Required',
68          accessorKey: 'required',
69          enableGlobalFilter: false,
70        },
71        {
72          header: 'Default Value',
73          accessorKey: 'defaultValue',
74          enableGlobalFilter: false,
75          Cell: ({ cell }) => (
76            <SampleCodeSnippet
77              className="language-js"
78              enableCopyButton={false}
79              style={{
80                backgroundColor: 'transparent',
81                fontSize: '0.9rem',
82                margin: 0,
83                padding: 0,
84                minHeight: 'unset',
85              }}
86            >
87              {cell.getValue<string>()}
88            </SampleCodeSnippet>
89          ),
90        },
91        {
92          header: 'Description',
93          accessorKey: 'description',
94          enableGlobalFilter: false,
95        },
96        {
97          header: 'More Info Links',
98          accessorKey: 'link',
99          disableFilters: true,
100          enableGlobalFilter: false,
101          Cell: ({ cell, row }) => (
102            <Link href={cell.getValue() as string} passHref>
103              <MuiLink
104                color={
105                  row.original.source === 'MRT'
106                    ? 'text.primary'
107                    : row.original.source === 'Material UI'
108                    ? 'primary.main'
109                    : row.original.source === 'TanStack Table'
110                    ? 'secondary.main'
111                    : undefined
112                }
113                target={
114                  (cell.getValue() as string).startsWith('http')
115                    ? '_blank'
116                    : undefined
117                }
118                rel="noreferrer"
119              >
120                {row.original?.linkText}
121              </MuiLink>
122            </Link>
123          ),
124        },
125      ] as MRT_ColumnDef<PropRow>[],
126    [theme],
127  );
128
129  const [columnPinning, setColumnPinning] = useState({});
130
131  useEffect(() => {
132    if (typeof window !== 'undefined') {
133      if (isDesktop) {
134        setColumnPinning({
135          left: ['mrt-row-expand', 'mrt-row-numbers', 'propName'],
136          right: ['link'],
137        });
138      } else {
139        setColumnPinning({});
140      }
141    }
142  }, [isDesktop]);
143
144  const data = useMemo(() => {
145    if (onlyProps) {
146      return rootProps.filter(({ propName }) => onlyProps.has(propName));
147    }
148    return rootProps;
149  }, [onlyProps]);
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={!onlyProps}
164      enableColumnFilterModes
165      enableColumnOrdering={!onlyProps}
166      enablePagination={false}
167      enablePinning
168      enableRowNumbers
169      enableBottomToolbar={false}
170      enableTopToolbar={!onlyProps}
171      initialState={{
172        columnVisibility: { required: false, description: false },
173        density: 'compact',
174        showGlobalFilter: true,
175        sorting: [
176          { id: 'required', desc: true },
177          { id: 'propName', desc: false },
178        ],
179      }}
180      muiSearchTextFieldProps={{
181        placeholder: 'Search All Props',
182        sx: { minWidth: '18rem' },
183        variant: 'outlined',
184      }}
185      muiTablePaperProps={{
186        sx: { mb: '1.5rem' },
187        id: onlyProps ? 'relevant-props-table' : 'props-table',
188      }}
189      positionGlobalFilter="left"
190      renderDetailPanel={({ row }) => (
191        <Typography
192          color={row.original.description ? 'secondary.main' : 'text.secondary'}
193        >
194          {row.original.description || 'No Description Provided... Yet...'}
195        </Typography>
196      )}
197      rowNumberMode="static"
198      state={{ columnPinning }}
199    />
200  );
201};
202
203export default RootPropTable;
204