mendix · yordan-st · Nov 20, 2025 · Nov 20, 2025 · Nov 20, 2025 · Nov 20, 2025
@@ -22,49 +22,16 @@ $root: ".widget-datagrid";
             background-color: var(--bg-color-secondary, $bg-color-secondary);
             border-width: 0;
             border-color: var(--grid-border-color, $grid-border-color);
-            padding: var(--spacing-medium, $spacing-medium);
+            padding: 0 var(--spacing-medium, $spacing-medium);
             top: 0;
             min-width: 0;
             position: relative;
         }
     }
 
     .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%);
-            }
+        &.dragging-over-self {
+            opacity: 0.8;
         }
 
         /* Clickable column header (Sortable) */
@@ -92,13 +59,84 @@ $root: ".widget-datagrid";
             }
         }
 
+        /* Drag handle */
+        .drag-handle {
+            cursor: grab;
+            pointer-events: auto;
+            position: relative;
+            padding: 12px 4px 4px 4px;
+            flex-grow: 0;
+            flex-shrink: 0;
+            display: flex;
+            justify-content: center;
+            align-self: flex-start;
+            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;
+                width: 8px;
+            }
+        }
+
+        &.locked-drag-active {
+            z-index: 2;
+        }
+
+        &.dragging-over-self {
+            opacity: 0.25;
+        }
+
+        &:hover .drag-handle,
+        &:focus-within .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);
+                }
+            }
+        }
+
+        /* Remove left padding when drag handle is present */
+        &:has(.drag-handle) {
+            padding-left: 0;
+        }
+
         /* Content of the column header */
         .column-container {
             display: flex;
             flex-direction: column;
             flex-grow: 1;
             align-self: stretch;
             min-width: 0;
+            padding: var(--spacing-small, $spacing-small) 0;
 
             &:not(:has(.filter)) {
                 .column-header {
@@ -143,7 +181,9 @@ $root: ".widget-datagrid";
         /* Header filter */
         .filter {
             display: flex;
-            margin-top: 4px;
+            > * {
+                margin-top: 4px;
+            }
             > .form-group {
                 margin-bottom: 0;
             }

@@ -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

@@ -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");
     });
 });

@@ -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:*",

@@ -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" {

@@ -0,0 +1,77 @@
+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 { 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, columnsDraggable, 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 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", {
+                "dragging-over-self": isDragging,
+                "locked-drag-active": isLocked && vm.isDragging
+            })}
+            role="columnheader"
+            style={style}
+            title={caption}
+            ref={setHeaderRef}
+            data-column-id={columnId}
+        >
+            {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.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";
+    }
+}
@@ -0,0 +1,59 @@
+import classNames from "classnames";
+import { HTMLAttributes, KeyboardEvent, ReactElement, ReactNode } from "react";
+import { FaArrowsAltV } from "./icons/FaArrowsAltV";
+import { FaLongArrowAltDown } from "./icons/FaLongArrowAltDown";
+import { FaLongArrowAltUp } from "./icons/FaLongArrowAltUp";
+import { useColumn, useHeaderDndVM } from "../model/hooks/injection-hooks";
+import { observer } from "mobx-react-lite";
+import { SortDirection } from "../typings/sorting";
+
+interface SortIconProps {
+    direction: SortDirection | undefined;
+}
+
+export const ColumnHeader = observer(function ColumnHeader(): ReactElement {
+    const column = useColumn();
+    const { header, canSort, alignment } = column;
+    const caption = header.trim();
+    const sortProps = canSort ? getSortProps(() => column.toggleSort()) : null;
+    const vm = useHeaderDndVM();
+
+    return (
+        <div
+            className={classNames("column-header", { clickable: canSort }, `align-column-${alignment}`)}
+            style={{ pointerEvents: vm.isDragging ? "none" : undefined }}
+            {...sortProps}
+            aria-label={canSort ? "sort " + caption : caption}
+        >
+            <span className="column-caption">{caption.length > 0 ? caption : "\u00a0"}</span>
+            {canSort ? <SortIcon direction={column.sortDir} /> : null}
+        </div>
+    );
+});
+
+function SortIcon({ direction }: SortIconProps): ReactNode {
+    switch (direction) {
+        case "asc":
+            return <FaLongArrowAltUp />;
+        case "desc":
+            return <FaLongArrowAltDown />;
+        default:
+            return <FaArrowsAltV />;
+    }
+}
+
+function getSortProps(toggleSort: () => void): HTMLAttributes<HTMLDivElement> {
+    return {
+        onClick: () => {
+            toggleSort();
+        },
+        onKeyDown: (e: KeyboardEvent<HTMLDivElement>) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                toggleSort();
+            }
+        },
+        role: "button",
+        tabIndex: 0
+    };
+}