Material React Table

1import { useMemo } from 'react';
2import {
3  MaterialReactTable,
4  useMaterialReactTable,
5  type MRT_ColumnDef,
6} from 'material-react-table';
7import { data, type Person } from './makeData';
8
9const Example = () => {
10  const columns = useMemo<MRT_ColumnDef<Person>[]>(
11    //column definitions...
12    () => [
13      {
14        accessorKey: 'firstName',
15        header: 'First Name',
16      },
17      {
18        accessorKey: 'lastName',
19        header: 'Last Name',
20      },
21      {
22        accessorKey: 'email',
23        header: 'Email',
24      },
25      {
26        accessorKey: 'city',
27        header: 'City',
28      },
29    ],
30    [],
31    
32  );
33
34  const table = useMaterialReactTable({
35    columns,
36    data,
37    enablePagination: false,
38    enableRowPinning: true,
39    enableRowSelection: true,
40    enableStickyHeader: true,
41    rowPinningDisplayMode: 'select-sticky',
42    getRowId: (row) => row.email,
43    initialState: {
44      rowPinning: {
45        top: ['ereinger@mailinator.com'],
46      },
47      rowSelection: {
48        'ereinger@mailinator.com': true,
49      },
50    },
51    muiTableContainerProps: {
52      sx: {
53        maxHeight: '400px',
54      },
55    },
56    muiTableBodyRowProps: ({ row, table }) => {
57      const { density } = table.getState();
58      return {
59        sx: {
60          //Set a fixed height for pinned rows
61          height: row.getIsPinned()
62            ? `${
63                //Default mrt row height estimates. Adjust as needed.
64                density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69
65              }px`
66            : undefined,
67        },
68      };
69    },
70  });
71
72  return <MaterialReactTable table={table} />;
73};
74
75export default Example;
76