Table Instance APIs
Internally, Material React Table uses the useReactTable hook from TanStack Table to create a table instance that handles a majority of the logic and events and the state for the table.
You can access this table instance yourself by either setting up a tableInstanceRef or by consuming a table param from many of the callback functions in many of the props.
const tableInstanceRef = useRef(null);const someEventHandler = () => {tableInstanceRef.current. //call any of the table instance methods here};const columns = useMemo(() => [{accessor: 'name',header: 'Name',Cell: ({ cell, table }) => <span onClick={() => table.{/* or maybe here */}}></span>,},]);return (<MaterialTablecolumns={columns}data={data}//all callback props have access to the table instance when used like thisrenderTopToolbarCustomActions={({ table }) => (<Button onClick={() => table.{/* or maybe here */}}>Click Me</Button>)}tableInstanceRef={tableInstanceRef}/>);
NOTE: These are NOT the props for Material React Table. These are just static methods on a table 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_TableInstance,6} from 'material-react-table';7import { Link as MuiLink, Typography, useMediaQuery } from '@mui/material';8import { SampleCodeSnippet } from '../mdx/SampleCodeSnippet';9import { TableInstanceAPI, tableInstanceAPIs } from './tableInstanceAPIs';1011interface Props {12 onlyProps?: Set<keyof MRT_TableInstance>;13}1415const TableInstanceAPIsTable: FC<Props> = ({ onlyProps }) => {16 const isDesktop = useMediaQuery('(min-width: 1200px)');1718 const columns = useMemo(19 () =>20 [21 {22 accessorKey: 'tableInstanceAPI',23 enableClickToCopy: true,24 header: 'State Option',25 muiTableBodyCellCopyButtonProps: ({ cell }) => ({26 className: 'table-instance-api',27 id: `${cell.getValue<string>()}-table-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<TableInstanceAPI>[],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', 'tableInstanceAPI'],82 right: ['link'],83 });84 } else {85 setColumnPinning({});86 }87 }88 }, [isDesktop]);8990 const data = useMemo(() => {91 if (onlyProps) {92 return tableInstanceAPIs.filter(({ tableInstanceAPI }) =>93 onlyProps.has(tableInstanceAPI),94 );95 }96 return tableInstanceAPIs;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: 'tableInstanceAPI', desc: false }],123 }}124 muiSearchTextFieldProps={{125 placeholder: 'Search Table APIs',126 sx: { minWidth: '18rem' },127 variant: 'outlined',128 }}129 muiTablePaperProps={{130 sx: { mb: '1.5rem' },131 id: onlyProps132 ? 'relevant-table-instance-apis-table'133 : 'table-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 TableInstanceAPIsTable;151