Material React Table

1import React, { FC, useMemo } from 'react';
2import MaterialReactTable, { MRT_ColumnDef } from 'material-react-table';
3
4type Person = {
5  firstName: string;
6  lastName: string;
7  address: string;
8  city: string;
9  state: string;
10};
11
12export const Example: FC = () => {
13  const columns = useMemo<MRT_ColumnDef<Person>[]>(
14    () => [
15      //column definitions...
16      {
17        accessorKey: 'firstName',
18        header: 'First Name',
19      },
20      {
21        accessorKey: 'lastName',
22        header: 'Last Name',
23      },
24      {
25        accessorKey: 'address',
26        header: 'Address',
27      },
28      {
29        accessorKey: 'city',
30        header: 'City',
31      },
32      {
33        accessorKey: 'state',
34        header: 'State',
35      },
36      
37    ],
38    [],
39  );
40
41  const data = useMemo(
42    () => [
43      //data definitions...
44      {
45        firstName: 'Dylan',
46        lastName: 'Murray',
47        address: '261 Erdman Ford',
48        city: 'East Daphne',
49        state: 'Kentucky',
50      },
51      {
52        firstName: 'Raquel',
53        lastName: 'Kohler',
54        address: '769 Dominic Grove',
55        city: 'Columbus',
56        state: 'Ohio',
57      },
58      {
59        firstName: 'Ervin',
60        lastName: 'Reinger',
61        address: '566 Brakus Inlet',
62        city: 'South Linda',
63        state: 'West Virginia',
64      },
65      {
66        firstName: 'Brittany',
67        lastName: 'McCullough',
68        address: '722 Emie Stream',
69        city: 'Lincoln',
70        state: 'Nebraska',
71      },
72      {
73        firstName: 'Branson',
74        lastName: 'Frami',
75        address: '32188 Larkin Turnpike',
76        city: 'Charleston',
77        state: 'South Carolina',
78      },
79      
80    ],
81    [],
82  );
83
84  return (
85    <MaterialReactTable
86      columns={columns}
87      data={data}
88      enableColumnActions={false}
89      enableColumnFilters={false}
90      enablePagination={false}
91      enableSorting={false}
92      enableBottomToolbar={false}
93      enableTopToolbar={false}
94      muiTableBodyRowProps={{ hover: false }}
95    />
96  );
97};
98
99export default Example;
100