Mantine 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
    mantineTableBodyCellProps: ({ 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 = useMantineReactTable({
  columns,
  data,
  //or in the table options callbacks like this
  mantineEditTextInputProps: ({ cell }) => ({
    disabled: cell.getValue() === 'admin',
  }),
});

return <MantineReactTable table={table} />;

	#	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!

1
import { useEffect, useMemo, useState } from 'react';
2
import Link from 'next/link';
3
import {
4
  MantineReactTable,
5
  type MRT_ColumnDef,
6
  type MRT_Cell,
7
} from 'mantine-react-table';
8
import { Anchor, Text } from '@mantine/core';
9
import { useMediaQuery } from '@mantine/hooks';
10
import { SampleCodeSnippet } from '../mdx/SampleCodeSnippet';
11
import { type CellInstanceAPI, cellInstanceAPIs } from './cellInstanceAPIs';
12

13
interface Props {
14
  onlyOptions?: Set<keyof MRT_Cell<CellInstanceAPI>>;
15
}
16

17
const CellInstanceAPIsTable = ({ onlyOptions }: Props) => {
18
  const isDesktop = useMediaQuery('(min-width: 1200px)');
19

20
  const columns = useMemo(
21
    () =>
22
      [
23
        {
24
          accessorKey: 'cellInstanceAPI',
25
          enableClickToCopy: true,
26
          header: 'State Option',
27
          mantineCopyButtonProps: ({ cell }) => ({
28
            className: 'cell-instance-api',
29
            id: `${cell.getValue<string>()}-cell-instance-api`,
30
          }),
31
        },
32
        {
33
          accessorKey: 'type',
34
          header: 'Type',
35
          enableGlobalFilter: false,
36
          Cell: ({ cell }) => (
37
            <SampleCodeSnippet language="typescript" noCopy>
38
              {cell.getValue<string>()}
39
            </SampleCodeSnippet>
40
          ),
41
        },
42
        {
43
          accessorKey: 'link',
44
          disableFilters: true,
45
          enableGlobalFilter: false,
46
          header: 'More Info Links',
47
          Cell: ({ cell, row }) => (
48
            <Link href={cell.getValue() as string} passHref legacyBehavior>
49
              <Anchor
50
                target={
51
                  (cell.getValue() as string).startsWith('http')
52
                    ? '_blank'
53
                    : undefined
54
                }
55
                rel="noopener"
56
              >
57
                {row.original?.linkText}
58
              </Anchor>
59
            </Link>
60
          ),
61
        },
62
      ] as MRT_ColumnDef<CellInstanceAPI>[],
63
    [],
64
  );
65

66
  const [columnPinning, setColumnPinning] = useState({});
67

68
  useEffect(() => {
69
    if (typeof window !== 'undefined') {
70
      if (isDesktop) {
71
        setColumnPinning({
72
          left: ['mrt-row-expand', 'mrt-row-numbers', 'cellInstanceAPI'],
73
          right: ['link'],
74
        });
75
      } else {
76
        setColumnPinning({});
77
      }
78
    }
79
  }, [isDesktop]);
80

81
  const data = useMemo(() => {
82
    if (onlyOptions) {
83
      return cellInstanceAPIs.filter(({ cellInstanceAPI }) =>
84
        onlyOptions.has(cellInstanceAPI),
85
      );
86
    }
87
    return cellInstanceAPIs;
88
  }, [onlyOptions]);
89

90
  return (
91
    <MantineReactTable
92
      columns={columns}
93
      data={data}
94
      displayColumnDefOptions={{
95
        'mrt-row-numbers': {
96
          size: 10,
97
        },
98
        'mrt-row-expand': {
99
          size: 10,
100
        },
101
      }}
102
      enableColumnActions={!onlyOptions}
103
      enableColumnFilterModes
104
      enablePagination={false}
105
      enablePinning
106
      enableRowNumbers
107
      enableBottomToolbar={false}
108
      enableTopToolbar={!onlyOptions}
109
      initialState={{
110
        columnVisibility: { description: false },
111
        density: 'xs',
112
        showGlobalFilter: true,
113
        sorting: [{ id: 'cellInstanceAPI', desc: false }],
114
      }}
115
      mantineSearchTextInputProps={{
116
        placeholder: 'Search Cell APIs',
117
        sx: { minWidth: '18rem' },
118
        variant: 'filled',
119
      }}
120
      mantinePaperProps={{
121
        sx: { marginBottom: '24px' },
122
        id: onlyOptions
123
          ? 'relevant-cell-instance-apis-table'
124
          : 'cell-instance-apis-table',
125
      }}
126
      positionGlobalFilter="left"
127
      renderDetailPanel={({ row }) => (
128
        <Text color={row.original.description ? 'teal' : 'gray'}>
129
          {row.original.description || 'No Description Provided... Yet...'}
130
        </Text>
131
      )}
132
      rowNumberMode="static"
133
      onColumnPinningChange={setColumnPinning}
134
      state={{ columnPinning }}
135
    />
136
  );
137
};
138

139
export default CellInstanceAPIsTable;