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

return (
  <MaterialReactTable
    columns={columns}
    data={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!

Source Code

1import React, { 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      rowNumberMode="static"
143      onColumnPinningChange={setColumnPinning}
144      state={{ columnPinning }}
145    />
146  );
147};
148
149export default CellInstanceAPIsTable;
150