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
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.

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