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 (
  <MaterialTable
    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, { FC, 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: FC<Props> = ({ onlyProps }) => {
16  const isDesktop = useMediaQuery('(min-width: 1200px)');
17

18  const columns = useMemo(
19    () =>
20      [
21        {
22          accessorKey: 'cellInstanceAPI',
23          enableClickToCopy: true,
24          header: 'State Option',
25          muiTableBodyCellCopyButtonProps: ({ cell }) => ({
26            className: 'cell-instance-api',
27            id: `${cell.getValue<string>()}-cell-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<CellInstanceAPI>[],
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', 'cellInstanceAPI'],
82          right: ['link'],
83        });
84      } else {
85        setColumnPinning({});
86      }
87    }
88  }, [isDesktop]);
89

90  const data = useMemo(() => {
91    if (onlyProps) {
92      return cellInstanceAPIs.filter(({ cellInstanceAPI }) =>
93        onlyProps.has(cellInstanceAPI),
94      );
95    }
96    return cellInstanceAPIs;
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: 'cellInstanceAPI', desc: false }],
123      }}
124      muiSearchTextFieldProps={{
125        placeholder: 'Search Cell APIs',
126        sx: { minWidth: '18rem' },
127        variant: 'outlined',
128      }}
129      muiTablePaperProps={{
130        sx: { mb: '1.5rem' },
131        id: onlyProps
132          ? 'relevant-cell-instance-apis-table'
133          : 'cell-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 CellInstanceAPIsTable;
151