Material React Table Props API Reference

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

Drop to group by

#	Type	Default Value	More Info Links
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		MUI Paper API Docs

124	TableProps		MUI 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	({ internalFilterOptions, onSelectFilterMode, table }) => ReactNode[]

170	({ closeMenu, row, table }) => ReactNode[]

171	({ cell, row, table }) => ReactNode

172	({ table}) => ReactNode

173	ReactNode \| ({ table }) => ReactNode

174	({ table }) => ReactNode

175	number

176	'original' \| 'static'	'original'

177	MutableRefObject<Virtualizer \| null>

178	Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>

179	'all' \| 'page'	'page'

180	boolean		TanStack Table Sorting Docs

181	Record<string, SortingFn>		TanStack Table Sorting Docs

182	Partial<MRT_TableState<TData>>		Table State Management Guide

183	Array<(table: MRT_TableInstance<any>) => any>

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