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, //data must be memoized or stable (useState, useMemo, defined outside of this component, etc.)
41    enableKeyboardShortcuts: false,
42    enableColumnActions: false,
43    enableColumnFilters: false,
44    enablePagination: false,
45    enableSorting: false,
46    mrtTheme: (theme) => ({
47      baseBackgroundColor: theme.palette.background.default, //change default background color
48    }),
49    muiTableBodyRowProps: { hover: false },
50    muiTableProps: {
51      sx: {
52        border: '1px solid rgba(81, 81, 81, .5)',
53        caption: {
54          captionSide: 'top',
55        },
56      },
57    },
58    muiTableHeadCellProps: {
59      sx: {
60        border: '1px solid rgba(81, 81, 81, .5)',
61        fontStyle: 'italic',
62        fontWeight: 'normal',
63      },
64    },
65    muiTableBodyCellProps: {
66      sx: {
67        border: '1px solid rgba(81, 81, 81, .5)',
68      },
69    },
70    renderCaption: ({ table }) =>
71      `Here is a table rendered with the lighter weight MRT_Table sub-component, rendering ${table.getRowModel().rows.length} rows.`,
72  });
73
74  //using MRT_Table instead of MaterialReactTable if we do not need any of the toolbar components or features
75  return <MRT_Table table={table} />;
76};
77
78export default Example;
79