[WC-1784] DG: Column drag and drop enhancements

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

@@ -30,43 +30,6 @@ $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: $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%);
-            }
-        }
-
         /* Clickable column header (Sortable) */
         .clickable {
             cursor: pointer;
@@ -78,6 +41,8 @@ $root: ".widget-datagrid";
             align-self: stretch;
             cursor: col-resize;
             margin-right: -12px;
+            margin-top: calc(0px - var(--spacing-medium, 16px));
+            margin-bottom: calc(0px - var(--spacing-medium, 16px));
 
             &:hover .column-resizer-bar {
                 background-color: var(--brand-primary, $brand-primary);
@@ -92,6 +57,70 @@ $root: ".widget-datagrid";
             }
         }
 
+        &.locked-drag-active {
+            z-index: 2;
+        }
+
+        &.dragging-over-self {
+            opacity: 0.25;
+        }
+
+        /* Drag handle */
+        .drag-handle {
+            cursor: grab;
+            pointer-events: auto;
+            position: relative;
+            width: var(--spacing-medium, $spacing-medium);
+            padding: 0;
+            flex-grow: 0;
+            flex-shrink: 0;
+            display: flex;
+            justify-content: center;
+            align-self: center;
+            z-index: 1;
+            opacity: 0;
+            transition: opacity 0.15s ease;
+
+            &:hover {
+                svg {
+                    color: var(--brand-primary, $brand-primary);
+                }
+            }
+            &:active {
+                cursor: grabbing;
+            }
+            &:focus-visible {
+                opacity: 1;
+            }
+            > svg {
+                margin: 0;
+            }
+        }
+
+        &:hover .drag-handle {
+            opacity: 1;
+        }
+
+        /* Parent background change on drag handle hover */
+        &:has(.drag-handle:hover) {
+            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);
+                }
+            }
+        }
+
         /* Content of the column header */
         .column-container {
             display: flex;
@@ -114,7 +143,7 @@ $root: ".widget-datagrid";
             align-items: baseline;
             font-weight: 600;
 
-            span {
+            span:not(.drag-handle) {
                 min-width: 0;
                 flex-grow: 1;
                 text-overflow: ellipsis;
@@ -124,7 +153,7 @@ $root: ".widget-datagrid";
             }
 
             svg {
-                margin-left: 8px;
+                margin-inline-start: 8px;
                 flex: 0 0 var(--btn-font-size, $btn-font-size);
                 color: var(--gray-dark, $gray-dark);
                 height: var(--btn-font-size, $btn-font-size);
@@ -138,12 +167,22 @@ $root: ".widget-datagrid";
             &:focus-visible {
                 outline: 1px solid var(--brand-primary, $brand-primary);
             }
+
+            &:has(.drag-handle) {
+                margin-inline-start: calc(var(--spacing-medium, $spacing-medium) * -1);
+                svg {
+                    flex: none;
+                    margin: 0;
+                }
+            }
         }
 
         /* Header filter */
         .filter {
             display: flex;
-            margin-top: 4px;
+            > * {
+                margin-top: 4px;
+            }
             > .form-group {
                 margin-bottom: 0;
             }
@@ -301,6 +340,12 @@ $root: ".widget-datagrid";
     }
 }
 
+.table-compact .table .th:hover .column-header:has(.drag-handle),
+.table-compact .table .th.drag-preview .column-header:has(.drag-handle) {
+    margin-inline-start: 0;
+    transition: margin-inline-start 0.2s ease;
+}
+
 :where(.table .th .filter input:not([type="checkbox"])) {
     font-weight: normal;
     flex-grow: 1;

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;
@@ -33,7 +34,7 @@ $spacing-larger: 32px !default;
 $gallery-gap: $spacing-small !default;
 
 // Effects and animations
-$dragging-color-effect: rgba(10, 19, 37, 0.8) !default;
+$dragging-color-effect: $brand-primary !default;
 $skeleton-background: linear-gradient(90deg, rgba(194, 194, 194, 0.2) 0%, #d2d2d2 100%) !default;
 
 // Assets

packages/pluggableWidgets/datagrid-web/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Breaking changes
+
+- The DOM structure is rewritten, which may break existing CSS styling. We recommend checking the custom styling if there is any in your project.
+
 ### Fixed
 
 - We added missing Dutch translations for Datagrid 2.

packages/pluggableWidgets/datagrid-web/e2e/DataGrid.spec.js

@@ -49,26 +49,23 @@ test.describe("capabilities: sorting", () => {
         await page.goto("/");
         await page.waitForLoadState("networkidle");
         await expect(page.locator(".mx-name-datagrid1 .column-header").nth(1)).toHaveText("First Name");
-        await expect(page.locator(".mx-name-datagrid1 .column-header").nth(1).locator("svg")).toHaveAttribute(
-            "data-icon",
-            "arrows-alt-v"
-        );
+        await expect(
+            page.locator(".mx-name-datagrid1 .column-header").nth(1).locator("svg[data-icon='arrows-alt-v']")
+        ).toBeVisible();
         await expect(page.getByRole("gridcell", { name: "12" }).first()).toHaveText("12");
     });
 
     test("changes order of data to ASC when clicking sort option", async ({ page }) => {
         await page.goto("/");
         await page.waitForLoadState("networkidle");
         await expect(page.locator(".mx-name-datagrid1 .column-header").nth(1)).toHaveText("First Name");
-        await expect(page.locator(".mx-name-datagrid1 .column-header").nth(1).locator("svg")).toHaveAttribute(
-            "data-icon",
-            "arrows-alt-v"
-        );
+        await expect(
+            page.locator(".mx-name-datagrid1 .column-header").nth(1).locator("svg[data-icon='arrows-alt-v']")
+        ).toBeVisible();
         await page.locator(".mx-name-datagrid1 .column-header").nth(1).click();
-        await expect(page.locator(".mx-name-datagrid1 .column-header").nth(1).locator("svg")).toHaveAttribute(
-            "data-icon",
-            "long-arrow-alt-up"
-        );
+        await expect(
+            page.locator(".mx-name-datagrid1 .column-header").nth(1).locator("svg[data-icon='long-arrow-alt-up']")
+        ).toBeVisible();
         await expect(page.getByRole("gridcell", { name: "10" }).first()).toHaveText("10");
     });
 
@@ -78,10 +75,9 @@ test.describe("capabilities: sorting", () => {
         await expect(page.locator(".mx-name-datagrid1 .column-header").nth(1)).toHaveText("First Name");
         await page.locator(".mx-name-datagrid1 .column-header").nth(1).click();
         await page.locator(".mx-name-datagrid1 .column-header").nth(1).click();
-        await expect(page.locator(".mx-name-datagrid1 .column-header").nth(1).locator("svg")).toHaveAttribute(
-            "data-icon",
-            "long-arrow-alt-down"
-        );
+        await expect(
+            page.locator(".mx-name-datagrid1 .column-header").nth(1).locator("svg[data-icon='long-arrow-alt-down']")
+        ).toBeVisible();
         await expect(page.getByRole("gridcell", { name: "12" }).first()).toHaveText("12");
     });
 });

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

@@ -7,6 +7,7 @@ import { ColumnsPreviewType, DatagridPreviewProps } from "typings/DatagridProps"
 import { FaArrowsAltV } from "./components/icons/FaArrowsAltV";
 import { FaEye } from "./components/icons/FaEye";
 import { ColumnPreview } from "./helpers/ColumnPreview";
+
 import "./ui/DatagridPreview.scss";
 
 declare module "mendix/preview/Selectable" {

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

@@ -0,0 +1,67 @@
+import classNames from "classnames";
+import { ReactElement } from "react";
+import { ColumnHeader } from "./ColumnHeader";
+import { useColumn, useColumnsStore, useDatagridConfig, useHeaderDndVM } from "../model/hooks/injection-hooks";
+import { ColumnResizerProps } from "./ColumnResizer";
+import { observer } from "mobx-react-lite";
+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 columnsStore = useColumnsStore();
+    const { columnFilters } = columnsStore;
+    const column = useColumn();
+    const { canSort, columnId, columnIndex, canResize, sortDir, header } = column;
+    const caption = header.trim();
+    const vm = useHeaderDndVM();
+    const { setNodeRef, transform, transition, isDragging } = useSortable({
+        id: columnId
+    });
+    const style = vm.getHeaderCellStyle(columnId, { transform, transition });
+    const isLocked = !column.canDrag;
+
+    return (
+        <div
+            aria-sort={getAriaSort(canSort, sortDir)}
+            className={classNames("th", {
+                "dragging-over-self": isDragging,
+                "locked-drag-active": isLocked && vm.isDragging
+            })}
+            role="columnheader"
+            style={style}
+            title={caption}
+            ref={setNodeRef}
+            data-column-id={columnId}
+        >
+            <div className={classNames("column-container")} id={`${gridId}-column${columnId}`}>
+                <ColumnHeader />
+                {columnsFilterable && (
+                    <div className="filter" style={{ pointerEvents: vm.isDragging ? "none" : undefined }}>
+                        {columnFilters[columnIndex]?.renderFilterWidgets()}
+                    </div>
+                )}
+            </div>
+            {canResize ? props.resizer : null}
+        </div>
+    );
+});
+
+function getAriaSort(canSort: boolean, sortDir: string | undefined): "ascending" | "descending" | "none" | undefined {
+    if (!canSort) {
+        return undefined;
+    }
+
+    switch (sortDir) {
+        case "asc":
+            return "ascending";
+        case "desc":
+            return "descending";
+        default:
+            return "none";
+    }
+}