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

#	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'	'onEnd'	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		MRT Editing Docs

30	boolean	true	MRT Expanding Sub Rows Docs

31	boolean		MRT Expanding Sub Rows Docs

32	boolean	true	TanStack Filters Docs

33	boolean	true	MRT Full Screen Toggle Docs

34	boolean	true	MRT Global Filtering Docs

35	boolean	true	MRT Global Filtering Docs

36	boolean	true	MRT Global Filtering Docs

37	boolean		MRT Aggregation and Grouping Docs

38	boolean	true	MRT Column Hiding Docs

39	boolean		TanStack Sorting Docs

40	boolean	true	MRT Row Selection Docs

41	boolean

42	boolean	true

43	boolean

44	boolean

45	boolean

46	boolean		Row Numbers Feature Guide

47	boolean

48	boolean

49	boolean		MRT Virtualization Docs

50	boolean	true

51	boolean	true

52	boolean	true

53	boolean

54	boolean

55	boolean	true

56	boolean	true

57	boolean	true

58	boolean	true

59	boolean	true

60	(dataRow: TData) => TData[]

61	Record<string, FilterFn>		TanStack Table Filters Docs

62	boolean	false	TanStack Filtering Docs

63	(column: Column<TData, unknown>) => boolean

64	(table: Table<TData>) => () => RowModel<TData>		TanStack Table Core Table Docs

65	() => MRT_RowModel<TData>

66	() => Map<any, number>		TanStack Table Filters Docs

67	() => RowModel<TData>		TanStack Table Filters Docs

68	() => Map<any, number>		TanStack Table Filters Docs

69	() => RowModel<TData>		TanStack Table Filters Docs

70	(table: Table<TData>) => () => RowModel<TData>		TanStack Table Grouping Docs

71	(row: Row<TData>) => boolean		TanStack Table Expanding Docs

72	() => MRT_RowModel<TData>

73	(row: Row<TData>) => boolean		TanStack Table Expanding Docs

74	(originalRow: TData, index: number, parent?: MRT_Row<TData>) => string		TanStack Table Core Table Docs

75	(table: Table<TData>) => () => RowModel<TData>		TanStack Table Sorting Docs

76	(originalRow: TData, index: number) => undefined \| TData[]		TanStack Table Core Table Docs

77	MRT_FilterOption

78	Array<MRT_FilterOption \| string> \| null

79	false \| 'reorder' \| 'remove'	reorder	TanStack Table Grouping Docs

80	Partial<MRT_Icons>;

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

82	(e: unknown) => boolean		TanStack Table Sorting Docs

83	'semantic' \| 'grid'	'semantic'	TODO

84	MRT_Localization		Localization (i18n) Guide

85	boolean		TanStack Table Expanding Docs

86	boolean		TanStack Table Filters Docs

87	boolean		TanStack Table Grouping Docs

88	boolean		TanStack Table Pagination Docs

89	boolean		TanStack Table Sorting Docs

90	number	100	TanStack Table Filtering Docs

91	number		TanStack Table Sorting Docs

92	'cell' \| 'row' \| 'table-body'		Memoize Components Guide

93	<T>(defaultOptions: T, options: Partial<T>) => T		TanStack Table Core Docs

94	TableMeta		TanStack Table Core Docs

95	ToolbarProps \| ({ table }) => ToolbarProps		Material UI Toolbar Props

96	IconButtonProps \| ({ table }) => IconButtonProps		Material UI IconButton Props

97	IconButtonProps \| ({ row, table }) => IconButtonProps		Material UI IconButton Props

98	LinearProgressProps \| ({ isTopToolbar, table }) => LinearProgressProps		Material UI LinearProgress Props

99	TextFieldProps \| ({ table }) => TextFieldProps		Material UI TextField Props

100	CheckboxProps \| ({ table }) => CheckboxProps		Material UI Checkbox Props

101	CheckboxProps \| ({ row, table }) => CheckboxProps		Material UI Checkbox Props

102	ButtonProps \| ({ cell, column, row, table }) => ButtonProps		Material UI Button Props

103	TextFieldProps \| ({ cell, column, row, table }) => TextFieldProps		Material UI TextField Props

104	TableCellProps \| ({ cell, column, row, table }) => TableCellProps		Material UI TableCell Props

105	SkeletonProps \| ({ cell, column, row, table }) => SkeletonProps		Material UI Skeleton Props

106	TableBodyProps \| ({ table }) => TableBodyProps		Material UI TableBody Props

107	IconButtonProps \| ({ row, table }) => IconButtonProps		Material UI IconButton Props

108	TableRowProps \| ({ isDetailPanel, row, table }) => TableRowProps	{ hover: true }	Material UI TableRow Props

109	TableContainerProps \| ({ table }) => TableContainerProps		Material UI TableContainer Props

110	TableCellProps \| ({ row, table }) => TableCellProps		Material UI TableCell Props

111	TableCellProps\| ({table, column}) => TableCellProps		Material UI TableCell Props

112	TableFooterProps \| ({ table }) => TableFooterProps);		Material UI TableFooter Props

113	TableRowProps \| ({table, footerGroup}) => TableRowProps		Material UI TableRow Props

114	IconButtonProps \| (({table, column}) => IconButtonProps);		Material UI IconButton Props

115	IconButtonProps \| ({table, column}) => IconButtonProps		Material UI IconButton Props

116	CheckboxProps \| ({ column, table}) => CheckboxProps		Material UI Checkbox Props

117	TextFieldProps \| ({ table, column, rangeFilterIndex}) => TextFieldProps		Material UI TextField Props

118	TableCellProps \| ({ table, column}) => TableCellProps		Material UI TableCell Props

119	TableHeadProps \| ({ table }) => TableHeadProps		Material UI TableHead Props

120	TableRowProps \| ({ table, headerGroup}) => TableRowProps		Material UI TableRow Props

121	Partial<TablePaginationProps> \| ({ table }) => Partial<TablePaginationProps>		Material UI TablePagination Props

122	PaperProps \| ({ table }} => PaperProps		MUI Paper API Docs

123	TableProps		MUI TableProps API Docs

124	ChipProps\| ({ table }} => ChipProps		Material UI Chip Props

125	AlertProps \| ({ table }) => AlertProps		Material UI Alert Props

126	ToolbarProps \| ({ table }) => ToolbarProps		Material UI Toolbar Props

127	OnChangeFn<{ [key: string]: MRT_FilterOption }>

128	OnChangeFn<ColumnFiltersState>		TanStack Table Filter Docs

129	OnChangeFn<ColumnOrderState>		TanStack Table Column Ordering Docs

130	OnChangeFn<ColumnPinningState>		TanStack Table Column Pinning Docs

131	OnChangeFn<ColumnSizingState>		TanStack Table Column Sizing Docs

132	OnChangeFn<ColumnSizingInfoState>		TanStack Table Column Sizing Docs

133	OnChangeFn<ColumnVisibilityState>		TanStack Table Column Visibility Docs

134	OnChangeFn<DensityState>		MRT Density Toggle Docs

135	OnChangeFn<MRT_Column<TData> \| null>

136	OnChangeFn<MRT_Row<TData> \| null>

137	OnChangeFn<MRT_Cell<TData> \| null>

138	({ row, table }) => void		MRT Editing Docs

139	OnChangeFn<MRT_Row<TData> \| null>

140	({ exitEditingMode, row, table, values}) => Promise<void> \| void		MRT Editing Docs

141	OnChangeFn<ExpandedState>		TanStack Table Expanding Docs

142	OnChangeFn<GlobalFilterState>		TanStack Table Filters Docs

143	OnChangeFn<GlobalFilterState>		TanStack Table Filters Docs

144	OnChangeFn<GroupingState>		TanStack Table Grouping Docs

145	OnChangeFn<MRT_Column<TData> \| null>

146	OnChangeFn<MRT_Row<TData> \| null>

147	OnChangeFn<boolean>		MRT Full Screen Toggle Docs

148	OnChangeFn<PaginationState>		TanStack Table Pagination Docs

149	OnChangeFn<RowSelectionState>		TanStack Table Row Selection Docs

150	OnChangeFn<boolean>

151	OnChangeFn<boolean>

152	OnChangeFn<boolean>

153	OnChangeFn<SortingState>		TanStack Table Sorting Docs

154	number		TanStack Table Pagination Docs

155	boolean		TanStack Table Expanding Docs

156	'first' \| 'last'

157	'first' \| 'last'

158	'left' \| 'right'

159	'bottom' \| 'top' \| 'both'

160	'bottom' \| 'top' \| 'none'

161	'bottom' \| 'top' \| 'both' \| 'none'

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

163	({ table }) => ReactNode

164	({ closeMenu, column, table }) => ReactNode[]

165	({ column, internalFilterOptions, onSelectFilterMode, table }) => ReactNode[]

166	({ row, table }) => ReactNode

167	({ internalFilterOptions, onSelectFilterMode, table }) => ReactNode[]

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

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

170	({ table}) => ReactNode

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

172	({ table }) => ReactNode

173	number

174	'original' \| 'static'	'original'

175	MutableRefObject<Virtualizer \| null>

176	Partial<VirtualizerOptions<HTMLDivElement, HTMLTableRowElement>>

177	'all' \| 'page'	'page'

178	boolean		TanStack Table Sorting Docs

179	Record<string, SortingFn>		TanStack Table Sorting Docs

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

181	MutableRefObject<MRT_TableInstance<TData> \| null>

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 legacyBehavior>
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      enablePagination={false}
166      enablePinning
167      enableRowNumbers
168      enableBottomToolbar={false}
169      enableTopToolbar={!onlyProps}
170      initialState={{
171        columnVisibility: { required: false, description: false },
172        density: 'compact',
173        showGlobalFilter: true,
174        sorting: [
175          { id: 'required', desc: true },
176          { id: 'propName', 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: onlyProps ? '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 RootPropTable;
204