Row Instance APIs
Every row in the table has an associated row instance that can be accessed in many of the callback props that you can use to access a row's information and methods.
You can access and use a row object in quite a few places, but here are some of the most common:
const columns = [{accessorKey: 'salary',header: 'Salary',//you can access a row instance in column definition option callbacks like thismuiTableBodyCellEditTextFieldProps: ({ row }) => ({disabled: row.original.employmentStatus === 'Retired',}),//or in the component override callbacks like thisCell: ({ cell, row }) => (<div>{row.original.employmentStatus === 'Retired'? 'Retired': cell.getValue()}</div>),},];return (<MaterialReactTablecolumns={columns}data={data}//or a row instance in callback props like thismuiSelectCheckboxProps={({ row }) => ({disabled: row.original.isAccountActive === false,})}renderDetailPanel={({ row }) => (<div><span>First Name: {row.original.firstName}</span><span>Last Name: {row.original.lastName}</span></div>)}/>);
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.
Wanna see the source code for this table? Check it out down below!
1import React, { FC, useEffect, useMemo, useState } from 'react';2import Link from 'next/link';3import MaterialReactTable, {4 MRT_ColumnDef,5 MRT_Row,6} from 'material-react-table';7import { Link as MuiLink, Typography, useMediaQuery } from '@mui/material';8import { SampleCodeSnippet } from '../mdx/SampleCodeSnippet';9import { RowInstanceAPI, rowInstanceAPIs } from './rowInstanceAPIs';1011interface Props {12 onlyProps?: Set<keyof MRT_Row>;13}1415const RowInstanceAPIsTable: FC<Props> = ({ onlyProps }) => {16 const isDesktop = useMediaQuery('(min-width: 1200px)');1718 const columns = useMemo(19 () =>20 [21 {22 accessorKey: 'rowInstanceAPI',23 enableClickToCopy: true,24 header: 'State Option',25 muiTableBodyCellCopyButtonProps: ({ cell }) => ({26 className: 'row-instance-api',27 id: `${cell.getValue<string>()}-row-instance-api`,28 }),29 Cell: ({ cell }) => cell.getValue<string>(),30 },31 {32 accessorKey: 'type',33 header: 'Type',34 enableGlobalFilter: false,35 Cell: ({ cell }) => (36 <SampleCodeSnippet37 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 <MuiLink59 target={60 (cell.getValue() as string).startsWith('http')61 ? '_blank'62 : undefined63 }64 rel="noreferrer"65 >66 {row.original?.linkText}67 </MuiLink>68 </Link>69 ),70 },71 ] as MRT_ColumnDef<RowInstanceAPI>[],72 [],73 );7475 const [columnPinning, setColumnPinning] = useState({});7677 useEffect(() => {78 if (typeof window !== 'undefined') {79 if (isDesktop) {80 setColumnPinning({81 left: ['mrt-row-expand', 'mrt-row-numbers', 'rowInstanceAPI'],82 right: ['link'],83 });84 } else {85 setColumnPinning({});86 }87 }88 }, [isDesktop]);8990 const data = useMemo(() => {91 if (onlyProps) {92 return rowInstanceAPIs.filter(({ rowInstanceAPI }) =>93 onlyProps.has(rowInstanceAPI),94 );95 }96 return rowInstanceAPIs;97 }, [onlyProps]);9899 return (100 <MaterialReactTable101 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 enableColumnFilterModes113 enablePagination={false}114 enablePinning115 enableRowNumbers116 enableBottomToolbar={false}117 enableTopToolbar={!onlyProps}118 initialState={{119 columnVisibility: { description: false },120 density: 'compact',121 showGlobalFilter: true,122 sorting: [{ id: 'rowInstanceAPI', desc: false }],123 }}124 muiSearchTextFieldProps={{125 placeholder: 'Search Row APIs',126 sx: { minWidth: '18rem' },127 variant: 'outlined',128 }}129 muiTablePaperProps={{130 sx: { mb: '1.5rem' },131 id: onlyProps132 ? 'relevant-row-instance-apis-table'133 : 'row-instance-apis-table',134 }}135 positionGlobalFilter="left"136 renderDetailPanel={({ row }) => (137 <Typography138 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};149150export default RowInstanceAPIsTable;151