MRT logoMaterial React Table

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
/>
#
Prop Name
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