Material React Table

1import { useMemo } from 'react';
2import {
3  MRT_Table, //import alternative sub-component if we do not want toolbars
4  type MRT_ColumnDef,
5  useMaterialReactTable,
6} from 'material-react-table';
7import { data, type Person } from './makeData';
8
9export const 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: 'address',
23        header: 'Address',
24      },
25      {
26        accessorKey: 'city',
27        header: 'City',
28      },
29      {
30        accessorKey: 'state',
31        header: 'State',
32      },
33    ],
34    [],
35    
36  );
37
38  const table = useMaterialReactTable({
39    columns,
40    data,
41    enableColumnActions: false,
42    enableColumnFilters: false,
43    enablePagination: false,
44    enableSorting: false,
45    muiTableBodyRowProps: { hover: false },
46    muiTableProps: {
47      sx: {
48        border: '1px solid rgba(81, 81, 81, .5)',
49      },
50    },
51    muiTableHeadCellProps: {
52      sx: {
53        border: '1px solid rgba(81, 81, 81, .5)',
54      },
55    },
56    muiTableBodyCellProps: {
57      sx: {
58        border: '1px solid rgba(81, 81, 81, .5)',
59      },
60    },
61  });
62
63  //using MRT_Table instead of MaterialReactTable if we do not need any of the toolbar components or features
64  return <MRT_Table table={table} />;
65};
66
67export default Example;
68