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    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        caption: {
53          captionSide: 'top',
54        },
55      },
56    },
57    muiTableHeadCellProps: {
58      sx: {
59        border: '1px solid rgba(81, 81, 81, .5)',
60        fontStyle: 'italic',
61        fontWeight: 'normal',
62      },
63    },
64    muiTableBodyCellProps: {
65      sx: {
66        border: '1px solid rgba(81, 81, 81, .5)',
67      },
68    },
69    renderCaption: ({ table }) =>
70      `Here is a table rendered with the lighter weight MRT_Table sub-component, rendering ${table.getRowModel().rows.length} rows.`,
71  });
72
73  //using MRT_Table instead of MaterialReactTable if we do not need any of the toolbar components or features
74  return <MRT_Table table={table} />;
75};
76
77export default Example;
78