Merge pull request #616 from MohdAhmad1/main

Row dragging capabilities

README.md

@@ -33,6 +33,7 @@ The [lightweight](https://bundlephobia.com/package/mantine-datatable), dependenc
 - **[Automatically-scrollable](https://icflorescu.github.io/mantine-datatable/examples/scrollable-vs-auto-height)** - automatically scrollable or auto-height
 - **[AutoAnimate support](https://icflorescu.github.io/mantine-datatable/examples/using-with-auto-animate)** - animate row sorting, addition and removal
 - **[Column reordering, toggling](https://icflorescu.github.io/mantine-datatable/examples/column-dragging-and-toggling)** and **[resizing](https://icflorescu.github.io/mantine-datatable/examples/column-resizing)** - thanks to the outstanding work of [Giovambattista Fazioli](https://github.com/gfazioli)
+- **[Drag-and-drop support](https://icflorescu.github.io/mantine-datatable/examples/row-dragging)** - implemented using [@hello-pangea/dnd](https://github.com/hello-pangea/dnd) thanks to the outstanding work of [Mohd Ahmad](https://github.com/MohdAhmad1)
 - **More** - check out the [full documentation](https://icflorescu.github.io/mantine-datatable/)
 
 ## Trusted by the community

app/(home)/page.tsx

@@ -54,7 +54,8 @@ export default function HomePage() {
           <InternalLink to="/examples/column-properties-and-styling">cell data rendering</InternalLink>,{' '}
           <InternalLink to="/examples/using-with-mantine-contextmenu">context menus</InternalLink>,{' '}
           <InternalLink to="/examples/expanding-rows">row expansion</InternalLink>,{' '}
-          <InternalLink to="/examples/nested-tables">nesting</InternalLink> and{' '}
+          <InternalLink to="/examples/nested-tables">nesting</InternalLink>,{' '}
+          <InternalLink to="/examples/row-dragging">drag-and-drop reordering support</InternalLink> and{' '}
           <InternalLink to="/examples/complex-usage-scenario">more</InternalLink>
         </Feature>
         <Feature icon={IconLifebuoy} title="Typescript based">

app/config.ts

@@ -152,6 +152,11 @@ export const ROUTES: RouteInfo[] = [
     title: 'Column dragging and toggling',
     description: `Example: dragging & toggling ${PRODUCT_NAME} columns`,
   },
+  {
+    href: '/examples/row-dragging',
+    title: 'Row dragging',
+    description: `Example: dragging ${PRODUCT_NAME} rows`,
+  },
   {
     href: '/examples/column-resizing',
     title: 'Column resizing',

app/examples/row-dragging/RowDraggingExample.tsx

@@ -0,0 +1,84 @@
+'use client';
+
+import { DragDropContext, Draggable, type DropResult, Droppable } from '@hello-pangea/dnd';
+import { TableTd } from '@mantine/core';
+import { notifications } from '@mantine/notifications';
+import { IconGripVertical } from '@tabler/icons-react';
+import { DataTable, DataTableColumn, DataTableDraggableRow } from '__PACKAGE__';
+import { useState } from 'react';
+import companies from '~/data/companies.json';
+
+interface RecordData {
+  id: string;
+  name: string;
+  streetAddress: string;
+  city: string;
+  state: string;
+  missionStatement: string;
+}
+
+export function RowDraggingExample() {
+  const [records, setRecords] = useState<RecordData[]>(companies);
+
+  const handleDragEnd = (result: DropResult) => {
+    if (!result.destination) return;
+
+    const items = Array.from(records);
+    const sourceIndex = result.source.index;
+    const destinationIndex = result.destination.index;
+    const [reorderedItem] = items.splice(sourceIndex, 1);
+    items.splice(destinationIndex, 0, reorderedItem);
+
+    setRecords(items);
+    notifications.show({
+      title: 'Table reordered',
+      message: `The company named "${items[sourceIndex].name}" has been moved from position ${sourceIndex + 1} to ${destinationIndex + 1}.`,
+      color: 'blue',
+    });
+  };
+
+  const columns: DataTableColumn<RecordData>[] = [
+    // add empty header column for the drag handle
+    { accessor: '', hiddenContent: true, width: 30 },
+    { accessor: 'name', width: 150 },
+    { accessor: 'streetAddress', width: 150 },
+    { accessor: 'city', width: 150 },
+    { accessor: 'state', width: 150 },
+  ];
+
+  return (
+    <DragDropContext onDragEnd={handleDragEnd}>
+      <DataTable<RecordData>
+        columns={columns}
+        records={records}
+        height={400}
+        withTableBorder
+        withColumnBorders
+        tableWrapper={({ children }) => (
+          <Droppable droppableId="datatable">
+            {(provided) => (
+              <div {...provided.droppableProps} ref={provided.innerRef}>
+                {children}
+                {provided.placeholder}
+              </div>
+            )}
+          </Droppable>
+        )}
+        styles={{ table: { tableLayout: 'fixed' } }}
+        rowFactory={({ record, index, rowProps, children }) => (
+          <Draggable key={record.id} draggableId={record.id} index={index}>
+            {(provided, snapshot) => (
+              <DataTableDraggableRow isDragging={snapshot.isDragging} {...rowProps} {...provided.draggableProps}>
+                {/** custom drag handle */}
+                <TableTd {...provided.dragHandleProps} ref={provided.innerRef}>
+                  <IconGripVertical size={16} />
+                </TableTd>
+                {children}
+              </DataTableDraggableRow>
+            )}
+          </Draggable>
+        )}
+      />
+    </DragDropContext>
+  );
+}

app/examples/row-dragging/page.tsx

@@ -0,0 +1,40 @@
+import { Code } from '@mantine/core';
+import type { Route } from 'next';
+import { PRODUCT_NAME, REPO_LINK } from '~/app/config';
+import { CodeBlock } from '~/components/CodeBlock';
+import { ExternalLink } from '~/components/ExternalLink';
+import { PageNavigation } from '~/components/PageNavigation';
+import { PageTitle } from '~/components/PageTitle';
+import { Txt } from '~/components/Txt';
+import { readCodeFile } from '~/lib/code';
+import { allPromiseProps, getRouteMetadata } from '~/lib/utils';
+import { RowDraggingExample } from './RowDraggingExample';
+
+const PATH: Route = '/examples/row-dragging';
+
+export const metadata = getRouteMetadata(PATH);
+
+export default async function BasicUsageExamplePage() {
+  const code = await allPromiseProps({
+    'RowDraggingExample.tsx': readCodeFile<string>(`${PATH}/RowDraggingExample.tsx`),
+    'companies.json': readCodeFile<string>('/../data/companies.json'),
+  });
+
+  return (
+    <>
+      <PageTitle of={PATH} />
+      <Txt>
+        Starting with <Code>v7.11.3</Code>, {PRODUCT_NAME} also supports row dragging (implemented with{' '}
+        <ExternalLink to="https://github.com/hello-pangea/dnd">@hello-pangea/dnd library</ExternalLink> in{' '}
+        <ExternalLink to={`${REPO_LINK}/pull/616`}>this PR</ExternalLink>).
+        <br />
+        Here is how you would implement it in your project:
+      </Txt>
+      <CodeBlock tabs={{ code, keys: ['RowDraggingExample.tsx', 'companies.json'] }} />
+      <Txt>The code above will produce the following result:</Txt>
+      <RowDraggingExample />
+
+      <PageNavigation of={PATH} />
+    </>
+  );
+}

data/companies.json

@@ -78,5 +78,29 @@
     "city": "West Gerry",
     "state": "KS",
     "missionStatement": "Synthesize customized portals."
+  },
+  {
+    "id": "a9c0b7f0-3a1b-4b0c-8f3d-6a6a7b7b7b7q2",
+    "name": "Kling - McLaughlin",
+    "streetAddress": "8346 Kertzmann Square",
+    "city": "South Joesph",
+    "state": "ID",
+    "missionStatement": "Reinvent cross-platform channels."
+  },
+  {
+    "id": "a9c0b7f0-3a1b-4b0c-8f3d-6a6a7b7b7b72b",
+    "name": "Jogi - McLaughlin",
+    "streetAddress": "83462 Shazam Street",
+    "city": "North Joesph",
+    "state": "ID",
+    "missionStatement": "Eliminate best-of-breed e-markets."
+  },
+  {
+    "id": "a9c0b7f0-3a1b-4b0c-8f3d-6a6af7b7b7b7b",
+    "name": "Jogi - McLaughlin",
+    "streetAddress": "83462 Shazam Street",
+    "city": "North Joesph",
+    "state": "ID",
+    "missionStatement": "Eliminate best-of-breed e-markets."
   }
 ]

package.json

@@ -75,6 +75,7 @@
     "@ducanh2912/next-pwa": "^10.2.7",
     "@faker-js/faker": "^8.4.1",
     "@formkit/auto-animate": "^0.8.2",
+    "@hello-pangea/dnd": "^16.6.0",
     "@mantine/code-highlight": "^7.11.1",
     "@mantine/core": "^7.11.1",
     "@mantine/dates": "^7.11.1",