refactor: enhance and customize DnDrop interaction for column reordering using dnd-kit library

Author: yordan-st

packages/modules/data-widgets/src/themesource/datawidgets/web/_datagrid.scss

@@ -30,41 +30,8 @@ $root: ".widget-datagrid";
     }
 
     .th {
-        &.dragging {
-            opacity: 0.5;
-            &.dragging-over-self {
-                opacity: 0.8;
-            }
-        }
-
-        &.drop-after:after,
-        &.drop-before:after {
-            content: "";
-            position: absolute;
-            top: 0;
-            height: 100%;
-            width: var(--spacing-smaller, $spacing-smaller);
-            background-color: var(--brand-primary, $dragging-color-effect);
-
-            z-index: 1;
-        }
-
-        &.drop-before {
-            &:after {
-                left: 0;
-            }
-            &:not(:first-child):after {
-                transform: translateX(-50%);
-            }
-        }
-
-        &.drop-after {
-            &:after {
-                right: 0;
-            }
-            &:not(:last-child):after {
-                transform: translateX(50%);
-            }
+        &.dragging-over-self {
+            opacity: 0.8;
         }
 
         /* Clickable column header (Sortable) */
@@ -97,19 +64,17 @@ $root: ".widget-datagrid";
             cursor: grab;
             pointer-events: auto;
             position: relative;
-            padding: 4px;
-            // margin-inline-end: 4px;
+            padding: 12px 4px 4px 4px;
             flex-grow: 0;
             flex-shrink: 0;
             display: flex;
             justify-content: center;
-            align-self: normal;
+            align-self: flex-start;
             z-index: 1;
             opacity: 0;
             transition: opacity 0.15s ease;
 
             &:hover {
-                // background-color: var(--brand-primary-50, $brand-light);
                 svg {
                     color: var(--brand-primary, $brand-primary);
                 }
@@ -126,6 +91,14 @@ $root: ".widget-datagrid";
             }
         }
 
+        &.locked-drag-active {
+            z-index: 2;
+        }
+
+        &.dragging-over-self {
+            opacity: 0.25;
+        }
+
         &:hover .drag-handle,
         &:focus-within .drag-handle {
             opacity: 1;
@@ -136,6 +109,21 @@ $root: ".widget-datagrid";
             background-color: var(--brand-primary-50, $brand-light);
         }
 
+        /* Drag preview (dnd-kit) should look like hovered header */
+        &.drag-preview {
+            background-color: var(--brand-primary-50, $brand-light);
+            box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+            border: 1px solid var(--gray-light, $gray-light);
+
+            .drag-handle {
+                opacity: 1;
+
+                svg {
+                    color: var(--brand-primary, $brand-primary);
+                }
+            }
+        }
+
         /* Remove left padding when drag handle is present */
         &:has(.drag-handle) {
             padding-left: 0;
@@ -193,7 +181,9 @@ $root: ".widget-datagrid";
         /* Header filter */
         .filter {
             display: flex;
-            margin-top: 4px;
+            > * {
+                margin-top: 4px;
+            }
             > .form-group {
                 margin-bottom: 0;
             }

packages/modules/data-widgets/src/themesource/datawidgets/web/variables.scss

@@ -13,6 +13,7 @@ $brand-light: #e6eaff !default;
 $grid-selected-row-background: $brand-light !default;
 
 // Text and icon colors
+$gray-light: #6c7180 !default;
 $gray-dark: #606671 !default;
 $gray-darker: #3b4251 !default;
 $pagination-caption-color: #0a1325 !default;

packages/pluggableWidgets/datagrid-web/package.json

@@ -41,6 +41,9 @@
         "verify": "rui-verify-package-format"
     },
     "dependencies": {
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2",
         "@floating-ui/react": "^0.26.27",
         "@mendix/widget-plugin-component-kit": "workspace:*",
         "@mendix/widget-plugin-external-events": "workspace:*",

packages/pluggableWidgets/datagrid-web/src/Datagrid.editorPreview.tsx

@@ -4,7 +4,6 @@ import { GUID, ObjectItem } from "mendix";
 import { Selectable } from "mendix/preview/Selectable";
 import { createContext, CSSProperties, PropsWithChildren, ReactElement, ReactNode, useContext } from "react";
 import { ColumnsPreviewType, DatagridPreviewProps } from "typings/DatagridProps";
-import { DragHandle } from "./components/DragHandle";
 import { FaArrowsAltV } from "./components/icons/FaArrowsAltV";
 import { FaEye } from "./components/icons/FaEye";
 import { ColumnPreview } from "./helpers/ColumnPreview";
@@ -159,7 +158,7 @@ function GridHeader(): ReactNode {
 }
 
 function ColumnHeader({ column }: { column: ColumnsPreviewType }): ReactNode {
-    const { columnsFilterable, columnsSortable, columnsHidable, columnsDraggable } = useProps();
+    const { columnsFilterable, columnsSortable, columnsHidable } = useProps();
     const columnPreview = new ColumnPreview(column, 0);
     const caption = columnPreview.header;
     const canSort = columnsSortable && columnPreview.canSort;
@@ -174,9 +173,6 @@ function ColumnHeader({ column }: { column: ColumnsPreviewType }): ReactNode {
             >
                 <div className="column-container">
                     <div className="column-header">
-                        {columnsDraggable && columnPreview.canDrag && (
-                            <DragHandle draggable={false} onDragStart={() => {}} onDragEnd={() => {}} />
-                        )}
                         <span>{caption.length > 0 ? caption : "\u00a0"}</span>
                         {canSort && <FaArrowsAltV />}
                     </div>

packages/pluggableWidgets/datagrid-web/src/components/ColumnContainer.tsx

@@ -1,48 +1,57 @@
 import classNames from "classnames";
 import { ReactElement } from "react";
 import { ColumnHeader } from "./ColumnHeader";
-import { useColumn, useColumnsStore, useDatagridConfig, useHeaderDragnDropVM } from "../model/hooks/injection-hooks";
+import { useColumn, useColumnsStore, useDatagridConfig, useHeaderDndVM } from "../model/hooks/injection-hooks";
 import { ColumnResizerProps } from "./ColumnResizer";
 import { observer } from "mobx-react-lite";
 import { DragHandle } from "./DragHandle";
+import { useSortable } from "@dnd-kit/sortable";
 
 export interface ColumnContainerProps {
     isLast?: boolean;
     resizer: ReactElement<ColumnResizerProps>;
 }
 
 export const ColumnContainer = observer(function ColumnContainer(props: ColumnContainerProps): ReactElement {
-    const { columnsFilterable, id: gridId } = useDatagridConfig();
-    const { columnFilters } = useColumnsStore();
+    const { columnsFilterable, columnsDraggable, id: gridId } = useDatagridConfig();
+    const columnsStore = useColumnsStore();
+    const { columnFilters } = columnsStore;
     const column = useColumn();
     const { canSort, columnId, columnIndex, canResize, sortDir, header } = column;
-    const vm = useHeaderDragnDropVM();
     const caption = header.trim();
+    const vm = useHeaderDndVM();
+    const isDndEnabled = Boolean(columnsDraggable && column.canDrag);
+    const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
+        id: columnId,
+        disabled: !isDndEnabled
+    });
+    const setHeaderRef = (ref: HTMLDivElement | null): void => {
+        column.setHeaderElementRef(ref);
+        setNodeRef(ref);
+    };
+    const style = vm.getHeaderCellStyle(columnId, { transform, transition });
+    const isLocked = !column.canDrag;
 
     return (
         <div
             aria-sort={getAriaSort(canSort, sortDir)}
             className={classNames("th", {
-                [`drop-${vm.dropTarget?.[1]}`]: columnId === vm.dropTarget?.[0],
-                dragging: columnId === vm.dragging?.[1],
-                "dragging-over-self": columnId === vm.dragging?.[1] && !vm.dropTarget
+                "dragging-over-self": isDragging,
+                "locked-drag-active": isLocked && vm.isDragging
             })}
             role="columnheader"
-            style={!canSort ? { cursor: "unset" } : undefined}
+            style={style}
             title={caption}
-            ref={ref => column.setHeaderElementRef(ref)}
+            ref={setHeaderRef}
             data-column-id={columnId}
-            onDrop={vm.isDraggable ? vm.handleOnDrop : undefined}
-            onDragEnter={vm.isDraggable ? vm.handleDragEnter : undefined}
-            onDragOver={vm.isDraggable ? vm.handleDragOver : undefined}
         >
-            {vm.isDraggable && (
-                <DragHandle draggable={vm.isDraggable} onDragStart={vm.handleDragStart} onDragEnd={vm.handleDragEnd} />
+            {isDndEnabled && (
+                <DragHandle setActivatorNodeRef={setActivatorNodeRef} listeners={listeners} attributes={attributes} />
             )}
             <div className={classNames("column-container")} id={`${gridId}-column${columnId}`}>
                 <ColumnHeader />
                 {columnsFilterable && (
-                    <div className="filter" style={{ pointerEvents: vm.dragging ? "none" : undefined }}>
+                    <div className="filter" style={{ pointerEvents: vm.isDragging ? "none" : undefined }}>
                         {columnFilters[columnIndex]?.renderFilterWidgets()}
                     </div>
                 )}

packages/pluggableWidgets/datagrid-web/src/components/ColumnHeader.tsx

@@ -3,7 +3,7 @@ import { HTMLAttributes, KeyboardEvent, ReactElement, ReactNode } from "react";
 import { FaArrowsAltV } from "./icons/FaArrowsAltV";
 import { FaLongArrowAltDown } from "./icons/FaLongArrowAltDown";
 import { FaLongArrowAltUp } from "./icons/FaLongArrowAltUp";
-import { useColumn, useHeaderDragnDropVM } from "../model/hooks/injection-hooks";
+import { useColumn, useHeaderDndVM } from "../model/hooks/injection-hooks";
 import { observer } from "mobx-react-lite";
 import { SortDirection } from "../typings/sorting";
 
@@ -16,12 +16,12 @@ export const ColumnHeader = observer(function ColumnHeader(): ReactElement {
     const { header, canSort, alignment } = column;
     const caption = header.trim();
     const sortProps = canSort ? getSortProps(() => column.toggleSort()) : null;
-    const vm = useHeaderDragnDropVM();
+    const vm = useHeaderDndVM();
 
     return (
         <div
             className={classNames("column-header", { clickable: canSort }, `align-column-${alignment}`)}
-            style={{ pointerEvents: vm.dragging ? "none" : undefined }}
+            style={{ pointerEvents: vm.isDragging ? "none" : undefined }}
             {...sortProps}
             aria-label={canSort ? "sort " + caption : caption}
         >

packages/pluggableWidgets/datagrid-web/src/components/ColumnHeaderDragPreview.tsx

@@ -0,0 +1,40 @@
+import classNames from "classnames";
+import { ReactElement } from "react";
+import { useColumn, useColumnsStore, useDatagridConfig } from "../model/hooks/injection-hooks";
+import { ColumnHeader } from "./ColumnHeader";
+import { DragHandleIcon } from "./DragHandleIcon";
+
+/**
+ * Drag preview content for column header reordering.
+ *
+ * Rendered by @dnd-kit DragOverlay in a portal, so we provide the same selector context
+ * used by the datagrid SCSS to make it look like a real header.
+ */
+export function ColumnHeaderDragPreview(): ReactElement {
+    const { columnsFilterable, id: gridId } = useDatagridConfig();
+    const { columnFilters } = useColumnsStore();
+    const column = useColumn();
+    const { columnId, columnIndex, header, size } = column;
+    const caption = header.trim();
+
+    return (
+        <div className="widget-datagrid">
+            <div className="widget-datagrid-grid table">
+                <div
+                    className={classNames("th", "drag-preview")}
+                    role="presentation"
+                    title={caption}
+                    style={size ? { width: `${size}px` } : undefined}
+                >
+                    <DragHandleIcon />
+                    <div className={classNames("column-container")} id={`${gridId}-column${columnId}`}>
+                        <ColumnHeader />
+                        {columnsFilterable && (
+                            <div className="filter">{columnFilters[columnIndex]?.renderFilterWidgets()}</div>
+                        )}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}

packages/pluggableWidgets/datagrid-web/src/components/DragHandle.tsx

@@ -1,45 +1,15 @@
-import { DragEvent, DragEventHandler, MouseEvent, ReactElement } from "react";
+import { ReactElement } from "react";
+import { DraggableAttributes, DraggableSyntheticListeners } from "@dnd-kit/core";
 import { FaGripVertical } from "./icons/FaGripVertical";
 
 interface DragHandleProps {
-    draggable: boolean;
-    onDragStart?: DragEventHandler<HTMLSpanElement>;
-    onDragEnd?: DragEventHandler<HTMLSpanElement>;
+    setActivatorNodeRef: (element: HTMLElement | null) => void;
+    listeners?: DraggableSyntheticListeners;
+    attributes?: DraggableAttributes;
 }
-export function DragHandle({ draggable, onDragStart, onDragEnd }: DragHandleProps): ReactElement {
-    const handleMouseDown = (e: MouseEvent<HTMLSpanElement>): void => {
-        // Only stop propagation, don't prevent default - we need default for drag to work
-        e.stopPropagation();
-    };
-
-    const handleClick = (e: MouseEvent<HTMLSpanElement>): void => {
-        // Stop click events from bubbling to prevent sorting
-        e.stopPropagation();
-        e.preventDefault();
-    };
-
-    const handleDragStart = (e: DragEvent<HTMLSpanElement>): void => {
-        // Don't stop propagation here - let the drag start properly
-        if (onDragStart) {
-            onDragStart(e);
-        }
-    };
-
-    const handleDragEnd = (e: DragEvent<HTMLSpanElement>): void => {
-        if (onDragEnd) {
-            onDragEnd(e);
-        }
-    };
-
+export function DragHandle({ setActivatorNodeRef, listeners, attributes }: DragHandleProps): ReactElement {
     return (
-        <span
-            className="drag-handle"
-            draggable={draggable}
-            onDragStart={handleDragStart}
-            onDragEnd={handleDragEnd}
-            onMouseDown={handleMouseDown}
-            onClick={handleClick}
-        >
+        <span className="drag-handle" ref={setActivatorNodeRef} {...attributes} {...listeners}>
             <FaGripVertical />
         </span>
     );

packages/pluggableWidgets/datagrid-web/src/components/DragHandleIcon.tsx

@@ -0,0 +1,15 @@
+import { ReactElement } from "react";
+import { FaGripVertical } from "./icons/FaGripVertical";
+
+/**
+ * Visual-only drag handle.
+ *
+ * For preview purposes only; does not implement drag-and-drop functionality.
+ */
+export function DragHandleIcon(): ReactElement {
+    return (
+        <span className="drag-handle" aria-hidden="true">
+            <FaGripVertical />
+        </span>
+    );
+}