MRT logoMantine 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
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} />;
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;
You can help make these docs better! PRs are Welcome
Using Material-UI instead of Mantine?
Check out Material React Table