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    () => [
12      {
13        accessorKey: 'firstName',
14        header: 'First Name',
15      },
16      {
17        accessorKey: 'lastName',
18        header: 'Last Name',
19      },
20      {
21        accessorKey: 'email',
22        header: 'Email',
23      },
24      {
25        accessorKey: 'city',
26        header: 'City',
27      },
28    ],
29    [],
30  );
31
32  const table = useMaterialReactTable({
33    columns,
34    data,
35    enableRowPinning: true,
36    enablePagination: false,
37    enableStickyHeader: true,
38    getRowId: (row) => row.email,
39    initialState: {
40      rowPinning: {
41        top: ['rkholer33@yopmail.com', 'egarcia@yopmail.com'],
42        bottom: [],
43      },
44    },
45    muiTableContainerProps: {
46      sx: {
47        maxHeight: '400px',
48      },
49    },
50    muiTableBodyRowProps: ({ row, table }) => {
51      const { density } = table.getState();
52      return {
53        sx: {
54          //Set a fixed height for pinned rows
55          height: row.getIsPinned()
56            ? `${
57                //Default mrt row height estimates. Adjust as needed.
58                density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69
59              }px`
60            : undefined,
61        },
62      };
63    },
64  });
65
66  return <MaterialReactTable table={table} />;
67};
68
69export default Example;
70