diff --git a/CHANGELOG.md b/CHANGELOG.md index 5f6b94a..29b2937 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/src/lib/utils/createReactDataTableColumnHelper.tsx b/src/lib/utils/createReactDataTableColumnHelper.tsx index d4db013..fdcf917 100644 --- a/src/lib/utils/createReactDataTableColumnHelper.tsx +++ b/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,7 +14,7 @@ interface ReactDataTableColumnHelper extends ColumnHelper createDraggableColumn: ( columnKey: DeepKeys, columndDef: Omit, "id" | "cell">, - isEnabled?: boolean, + isEnabled?: boolean | ((row: Row) => boolean), draggableElement?: ReactNode, ) => ColumnDef; } @@ -22,21 +22,22 @@ interface ReactDataTableColumnHelper extends ColumnHelper const createReactDataTableColumnHelper = (): ReactDataTableColumnHelper => { const columnHelper = createColumnHelper(); - const createDraggableColumn = ( - columnKey: DeepKeys, - columndDef: Omit, "id" | "cell">, - isEnabled?: boolean, - draggableElement?: ReactNode, + const createDraggableColumn: ReactDataTableColumnHelper["createDraggableColumn"] = ( + columnKey, + columndDef, + isEnabled, + draggableElement, ) => { - const RowDragHandleCell = ({ rowId }: { rowId: string }) => { - const { attributes, listeners, isDragging } = useSortable({ id: rowId }); + const RowDragHandleCell = ({ row }: { row: Row }) => { + const isEnabledInternal = isEnabled === undefined ? true : typeof isEnabled === "function" ? isEnabled(row) : isEnabled; + const { attributes, listeners, isDragging } = useSortable({ id: row.id, disabled: !isEnabledInternal }); return ( {draggableElement ?? } @@ -46,7 +47,7 @@ const createReactDataTableColumnHelper = (): ReactDataTab return columnHelper.display({ ...columndDef, id: columnKey as string, - cell: ({ row }) => , + cell: ({ row }) => , }); };