MRT logoMaterial React Table

Column Options

Many of the column options you can pass here are the same as the ones that you can pass to the useReactTable ColumnDefs

Here is a list of all the column options you can specify in a column definition.

const columns = useMemo(
() => [
{
accessorKey: 'name',
header: 'Name',
// All of the options you can specify here
},
],
[],
);
return <MaterialReactTable columns={columns} data={data} />;
1
string
TanStack Table ColumnDef Docs
2
(originalRow: TData) => any
MRT Data Columns Docs
3
string & keyof TData
MRT Data Columns Docs
4
({ cell, column, row, table }) => ReactNode
5
'count'
TanStack Table Grouping Docs
6
({ cell, column, row, table }) => ReactNode
MRT Data Columns Docs
7
Array<string>
8
Array<MRT_ColumnDef<TData>>
9
({ cell, column, row, table }) => ReactNode
MRT Editing Docs
10
boolean
MRT Click to Copy Docs
11
boolean
MRT Column Actions Docs
12
boolean
13
boolean
MRT Column Filtering Docs
14
boolean
MRT Column Filtering Docs
15
boolean
16
boolean
17
boolean
18
boolean
19
boolean
20
boolean
21
boolean
22
boolean
23
boolean
24
({ column, header, table }) => ReactNode
MRT Column Filtering Docs
25
MRT_FilterFn
fuzzy
26
Array<{ text: string; value: string }>
27
'text' | 'select' | 'multi-select' | 'range'
text
28
ReactNode | ({ column, footer, table }) => ReactNode
MRT Data Columns Docs
29
({ cell, column, row, table }) => ReactNode
30
ReactNode | (({ column, header, table }) => ReactNode)
MRT Data Columns Docs
31
string
TanStack Table ColumnDef Docs
32
boolean
false
33
number
1000
34
any
{}
35
number
40
36
ButtonProps | ({ cell, column, row, table }) => ButtonProps
Material UI Button API
37
TextFieldProps | ({ cell, column, row, table }) => TextFieldProps
Material UI TextField API
38
TableCellProps | ({ cell, table }) => TableCellProps
Material UI TableCell API
39
TableCellProps | ({ column, table }) => TableCellProps
Material UI TableCell API
40
IconButtonProps | ({ column, table }) => IconButtonProps
Material UI IconButton API
41
IconButtonProps | ({ column, table }) => IconButtonProps
Material UI IconButton API
42
Checkbox | ({ column, table }) => CheckboxProps
Material UI Checkbox Props
43
TextFieldProps | ({ column, rangeFilterIndex, table }) => TextFieldProps
Material UI TextField Props
44
TableCellProps | ({ column, table }) => TableCellProps
Material UI TableCell API
45
46
47
number
180
48
boolean
49
SortingFnOption
50
false | 1 | -1

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