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.

1

No Description Provided... Yet...

2

No Description Provided... Yet...

3

No Description Provided... Yet...

4

No Description Provided... Yet...

5

No Description Provided... Yet...

6

No Description Provided... Yet...

7

No Description Provided... Yet...

8

No Description Provided... Yet...

9

No Description Provided... Yet...

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