MRT logoMaterial React Table

Column Instance APIs

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>
    ),
  },
];


return (
  <MaterialTable
    columns={columns}
    data={data}
    //or in callback props like this
    muiTableBodyCells={({ column }) => ({
      sx:
        boxShadow: column.getIsPinned() ? '0 0 0 2px red' : 'none',
      }),
    }
  />
);

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

#
State Option
Type
More Info Links
1
2
3
4
5
6
7
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

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_Column,
6} from 'material-react-table';
7import { Link as MuiLink, Typography, useMediaQuery } from '@mui/material';
8import { SampleCodeSnippet } from '../mdx/SampleCodeSnippet';
9import { ColumnInstanceAPI, columnInstanceAPIs } from './columnInstanceAPIs';
10

11interface Props {
12  onlyProps?: Set<keyof MRT_Column>;
13}
14

15const ColumnInstanceAPIsTable: FC<Props> = ({ onlyProps }) => {
16  const isDesktop = useMediaQuery('(min-width: 1200px)');
17

18  const columns = useMemo(
19    () =>
20      [
21        {
22          accessorKey: 'columnInstanceAPI',
23          enableClickToCopy: true,
24          header: 'State Option',
25          muiTableBodyCellCopyButtonProps: ({ cell }) => ({
26            className: 'column-instance-api',
27            id: `${cell.getValue<string>()}-column-instance-api`,
28          }),
29          Cell: ({ cell }) => cell.getValue<string>(),
30        },
31        {
32          accessorKey: 'type',
33          header: 'Type',
34          enableGlobalFilter: false,
35          Cell: ({ cell }) => (
36            <SampleCodeSnippet
37              className="language-js"
38              enableCopyButton={false}
39              style={{
40                backgroundColor: 'transparent',
41                fontSize: '0.9rem',
42                margin: 0,
43                padding: 0,
44                minHeight: 'unset',
45              }}
46            >
47              {cell.getValue<string>()}
48            </SampleCodeSnippet>
49          ),
50        },
51        {
52          accessorKey: 'link',
53          disableFilters: true,
54          enableGlobalFilter: false,
55          header: 'More Info Links',
56          Cell: ({ cell, row }) => (
57            <Link href={cell.getValue() as string} passHref legacyBehavior>
58              <MuiLink
59                target={
60                  (cell.getValue() as string).startsWith('http')
61                    ? '_blank'
62                    : undefined
63                }
64                rel="noreferrer"
65              >
66                {row.original?.linkText}
67              </MuiLink>
68            </Link>
69          ),
70        },
71      ] as MRT_ColumnDef<ColumnInstanceAPI>[],
72    [],
73  );
74

75  const [columnPinning, setColumnPinning] = useState({});
76

77  useEffect(() => {
78    if (typeof window !== 'undefined') {
79      if (isDesktop) {
80        setColumnPinning({
81          left: ['mrt-row-expand', 'mrt-row-numbers', 'columnInstanceAPI'],
82          right: ['link'],
83        });
84      } else {
85        setColumnPinning({});
86      }
87    }
88  }, [isDesktop]);
89

90  const data = useMemo(() => {
91    if (onlyProps) {
92      return columnInstanceAPIs.filter(({ columnInstanceAPI }) =>
93        onlyProps.has(columnInstanceAPI),
94      );
95    }
96    return columnInstanceAPIs;
97  }, [onlyProps]);
98

99  return (
100    <MaterialReactTable
101      columns={columns}
102      data={data}
103      displayColumnDefOptions={{
104        'mrt-row-numbers': {
105          size: 10,
106        },
107        'mrt-row-expand': {
108          size: 10,
109        },
110      }}
111      enableColumnActions={!onlyProps}
112      enableColumnFilterModes
113      enablePagination={false}
114      enablePinning
115      enableRowNumbers
116      enableBottomToolbar={false}
117      enableTopToolbar={!onlyProps}
118      initialState={{
119        columnVisibility: { description: false },
120        density: 'compact',
121        showGlobalFilter: true,
122        sorting: [{ id: 'columnInstanceAPI', desc: false }],
123      }}
124      muiSearchTextFieldProps={{
125        placeholder: 'Search Column APIs',
126        sx: { minWidth: '18rem' },
127        variant: 'outlined',
128      }}
129      muiTablePaperProps={{
130        sx: { mb: '1.5rem' },
131        id: onlyProps
132          ? 'relevant-column-instance-apis-table'
133          : 'column-instance-apis-table',
134      }}
135      positionGlobalFilter="left"
136      renderDetailPanel={({ row }) => (
137        <Typography
138          color={row.original.description ? 'secondary.main' : 'text.secondary'}
139        >
140          {row.original.description || 'No Description Provided... Yet...'}
141        </Typography>
142      )}
143      rowNumberMode="static"
144      onColumnPinningChange={setColumnPinning}
145      state={{ columnPinning }}
146    />
147  );
148};
149

150export default ColumnInstanceAPIsTable;
151