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 thismuiTableBodyCellProps: ({ cell }) => ({onClick: () => {console.log(cell.getValue(), cell.id);},}),//or in the component override callbacks like thisCell: ({ cell }) => {return <div>{cell.getValue()}</div>;},},];return (<MaterialReactTablecolumns={columns}data={data}//or in callback props like thismuiTableBodyCellEditTextFieldProps={({ 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 |
| TanStack Table Cell API Docs | ||
2 |
| TanStack Table Cell API Docs | ||
3 |
| TanStack Table Cell API Docs | ||
4 |
| TanStack Table Cell API Docs | ||
5 |
| TanStack Table Cell API Docs | ||
6 |
| TanStack Table Cell API Docs | ||
7 |
| TanStack Table Cell API Docs | ||
8 |
| TanStack Table Cell API Docs | ||
9 |
| TanStack Table Cell API Docs | ||
Wanna see the source code for this table? Check it out down below!
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';1112interface Props {13 onlyProps?: Set<keyof MRT_Cell>;14}1516const CellInstanceAPIsTable = ({ onlyProps }: Props) => {17 const isDesktop = useMediaQuery('(min-width: 1200px)');1819 const columns = useMemo<MRT_ColumnDef<CellInstanceAPI>[]>(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 },30 {31 accessorKey: 'type',32 header: 'Type',33 enableGlobalFilter: false,34 Cell: ({ cell }) => (35 <SampleCodeSnippet36 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 <MuiLink58 target={59 cell.getValue<string>().startsWith('http')60 ? '_blank'61 : undefined62 }63 rel="noopener"64 >65 {row.original?.linkText}66 </MuiLink>67 </Link>68 ),69 },70 ],71 [],72 );7374 const [columnPinning, setColumnPinning] = useState({});7576 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]);8889 const data = useMemo(() => {90 if (onlyProps) {91 return cellInstanceAPIs.filter(({ cellInstanceAPI }) =>92 onlyProps.has(cellInstanceAPI),93 );94 }95 return cellInstanceAPIs;96 }, [onlyProps]);9798 return (99 <MaterialReactTable100 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={!onlyProps}111 enableColumnFilterModes112 enablePagination={false}113 enablePinning114 enableRowNumbers115 enableBottomToolbar={false}116 enableTopToolbar={!onlyProps}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: onlyProps131 ? 'relevant-cell-instance-apis-table'132 : 'cell-instance-apis-table',133 }}134 positionGlobalFilter="left"135 renderDetailPanel={({ row }) => (136 <Typography137 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};148149export default CellInstanceAPIsTable;150