MRT logoMaterial React Table

Legacy V2 Docs

Column Instance APIs

NOTE: These are NOT column options for Material React Table. These are just static methods on a column instance that you can use.

Each column has a column instance object associated with it that can be accessed in callback props and other places in the table.

You can access and use a column instance in quite a few places, but here are some of the most common:

const columns = [
{
accessorKey: 'username',
header: 'Username',
//you can access a column instance in many callback functions in a column definition like this
muiTableHeadCellProps: ({ column }) => ({
sx: {
color: column.getIsSorted() ? 'red' : 'black',
},
}),
//or in the component override callbacks
Header: ({ column }) => <div>{column.columnDef.header}</div>,
Cell: ({ cell, column }) => (
<Box
sx={{
backgroundColor: column.getIsGrouped() ? 'green' : 'white',
}}
>
{cell.getValue()}
</Box>
),
},
];
const table = useMaterialReactTable({
columns,
data,
//or in callback props like this
muiTableBodyCellProps: ({ column }) => ({
sx: {
boxShadow: column.getIsPinned() ? '0 0 0 2px red' : 'none',
},
}),
});
1
AccessorFn<TData>
TanStack Table Column API Docs
2
() => void
TanStack Table Sorting API Docs
3
ColumnDef<TData>
TanStack Table Column API Docs
4
MRT_ColumnDef<TData>[]
TanStack Table Column API Docs
5
number
TanStack Table Column API Docs
6
7
() => AggregationFn<TData> | undefined
TanStack Table Grouping API Docs
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

Wanna see the source code for this table? Check it out down below!

Source Code

1import { useEffect, useMemo, useState } from 'react';
2import Link from 'next/link';
3import {
4 MaterialReactTable,
5 type MRT_ColumnDef,
6 type MRT_Column,
7} from 'material-react-table';
8import { Link as MuiLink, Typography, useMediaQuery } from '@mui/material';
9import { SampleCodeSnippet } from '../mdx/SampleCodeSnippet';
10import {
11 type ColumnInstanceAPI,
12 columnInstanceAPIs,
13} from './columnInstanceAPIs';
14
15interface Props {
16 onlyOptions?: Set<keyof MRT_Column<ColumnInstanceAPI>>;
17}
18
19const ColumnInstanceAPIsTable = ({ onlyOptions }: Props) => {
20 const isDesktop = useMediaQuery('(min-width: 1200px)');
21
22 const columns = useMemo<MRT_ColumnDef<ColumnInstanceAPI>[]>(
23 () => [
24 {
25 accessorKey: 'columnInstanceAPI',
26 enableClickToCopy: true,
27 header: 'State Option',
28 muiCopyButtonProps: ({ cell }) => ({
29 className: 'column-instance-api',
30 id: `${cell.getValue<string>()}-column-instance-api`,
31 }),
32 },
33 {
34 accessorKey: 'type',
35 header: 'Type',
36 enableGlobalFilter: false,
37 Cell: ({ cell }) => (
38 <SampleCodeSnippet
39 className="language-ts"
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: 'link',
55 disableFilters: true,
56 enableGlobalFilter: false,
57 header: 'More Info Links',
58 Cell: ({ cell, row }) => (
59 <Link href={cell.getValue<string>()} passHref legacyBehavior>
60 <MuiLink
61 target={
62 cell.getValue<string>().startsWith('http')
63 ? '_blank'
64 : undefined
65 }
66 rel="noopener"
67 >
68 {row.original?.linkText}
69 </MuiLink>
70 </Link>
71 ),
72 },
73 ],
74 [],
75 );
76
77 const [columnPinning, setColumnPinning] = useState({});
78
79 useEffect(() => {
80 if (typeof window !== 'undefined') {
81 if (isDesktop) {
82 setColumnPinning({
83 left: ['mrt-row-expand', 'mrt-row-numbers', 'columnInstanceAPI'],
84 right: ['link'],
85 });
86 } else {
87 setColumnPinning({});
88 }
89 }
90 }, [isDesktop]);
91
92 const data = useMemo(() => {
93 if (onlyOptions) {
94 return columnInstanceAPIs.filter(({ columnInstanceAPI }) =>
95 onlyOptions.has(columnInstanceAPI),
96 );
97 }
98 return columnInstanceAPIs;
99 }, [onlyOptions]);
100
101 return (
102 <MaterialReactTable
103 columns={columns}
104 data={data}
105 displayColumnDefOptions={{
106 'mrt-row-numbers': {
107 size: 10,
108 },
109 'mrt-row-expand': {
110 size: 10,
111 },
112 }}
113 enableColumnActions={!onlyOptions}
114 enableColumnFilterModes
115 enablePagination={false}
116 enableColumnPinning
117 enableRowNumbers
118 enableBottomToolbar={false}
119 enableTopToolbar={!onlyOptions}
120 initialState={{
121 columnVisibility: { description: false },
122 density: 'compact',
123 showGlobalFilter: true,
124 sorting: [{ id: 'columnInstanceAPI', desc: false }],
125 }}
126 muiSearchTextFieldProps={{
127 placeholder: 'Search Column APIs',
128 sx: { minWidth: '18rem' },
129 variant: 'outlined',
130 }}
131 muiTablePaperProps={{
132 sx: { mb: '1.5rem' },
133 id: onlyOptions
134 ? 'relevant-column-instance-apis-table'
135 : 'column-instance-apis-table',
136 }}
137 positionGlobalFilter="left"
138 renderDetailPanel={({ row }) => (
139 <Typography
140 color={row.original.description ? 'secondary.main' : 'text.secondary'}
141 >
142 {row.original.description || 'No Description Provided... Yet...'}
143 </Typography>
144 )}
145 rowNumberDisplayMode="static"
146 onColumnPinningChange={setColumnPinning}
147 state={{ columnPinning }}
148 />
149 );
150};
151
152export default ColumnInstanceAPIsTable;
153