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';
8import { MenuItem } from '@mui/material';
9
10const Example = () => {
11  const columns = useMemo<MRT_ColumnDef<Person>[]>(
12    () => [
13      {
14        accessorKey: 'id',
15        enableColumnPinning: false, //disable column pinning for this column
16        header: 'ID',
17        size: 50,
18      },
19      //column definitions...
20      {
21        accessorKey: 'firstName',
22        header: 'First Name',
23      },
24      {
25        accessorKey: 'middleName',
26        header: 'Middle Name',
27      },
28      {
29        accessorKey: 'lastName',
30        header: 'Last Name',
31      },
32      {
33        accessorKey: 'address',
34        header: 'Address',
35        size: 300,
36      },
37      
38      {
39        accessorKey: 'city', //this column gets pinned to the right by default because of the initial state,
40        header: 'City',
41      },
42      {
43        accessorKey: 'state', //this column gets pinned left by default because of the the initial state,
44        header: 'State',
45      },
46      {
47        accessorKey: 'country',
48        header: 'Country',
49      },
50    ],
51    [],
52  );
53
54  const table = useMaterialReactTable({
55    columns,
56    data,
57    enableColumnPinning: true,
58    enableRowActions: true,
59    layoutMode: 'grid-no-grow', //constant column widths
60    renderRowActionMenuItems: () => [<MenuItem key="action">Action</MenuItem>],
61    initialState: {
62      columnPinning: { left: ['mrt-row-actions', 'state'], right: ['city'] },
63    },
64  });
65
66  return <MaterialReactTable table={table} />;
67};
68
69export default Example;
70