MRT logoMaterial React Table

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
    muiTableBodyCellEditTextFieldProps={({ 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.

#
State Option
Type
More Info Links
1
2
3
4
5
6
7
8
9

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 MaterialReactTable, {
4  MRT_ColumnDef,
5  MRT_Cell,
6} from 'material-react-table';
7import { Link as MuiLink, Typography, useMediaQuery } from '@mui/material';
8import { SampleCodeSnippet } from '../mdx/SampleCodeSnippet';
9import { CellInstanceAPI, cellInstanceAPIs } from './cellInstanceAPIs';
10

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

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

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

73  const [columnPinning, setColumnPinning] = useState({});
74

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

88  const data = useMemo(() => {
89    if (onlyProps) {
90      return cellInstanceAPIs.filter(({ cellInstanceAPI }) =>
91        onlyProps.has(cellInstanceAPI),
92      );
93    }
94    return cellInstanceAPIs;
95  }, [onlyProps]);
96

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

148export default CellInstanceAPIsTable;
149