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    rowPinningDisplayMode: 'top-and-bottom',
39    getRowId: (row) => row.email,
40    muiTableContainerProps: {
41      sx: {
42        maxHeight: '400px',
43      },
44    },
45  });
46
47  return <MaterialReactTable table={table} />;
48};
49
50export default Example;
51