Material React Table Cell Instance API Reference

Cell Instance APIs

Every cell provides a cell object that can be used in many props or column definitions that let's you have access to a cell's information and methods.

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

const columns = [
  {
    accessorKey: 'username',
    header: 'Username',
    //you can access a cell in many callback column definition options like this
    muiTableBodyCellProps: ({ cell }) => ({
      onClick: () => {
        console.log(cell.getValue(), cell.id);
      },
    }),
    //or in the component override callbacks like this
    Cell: ({ cell }) => {
      return <div>{cell.getValue()}</div>;
    },
  },
];

const table = useMaterialReactTable({
  columns,
  data,
  //or in callback props like this
  muiEditTextFieldProps: ({ cell }) => ({
    disabled: cell.getValue() === 'admin',
  }),
});

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

Drop to group by

#	Type	More Info Links
1	MRT_Column<TData>	TanStack Table Cell API Docs

2	() => { table: Table<TData>; column: MRT_Column<TData, TValue>; row: MRT_Row<TData>; cell: Cell<TData, TValue>; getValue: <TTValue = TValue>() => TTValue; renderValue: <TTValue = TValue>() => TTValue \| null; }	TanStack Table Cell API Docs

3	Not Provided	TanStack Table Cell API Docs

4	Not Provided	TanStack Table Cell API Docs

5	Not Provided	TanStack Table Cell API Docs

6	() => any	TanStack Table Cell API Docs

7	string	TanStack Table Cell API Docs

8	Not Provided	TanStack Table Cell API Docs

9	MRT_Row<TData>	TanStack Table Cell API Docs

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

This example is written for MRT V2.

If your app is still using MRT V1, either Upgrade to MRT V2 or use the V1 Docs instead. (useMaterialReactTable only exists in V2)

Source Code

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