Material React Table

1import { useMemo } from 'react';
2import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
3import { Typography } from '@mui/material';
4import { data, type Person } from './makeData';
5
6export const Example = () => {
7  const columns = useMemo<MRT_ColumnDef<Person>[]>(
8    //column definitions...
9    () => [
10      {
11        accessorKey: 'firstName',
12        header: 'First Name',
13      },
14      {
15        accessorKey: 'lastName',
16        header: 'Last Name',
17      },
18      {
19        accessorKey: 'address',
20        header: 'Address',
21      },
22      {
23        accessorKey: 'city',
24        header: 'City',
25      },
26      {
27        accessorKey: 'state',
28        header: 'State',
29      },
30    ],
31    [],
32    
33  );
34
35  return (
36    <MaterialReactTable
37      columns={columns}
38      data={data}
39      //just for demo purposes
40      defaultColumn={{
41        Cell: ({ renderedCellValue }) => {
42          //see how often cells are re-rendered
43          // console.info('render cell', cell.id);
44          return <>{renderedCellValue}</>;
45        },
46      }}
47      editDisplayMode="row"
48      enableColumnOrdering
49      enableDensityToggle={false} //density toggle is not compatible with memoization
50      enableEditing
51      enableColumnPinning
52      enableRowSelection
53      enableStickyHeader
54      initialState={{ pagination: { pageSize: 20, pageIndex: 0 } }}
55      memoMode="cells"
56      muiTableContainerProps={{ sx: { maxHeight: '500px' } }}
57      renderDetailPanel={({ row }) => <div>{row.original.firstName}</div>}
58      renderTopToolbarCustomActions={() => (
59        <Typography component="span" variant="h4">
60          Memoized Cells
61        </Typography>
62      )}
63    />
64  );
65};
66
67export default Example;
68

1import { useMemo } from 'react';
2import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
3import { Typography } from '@mui/material';
4import { data, type Person } from './makeData';
5
6export const Example = () => {
7  const columns = useMemo<MRT_ColumnDef<Person>[]>(
8    //column definitions...
9    () => [
10      {
11        accessorKey: 'firstName',
12        header: 'First Name',
13      },
14      {
15        accessorKey: 'lastName',
16        header: 'Last Name',
17      },
18      {
19        accessorKey: 'address',
20        header: 'Address',
21      },
22      {
23        accessorKey: 'city',
24        header: 'City',
25      },
26      {
27        accessorKey: 'state',
28        header: 'State',
29      },
30    ],
31    [],
32    
33  );
34
35  return (
36    <MaterialReactTable
37      columns={columns}
38      data={data}
39      //just for demo purposes
40      defaultColumn={{
41        Cell: ({ renderedCellValue }) => {
42          //see how often cells are re-rendered
43          // console.info('render cell', cell.id);
44          return <>{renderedCellValue}</>;
45        },
46      }}
47      enableDensityToggle={false} //density toggle is not compatible with memoization
48      enableHiding={false}
49      enableStickyHeader
50      initialState={{ pagination: { pageSize: 20, pageIndex: 0 } }}
51      memoMode="rows"
52      muiTableContainerProps={{ sx: { maxHeight: '500px' } }}
53      renderTopToolbarCustomActions={() => (
54        <Typography component="span" variant="h4">
55          Memoized Rows
56        </Typography>
57      )}
58    />
59  );
60};
61
62export default Example;
63

1import { useMemo } from 'react';
2import { MaterialReactTable, type MRT_ColumnDef } from 'material-react-table';
3import { Typography } from '@mui/material';
4import { data, type Person } from './makeData';
5
6export const Example = () => {
7  const columns = useMemo<MRT_ColumnDef<Person>[]>(
8    //column definitions...
9    () => [
10      {
11        accessorKey: 'firstName',
12        header: 'First Name',
13      },
14      {
15        accessorKey: 'lastName',
16        header: 'Last Name',
17      },
18      {
19        accessorKey: 'address',
20        header: 'Address',
21      },
22      {
23        accessorKey: 'city',
24        header: 'City',
25      },
26      {
27        accessorKey: 'state',
28        header: 'State',
29      },
30    ],
31    [],
32    
33  );
34
35  return (
36    <MaterialReactTable
37      columns={columns}
38      data={data}
39      enableBottomToolbar={false} //no need for bottom toolbar if no pagination
40      enableColumnActions={false} //no need for column actions if none of them are enabled
41      enableColumnFilters={false} //filtering does not work with memoized table body
42      enableDensityToggle={false} //density does not work with memoized table body
43      enableGlobalFilter={false} //searching does not work with memoized table body
44      enableHiding={false} //column hiding does not work with memoized table body
45      enablePagination={false} //pagination does not work with memoized table body
46      enableSorting={false} //sorting does not work with memoized table body
47      enableStickyHeader
48      memoMode="table-body" // memoize table body to improve render performance, but break all features
49      muiTableContainerProps={{ sx: { maxHeight: '500px' } }}
50      renderTopToolbarCustomActions={() => (
51        <Typography component="span" variant="h4">
52          Static Memoized Table
53        </Typography>
54      )}
55    />
56  );
57};
58
59export default Example;
60