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        footer: 'First Name',
17      },
18      {
19        accessorKey: 'lastName',
20        header: 'Last Name',
21        footer: 'Last Name',
22      },
23      {
24        accessorKey: 'email',
25        header: 'Email',
26        footer: 'Email',
27      },
28      {
29        accessorKey: 'city',
30        header: 'City',
31        footer: 'City',
32      },
33    ],
34    [],
35    
36  );
37
38  const table = useMaterialReactTable({
39    columns,
40    data,
41    enableBottomToolbar: false,
42    enableStickyHeader: true,
43    enableStickyFooter: true,
44    enablePagination: false,
45    muiTableContainerProps: { sx: { maxHeight: '400px' } },
46    muiTableBodyCellProps: {
47      sx: (theme) => ({
48        backgroundColor:
49          theme.palette.mode === 'dark'
50            ? theme.palette.grey[900]
51            : theme.palette.grey[50],
52      }),
53    },
54  });
55
56  return <MaterialReactTable table={table} />;
57};
58
59export default Example;
60