Material React Table

1import { useMemo, useState } from 'react';
2import {
3  useMaterialReactTable,
4  type MRT_ColumnDef,
5  type MRT_Row,
6  MRT_TableContainer,
7} from 'material-react-table';
8import { data as initData, type Person } from './makeData';
9
10const Example = () => {
11  const columns = useMemo<MRT_ColumnDef<Person>[]>(
12    //column definitions...
13    () => [
14      {
15        accessorKey: 'firstName',
16        header: 'First Name',
17      },
18      {
19        accessorKey: 'lastName',
20        header: 'Last Name',
21      },
22      {
23        accessorKey: 'city',
24        header: 'City',
25      },
26    ],
27    [],
28    
29  );
30
31  const [data, setData] = useState(() => initData);
32
33  const table = useMaterialReactTable({
34    autoResetPageIndex: false,
35    columns,
36    data,
37    enableRowOrdering: true,
38    enableSorting: false,
39    muiRowDragHandleProps: ({ table }) => ({
40      onDragEnd: () => {
41        const { draggingRow, hoveredRow } = table.getState();
42        if (hoveredRow && draggingRow) {
43          data.splice(
44            (hoveredRow as MRT_Row<Person>).index,
45            0,
46            data.splice(draggingRow.index, 1)[0],
47          );
48          setData([...data]);
49        }
50      },
51    }),
52  });
53
54  return <MRT_TableContainer table={table} />;
55};
56
57export default Example;
58