Material React Table

1import { useMemo, useState } from 'react';
2import {
3  MaterialReactTable,
4  type MRT_ColumnDef,
5  type MRT_Row,
6} from 'material-react-table';
7import { data as initData, type Person } from './makeData';
8
9const 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: 'city',
23        header: 'City',
24      },
25    ],
26    [],
27    
28  );
29
30  const [data, setData] = useState(() => initData);
31
32  return (
33    <MaterialReactTable
34      autoResetPageIndex={false}
35      columns={columns}
36      data={data}
37      enableRowOrdering
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};
55
56export default Example;
57