MRT logoMaterial React Table

State Options

Many of the state options you can pass here are the same as the ones you can pass to the useReactTable useTableInstance hook.

Here is a list of all the state options you can pass to initialState or state.

<MaterialReactTable
initialState={
{
// all the state options you can pass here
}
}
state={
{
// or here
}
}
/>
1
{ [key: string]: MRT_FilterFn }
2
Array<{id: string, value: unknown}>
{}
TanStack Table Filters Docs
3
Array<string>
[]
TanStack Table Column Ordering Docs
4
{ left: Array<string>, right: Array<string> }
{ left: [], right: [] }
TanStack Table Column Pinning Docs
5
Record<string, number>
{}
TanStack Table Column Sizing Docs
6
See TanStack Docs
{}
TanStack Table Column Sizing Docs
7
Record<string, boolean>
{}
TanStack Table Column Visibility Docs
8
'comfortable' | 'compact' | 'spacious'
'comfortable'
9
MRT_Column | null
10
MRT_Row | null
11
MRT_Cell
12
MRT_Row
13
Record<string, boolean> | boolean
{}
TanStack Table Expanding Docs
14
any
TanStack Table Filtering Docs
15
MRT_FilterFn
16
Array<string>
[]
TanStack Table Grouping Docs
17
MRT_Column | null
18
MRT_Row | null
19
boolean
false
20
boolean
false
21
{ pageIndex: number, pageSize: number }
{ pageIndex: 0, pageSize: 10 }
TanStack Table Pagination Docs
22
Record<string, boolean>
{}
TanStack Table Row Selection Docs
23
boolean
false
24
boolean
false
25
boolean
false
26
boolean
false
27
boolean
false
28
Array<{ id: string, desc: boolean }>
[]
TanStack Table Sorting Docs

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 MRT_ColumnDef,
5 MRT_TableState,
6} from 'material-react-table';
7import { Link as MuiLink, Typography, useMediaQuery } from '@mui/material';
8import { SampleCodeSnippet } from '../mdx/SampleCodeSnippet';
9import { StateRow, stateOptions } from './stateOptions';
10
11interface Props {
12 onlyProps?: Set<keyof MRT_TableState>;
13}
14
15const StateOptionsTable: FC<Props> = ({ onlyProps }) => {
16 const isDesktop = useMediaQuery('(min-width: 1200px)');
17
18 const columns = useMemo(
19 () =>
20 [
21 {
22 accessorKey: 'stateOption',
23 enableClickToCopy: true,
24 header: 'State Option',
25 muiTableBodyCellCopyButtonProps: ({ cell }) => ({
26 className: 'state-option',
27 // component: 'a',
28 id: `${cell.getValue<string>()}-state-option`,
29 // href: `#${cell.getValue<string>()}-state-option`,
30 }),
31 Cell: ({ cell }) => cell.getValue<string>(),
32 },
33 {
34 accessorKey: 'type',
35 header: 'Type',
36 enableGlobalFilter: false,
37 Cell: ({ cell }) => (
38 <SampleCodeSnippet
39 className="language-js"
40 enableCopyButton={false}
41 style={{
42 backgroundColor: 'transparent',
43 fontSize: '0.9rem',
44 margin: 0,
45 padding: 0,
46 minHeight: 'unset',
47 }}
48 >
49 {cell.getValue<string>()}
50 </SampleCodeSnippet>
51 ),
52 },
53 {
54 accessorKey: 'defaultValue',
55 enableGlobalFilter: false,
56 header: 'Default Value',
57 Cell: ({ cell }) => (
58 <SampleCodeSnippet
59 className="language-js"
60 enableCopyButton={false}
61 style={{
62 backgroundColor: 'transparent',
63 fontSize: '0.9rem',
64 margin: 0,
65 padding: 0,
66 minHeight: 'unset',
67 }}
68 >
69 {cell.getValue<string>()}
70 </SampleCodeSnippet>
71 ),
72 },
73 {
74 accessorKey: 'description',
75 enableGlobalFilter: false,
76 header: 'Description',
77 },
78 {
79 accessorKey: 'link',
80 disableFilters: true,
81 enableGlobalFilter: false,
82 header: 'More Info Links',
83 Cell: ({ cell, row }) => (
84 <Link href={cell.getValue() as string} passHref legacyBehavior>
85 <MuiLink
86 target={
87 (cell.getValue() as string).startsWith('http')
88 ? '_blank'
89 : undefined
90 }
91 rel="noreferrer"
92 >
93 {row.original?.linkText}
94 </MuiLink>
95 </Link>
96 ),
97 },
98 ] as MRT_ColumnDef<StateRow>[],
99 [],
100 );
101
102 const [columnPinning, setColumnPinning] = useState({});
103
104 useEffect(() => {
105 if (typeof window !== 'undefined') {
106 if (isDesktop) {
107 setColumnPinning({
108 left: ['mrt-row-expand', 'mrt-row-numbers', 'stateOption'],
109 right: ['link'],
110 });
111 } else {
112 setColumnPinning({});
113 }
114 }
115 }, [isDesktop]);
116
117 const data = useMemo(() => {
118 if (onlyProps) {
119 return stateOptions.filter(({ stateOption }) =>
120 onlyProps.has(stateOption),
121 );
122 }
123 return stateOptions;
124 }, [onlyProps]);
125
126 return (
127 <MaterialReactTable
128 columns={columns}
129 data={data}
130 displayColumnDefOptions={{
131 'mrt-row-numbers': {
132 size: 10,
133 },
134 'mrt-row-expand': {
135 size: 10,
136 },
137 }}
138 enableColumnActions={!onlyProps}
139 enableColumnFilterModes
140 enablePagination={false}
141 enablePinning
142 enableRowNumbers
143 enableBottomToolbar={false}
144 enableTopToolbar={!onlyProps}
145 initialState={{
146 columnVisibility: { description: false },
147 density: 'compact',
148 showGlobalFilter: true,
149 sorting: [{ id: 'stateOption', desc: false }],
150 }}
151 muiSearchTextFieldProps={{
152 placeholder: 'Search State Options',
153 sx: { minWidth: '18rem' },
154 variant: 'outlined',
155 }}
156 muiTablePaperProps={{
157 sx: { mb: '1.5rem' },
158 id: onlyProps ? 'relevant-state-options-table' : 'state-options-table',
159 }}
160 positionGlobalFilter="left"
161 renderDetailPanel={({ row }) => (
162 <Typography
163 color={row.original.description ? 'secondary.main' : 'text.secondary'}
164 >
165 {row.original.description || 'No Description Provided... Yet...'}
166 </Typography>
167 )}
168 rowNumberMode="static"
169 onColumnPinningChange={setColumnPinning}
170 state={{ columnPinning }}
171 />
172 );
173};
174
175export default StateOptionsTable;
176