MRT logoMaterial React Table

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',
    },
  }),
});
#
State Option
Type
More Info Links
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