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	boolean	false	TanStack Table Core Table Docs

10	boolean	false	TanStack Table Core Table Docs

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	Partial<MRT_ColumnDef<TData>>		TanStack Table Core Table Docs

15	{ [key: string]: MRT_ColumnDef<TData> }		MRT Display Columns Docs

16	'modal' \| 'cell' \| 'row' \| 'table'	'modal'	MRT Editing Docs

17	boolean	true	MRT Customize Toolbars Docs

18	boolean	false	MRT Click to Copy Docs

19	boolean	true	MRT Column Actions Docs

20	boolean	false	MRT Column Ordering DnD Docs

21	boolean	false	MRT Column Filtering Docs

22	boolean	true	MRT Column Filtering Docs

23	boolean		MRT Column Ordering DnD Docs

24	boolean		MRT Column Resizing Docs

25	boolean	true	MRT Density Toggle Docs

26	boolean		MRT Editing Docs

27	boolean	true	MRT Expanding Sub Rows Docs

28	boolean		MRT Expanding Sub Rows Docs

29	boolean	true	TanStack Filters Docs

30	boolean	true	MRT Full Screen Toggle Docs

31	boolean	true	MRT Global Filtering Docs

32	boolean	true	MRT Global Filtering Docs

33	boolean	true	MRT Global Filtering Docs

34	boolean		MRT Aggregation and Grouping Docs

35	boolean	true	MRT Column Hiding Docs

36	boolean		TanStack Sorting Docs

37	boolean	true	MRT Row Selection Docs

38	boolean

39	boolean	true

40	boolean

41	boolean

42	boolean

43	boolean		Row Numbers Feature Guide

44	boolean

45	boolean

46	boolean

47	boolean	true

48	boolean	true

49	boolean	true

50	boolean

51	boolean

52	boolean	true

53	boolean	true

54	boolean	true

55	boolean	true

56	boolean	true

57	(dataRow: TData) => TData[]

58	Record<string, FilterFn>		TanStack Table Filters Docs

59	boolean	false	TanStack Filtering Docs

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

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

62	() => MRT_RowModel<TData>

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

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

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

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

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

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

69	() => MRT_RowModel<TData>

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

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

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

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

74	MRT_FilterOption

75	Array<MRT_FilterOption \| string> \| null

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

77	Partial<MRT_Icons>;

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

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

80	'semantic' \| 'grid'	'semantic'	TODO

81	MRT_Localization		Localization (i18n) Guide

82	boolean		TanStack Table Expanding Docs

83	boolean		TanStack Table Filters Docs

84	boolean		TanStack Table Grouping Docs

85	boolean		TanStack Table Pagination Docs

86	boolean		TanStack Table Sorting Docs

87	number	100	TanStack Table Filtering Docs

88	number		TanStack Table Sorting Docs

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

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

91	TableMeta		TanStack Table Core Docs

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

120	TableProps		MUI TableProps API Docs

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

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

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

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

125	OnChangeFn<ColumnFiltersState>		TanStack Table Filter Docs

126	OnChangeFn<ColumnOrderState>		TanStack Table Column Ordering Docs

127	OnChangeFn<ColumnPinningState>		TanStack Table Column Pinning Docs

128	OnChangeFn<ColumnSizingState>		TanStack Table Column Sizing Docs

129	OnChangeFn<ColumnSizingInfoState>		TanStack Table Column Sizing Docs

130	OnChangeFn<ColumnVisibilityState>		TanStack Table Column Visibility Docs

131	OnChangeFn<DensityState>		MRT Density Toggle Docs

132	OnChangeFn<MRT_Column<TData> \| null>

133	OnChangeFn<MRT_Row<TData> \| null>

134	OnChangeFn<MRT_Cell<TData> \| null>

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

136	OnChangeFn<MRT_Row<TData> \| null>

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

138	OnChangeFn<ExpandedState>		TanStack Table Expanding Docs

139	OnChangeFn<GlobalFilterState>		TanStack Table Filters Docs

140	OnChangeFn<GlobalFilterState>		TanStack Table Filters Docs

141	OnChangeFn<GroupingState>		TanStack Table Grouping Docs

142	OnChangeFn<MRT_Column<TData> \| null>

143	OnChangeFn<MRT_Row<TData> \| null>

144	OnChangeFn<boolean>		MRT Full Screen Toggle Docs

145	OnChangeFn<PaginationState>		TanStack Table Pagination Docs

146	OnChangeFn<RowSelectionState>		TanStack Table Row Selection Docs

147	OnChangeFn<boolean>

148	OnChangeFn<boolean>

149	OnChangeFn<boolean>

150	OnChangeFn<SortingState>		TanStack Table Sorting Docs

151	number		TanStack Table Pagination Docs

152	boolean		TanStack Table Expanding Docs

153	'first' \| 'last'

154	'first' \| 'last'

155	'left' \| 'right'

156	'bottom' \| 'top' \| 'both'

157	'bottom' \| 'top' \| 'none'

158	'bottom' \| 'top' \| 'both' \| 'none'

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

160	({ table }) => ReactNode

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

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

163	({ row, table }) => ReactNode

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

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

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

167	({ table}) => ReactNode

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

169	({ table }) => ReactNode

170	number

171	'original' \| 'static'	'original'

172	'all' \| 'page'	'page'

173	boolean		TanStack Table Sorting Docs

174	Record<string, SortingFn>		TanStack Table Sorting Docs

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

176	MutableRefObject<MRT_TableInstance<TData> \| null>

177	MutableRefObject<Virtualizer \| null>

178	Partial<VirtualizerOptions<HTMLDivElement>>

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