Drag-and-Drop feature (#59)

This PR is related to an implementation of draggability rows feature on
the current table.

1. It relies on `dnd-kit` package
2. It exposes a `dragAndDropOptions` object to the
`ReactDataTableProps`, which could be also enriched in the future with
more properties.
3. It allows to externally define the "draggable" column, so that it can
be moved and styled as the consumer wish.

Author: Michele-Masciave

CHANGELOG.md

@@ -9,6 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- option `dragAndDropOptions` to enable drag-and-drop rows via `@dnd-kit` package.
+
+### Added
+
 - option `cellClassName` added to the column meta to add class names to every cell of a column
 - option `headerClassName` added to the column meta to add class names to every header of a column
 - option `footerStyle` added to the column meta to add styles to every footer of a column

package.json

@@ -46,6 +46,9 @@
     "tsc": "tsc"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/modifiers": "^7.0.0",
+    "@dnd-kit/sortable": "^8.0.0",
     "@neolution-ch/react-pattern-ui": "^3.4.0",
     "@tanstack/react-table": "^8.10.7",
     "react-loading-skeleton": "^3.3.1"

src/lib/ReactDataTable/DragAndDropOptions.ts

@@ -0,0 +1,16 @@
+import { DragEndEvent } from "@dnd-kit/core/dist/types/events";
+
+/**
+ * The props for the dragAndDropOptions
+ */
+export interface DragAndDropOptions {
+  /**
+   * enable or disable the drag-and-drop feature.
+   */
+  enableDragAndDrop: boolean;
+  /**
+   * the handle drag end method to be called once the row drag has fulfilled
+   * @param event the drag end event
+   */
+  onDragEnd(event: DragEndEvent): void;
+}

src/lib/ReactDataTable/ReactDataTable.tsx

@@ -1,5 +1,6 @@
 import { ColumnFiltersState, Table } from "@tanstack/react-table";
 import { CSSProperties } from "react";
+import { DragAndDropOptions } from "./DragAndDropOptions";
 
 /**
  * The props for the ReactDataTable component
@@ -72,7 +73,12 @@ export interface ReactDataTableProps<TData> {
   withoutHeaders?: boolean;
 
   /**
-   * To draw the table without headers filters
+   * to draw the table without headers filters
    */
   withoutHeaderFilters?: boolean;
+
+  /**
+   * to define drag-and-drop options
+   */
+  dragAndDropOptions?: DragAndDropOptions;
 }

src/lib/ReactDataTable/ReactDataTableProps.ts

@@ -0,0 +1,38 @@
+import { useSortable } from "@dnd-kit/sortable";
+import { Row, flexRender } from "@tanstack/react-table";
+import { CSSProperties } from "react";
+import { CSS } from "@dnd-kit/utilities";
+
+interface TableRowProps<TData> {
+  row: Row<TData>;
+  rowStyle?: CSSProperties;
+  setNodeRef?: (node: HTMLElement | null) => void;
+}
+
+const InternalTableRow = <TData,>(props: TableRowProps<TData>) => {
+  const { row, rowStyle, setNodeRef } = props;
+  return (
+    <tr key={row.id} ref={setNodeRef} style={rowStyle}>
+      {row.getVisibleCells().map((cell) => (
+        <td key={cell.id} style={cell.column.columnDef.meta?.cellStyle} className={cell.column.columnDef.meta?.cellClassName}>
+          {flexRender(cell.column.columnDef.cell, cell.getContext())}
+        </td>
+      ))}
+    </tr>
+  );
+};
+
+const DraggableRow = <TData,>(props: TableRowProps<TData>) => {
+  const { row, rowStyle } = props;
+  const { transform, transition, setNodeRef, isDragging } = useSortable({ id: row.id });
+  const draggableStyle: CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition: transition,
+    opacity: isDragging ? 0.8 : 1,
+    zIndex: isDragging ? 1 : 0,
+    position: "relative",
+  };
+  return <InternalTableRow row={row} setNodeRef={setNodeRef} rowStyle={rowStyle ? { ...rowStyle, ...draggableStyle } : draggableStyle} />;
+};
+
+export { InternalTableRow, DraggableRow };

src/lib/ReactDataTable/TableRows.tsx

@@ -1,21 +1,60 @@
-import { ColumnDef, ColumnHelper, DeepKeys, RowData, createColumnHelper } from "@tanstack/react-table";
+import { useSortable } from "@dnd-kit/sortable";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ColumnDef, ColumnHelper, DeepKeys, DisplayColumnDef, RowData, createColumnHelper } from "@tanstack/react-table";
+import { ReactNode } from "react";
 import { DropdownColumnFilterOption } from "src/react-table";
+import { faGripLines } from "@fortawesome/free-solid-svg-icons";
 
 interface ReactDataTableColumnHelper<TData extends RowData> extends ColumnHelper<TData> {
   createEnumColumn: <TEnum extends string | number>(
     columnKey: DeepKeys<TData>,
     enumTranslations: Record<TEnum, string> | DropdownColumnFilterOption[],
     columndDef?: Partial<ColumnDef<TData, TEnum>>,
   ) => ColumnDef<TData, TEnum>;
+  createDraggableColumn: (
+    columnKey: DeepKeys<TData>,
+    columndDef: Omit<DisplayColumnDef<TData>, "id" | "cell">,
+    isEnabled?: boolean,
+    draggableElement?: ReactNode,
+  ) => ColumnDef<TData>;
 }
 
 const createReactDataTableColumnHelper = <TData extends RowData>(): ReactDataTableColumnHelper<TData> => {
   const columnHelper = createColumnHelper<TData>();
 
   columnHelper.accessor;
 
+  const createDraggableColumn = (
+    columnKey: DeepKeys<TData>,
+    columndDef: Omit<DisplayColumnDef<TData>, "id" | "cell">,
+    isEnabled?: boolean,
+    draggableElement?: ReactNode,
+  ) => {
+    const RowDragHandleCell = ({ rowId }: { rowId: string }) => {
+      const { attributes, listeners, isDragging } = useSortable({ id: rowId });
+
+      return (
+        <span
+          {...attributes}
+          {...listeners}
+          className={isEnabled === false ? "opacity-25" : "opacity-100"}
+          style={{ cursor: isEnabled === false ? "auto" : isDragging ? "grabbing" : "grab" }}
+        >
+          {draggableElement ?? <FontAwesomeIcon icon={faGripLines} />}
+        </span>
+      );
+    };
+
+    return columnHelper.display({
+      ...columndDef,
+      id: columnKey as string,
+      cell: ({ row }) => <RowDragHandleCell rowId={row.id} />,
+    });
+  };
+
   const res: ReactDataTableColumnHelper<TData> = {
     ...columnHelper,
+    createDraggableColumn,
     createEnumColumn: (columnKey, enumTranslations, columndDef) =>
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       columnHelper.accessor(columnKey as any, {

…tils/createReactDataTableColumnHelper.ts …ils/createReactDataTableColumnHelper.tsxsrc/lib/utils/createReactDataTableColumnHelper.ts renamed to src/lib/utils/createReactDataTableColumnHelper.tsx src/lib/utils/createReactDataTableColumnHelper.ts renamed to src/lib/utils/createReactDataTableColumnHelper.tsx

@@ -184,4 +184,37 @@ describe("DataTable", () => {
 
     expect(container).toMatchSnapshot();
   });
+
+  test("renders with draggable-column correctly", () => {
+    const {
+      result: {
+        current: { table },
+      },
+    } = renderHook(() =>
+      useReactDataTable({
+        data: dataDynamic,
+        isLoading: false,
+        columns,
+        reactTableOptions: {
+          enableSortingRemoval: false,
+          getRowId: (row) => row.id,
+        },
+      }),
+    );
+    const { container } = render(
+      <ReactDataTable
+        table={table}
+        showPaging
+        totalRecords={dataDynamic?.length}
+        isFetching={false}
+        isLoading={false}
+        dragAndDropOptions={{
+          enableDragAndDrop: true,
+          onDragEnd: () => true,
+        }}
+      />,
+    );
+
+    expect(container).toMatchSnapshot();
+  });
 });