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    mrtTheme: (theme) => ({
46      baseBackgroundColor: theme.palette.background.default, //change default background color
47    }),
48    muiTableBodyRowProps: { hover: false },
49    muiTableProps: {
50      sx: {
51        border: '1px solid rgba(81, 81, 81, .5)',
52      },
53    },
54    muiTableHeadCellProps: {
55      sx: {
56        border: '1px solid rgba(81, 81, 81, .5)',
57        fontStyle: 'italic',
58        fontWeight: 'normal',
59      },
60    },
61    muiTableBodyCellProps: {
62      sx: {
63        border: '1px solid rgba(81, 81, 81, .5)',
64      },
65    },
66  });
67
68  //using MRT_Table instead of MaterialReactTable if we do not need any of the toolbar components or features
69  return <MRT_Table table={table} />;
70};
71
72export default Example;
73