Improve Draggable

CHANGELOG.md

@@ -7,6 +7,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- Possibility to pass isEnabled as a function depencing on the row in `createDraggableColumn`
+
+### Fixed
+
+- `createDraggableColumn` to disable draggable feature when isEnabled = false
+
 ## [6.0.0] - 2026-02-24
 
 ### Changed

src/lib/utils/createReactDataTableColumnHelper.tsx

@@ -1,6 +1,6 @@
 import { useSortable } from "@dnd-kit/sortable";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { ColumnDef, ColumnHelper, DeepKeys, DisplayColumnDef, RowData, createColumnHelper } from "@tanstack/react-table";
+import { ColumnDef, ColumnHelper, DeepKeys, DisplayColumnDef, RowData, Row, createColumnHelper } from "@tanstack/react-table";
 import { ReactNode } from "react";
 import type { DropdownColumnFilterOption } from "src/react-table";
 import { faGripLines } from "@fortawesome/free-solid-svg-icons";
@@ -14,29 +14,30 @@ interface ReactDataTableColumnHelper<TData extends RowData> extends ColumnHelper
   createDraggableColumn: (
     columnKey: DeepKeys<TData>,
     columndDef: Omit<DisplayColumnDef<TData>, "id" | "cell">,
-    isEnabled?: boolean,
+    isEnabled?: boolean | ((row: Row<TData>) => boolean),
     draggableElement?: ReactNode,
   ) => ColumnDef<TData>;
 }
 
 const createReactDataTableColumnHelper = <TData extends RowData>(): ReactDataTableColumnHelper<TData> => {
   const columnHelper = createColumnHelper<TData>();
 
-  const createDraggableColumn = (
-    columnKey: DeepKeys<TData>,
-    columndDef: Omit<DisplayColumnDef<TData>, "id" | "cell">,
-    isEnabled?: boolean,
-    draggableElement?: ReactNode,
+  const createDraggableColumn: ReactDataTableColumnHelper<TData>["createDraggableColumn"] = (
+    columnKey,
+    columndDef,
+    isEnabled,
+    draggableElement,
   ) => {
-    const RowDragHandleCell = ({ rowId }: { rowId: string }) => {
-      const { attributes, listeners, isDragging } = useSortable({ id: rowId });
+    const RowDragHandleCell = ({ row }: { row: Row<TData> }) => {
+      const isEnabledInternal = isEnabled === undefined ? true : typeof isEnabled === "function" ? isEnabled(row) : isEnabled;
+      const { attributes, listeners, isDragging } = useSortable({ id: row.id, disabled: !isEnabledInternal });
 
       return (
         <span
           {...attributes}
           {...listeners}
-          className={isEnabled === false ? "opacity-25" : "opacity-100"}
-          style={{ cursor: isEnabled === false ? "auto" : isDragging ? "grabbing" : "grab" }}
+          className={isEnabledInternal === false ? "opacity-25" : "opacity-100"}
+          style={{ cursor: isEnabledInternal === false ? "auto" : isDragging ? "grabbing" : "grab" }}
         >
           {draggableElement ?? <FontAwesomeIcon icon={faGripLines} />}
         </span>
@@ -46,7 +47,7 @@ const createReactDataTableColumnHelper = <TData extends RowData>(): ReactDataTab
     return columnHelper.display({
       ...columndDef,
       id: columnKey as string,
-      cell: ({ row }) => <RowDragHandleCell rowId={row.id} />,
+      cell: ({ row }) => <RowDragHandleCell row={row} />,
     });
   };