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