chore: fix sizing, use fractional pixels

Author: r0b1n

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

@@ -411,14 +411,6 @@ $root: ".widget-datagrid";
         overflow-x: auto;
     }
 
-    &-grid-head {
-        display: contents;
-    }
-
-    &-grid-body {
-        display: contents;
-    }
-
     &-footer {
         container: widget-datagrid-footer / inline-size;
     }
@@ -537,20 +529,33 @@ $root: ".widget-datagrid";
 
 .infinite-loading {
     .widget-datagrid-grid-head {
+        // lock header width
+        // and prevent it from having own scrolling
+        // as scrolling is synchronized in JS
         width: calc(var(--widgets-grid-width) - var(--widgets-grid-scrollbar-size));
         overflow-x: hidden;
     }
     .widget-datagrid-grid-head[data-scrolled-y="true"] {
+        // add shadow under the header
+        // implying that grid is scrolled vertically (there are rows hidden under header)
+        // the data attribute added in JS
         box-shadow: 0 5px 5px -5px gray;
     }
 
     .widget-datagrid-grid-body {
+        // lock the size of the body
+        // and enable it to have own scrolling
+        // body is the leading element
+        // header scroll will be synced to match it
         width: var(--widgets-grid-width);
         overflow-y: auto;
         max-height: var(--widgets-grid-body-height);
     }
 
     .widget-datagrid-grid-head[data-scrolled-x="true"]:after {
+        // add inner shadow to the left side of the grid
+        // implying that the grid is scrolled horizontally (there are rows hidden on the left)
+        // the data attribute added in JS
         content: "";
         position: absolute;
         left: 0px;
@@ -563,6 +568,7 @@ $root: ".widget-datagrid";
 
 .widget-datagrid-grid-head {
     display: grid;
+    min-width: 0;
 
     // this head is not part of the grid, so it has dedicated column template  --widgets-grid-template-columns-head
     // but it might not be available at the initial render, so we use template from the grid --widgets-grid-template-columns
@@ -573,6 +579,7 @@ $root: ".widget-datagrid";
     //     and everything looks like it should.
     grid-template-columns: var(--widgets-grid-template-columns-head, var(--widgets-grid-template-columns));
 }
+
 .widget-datagrid-grid-body {
     // this element has to position their children (columns or headers)
     // as grid and have those aligned with the parent grid
@@ -583,9 +590,7 @@ $root: ".widget-datagrid";
 }
 
 .grid-mock-header {
-    grid-template-columns: subgrid;
-    grid-column: 1 / -1;
-    display: grid;
+    display: contents;
 }
 
 :where(#{$root}-paging-bottom, #{$root}-padding-top) {

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

@@ -1,44 +1,42 @@
-import { ReactNode, useCallback, useEffect, useRef } from "react";
+import { ReactNode, useCallback, useEffect } from "react";
 import { useColumnsStore, useDatagridConfig, useGridSizeStore } from "../model/hooks/injection-hooks";
 
-function getColumnSizes(container: HTMLDivElement | null): Map<string, number> {
-    const sizes = new Map<string, number>();
-    if (container) {
-        container.querySelectorAll<HTMLDivElement>("[data-column-id]").forEach(c => {
-            const columnId = c.dataset.columnId;
-            if (!columnId) {
-                console.debug("getColumnSizes: can't find id on:", c);
-                return;
-            }
-            sizes.set(columnId, c.offsetWidth);
-        });
-    }
-
-    return sizes;
-}
-
 export function MockHeader(): ReactNode {
     const columnsStore = useColumnsStore();
     const config = useDatagridConfig();
     const gridSizeStore = useGridSizeStore();
-    const headerRef = useRef<HTMLDivElement | null>(null);
-    const resizeCallback = useCallback<ResizeObserverCallback>(() => {
-        gridSizeStore.updateColumnSizes(getColumnSizes(headerRef.current).values().toArray());
-    }, [headerRef, gridSizeStore]);
+    const resizeCallback = useCallback<ResizeObserverCallback>(
+        entries => {
+            const container = entries[0].target.parentElement!;
+            const sizes = new Map<string, number>();
+            container.querySelectorAll<HTMLDivElement>("[data-column-id]").forEach(c => {
+                const columnId = c.dataset.columnId;
+                if (!columnId) {
+                    console.debug("getColumnSizes: can't find id on:", c);
+                    return;
+                }
+
+                sizes.set(columnId, c.getBoundingClientRect().width);
+            });
+            gridSizeStore.updateColumnSizes(sizes.values().toArray());
+        },
+        [gridSizeStore]
+    );
 
     useEffect(() => {
         const observer = new ResizeObserver(resizeCallback);
 
-        if (headerRef.current) {
-            observer.observe(headerRef.current);
-        }
+        columnsStore.visibleColumns.forEach(c => {
+            if (c.headerElementRef) observer.observe(c.headerElementRef);
+        });
+
         return () => {
             observer.disconnect();
         };
-    }, [resizeCallback, headerRef]);
+    }, [resizeCallback, columnsStore.visibleColumns]);
 
     return (
-        <div className={"grid-mock-header"} aria-hidden ref={headerRef}>
+        <div className={"grid-mock-header"} aria-hidden>
             {config.checkboxColumnEnabled && <div data-column-id="checkboxes" key={"checkboxes"}></div>}
             {columnsStore.visibleColumns.map(c => (
                 <div

packages/pluggableWidgets/datagrid-web/src/helpers/state/column/ColumnStore.tsx

@@ -23,7 +23,7 @@ export class ColumnStore implements GridColumn {
     size: number | undefined = undefined;
     orderWeight: number;
 
-    private headerElementRef: HTMLDivElement | null = null;
+    headerElementRef: HTMLDivElement | null = null;
 
     private baseInfo: BaseColumnInfo;
     private parentStore: IColumnParentStore;

packages/pluggableWidgets/datagrid-web/src/model/hooks/useInfiniteControl.tsx

@@ -1,4 +1,4 @@
-import { RefObject, UIEvent, useCallback, useEffect, useLayoutEffect } from "react";
+import { RefObject, UIEvent, useCallback, useEffect } from "react";
 import { useOnScreen } from "@mendix/widget-plugin-hooks/useOnScreen";
 import { useGridSizeStore } from "@mendix/datagrid-web/src/model/hooks/injection-hooks";
 import { VIRTUAL_SCROLLING_OFFSET } from "../stores/GridSize.store";
@@ -45,13 +45,13 @@ export function useInfiniteControl(): [trackBodyScrolling: ((e: any) => void) |
         setTimeout(() => isVisible && gridSizeStore.lockGridBodyHeight(), 100);
     }, [isVisible, gridSizeStore]);
 
-    useLayoutEffect(() => {
+    useEffect(() => {
         const observeTarget = gridSizeStore.gridContainerRef.current;
         if (!gridSizeStore.hasVirtualScrolling || !observeTarget) return;
 
         const resizeObserver = new ResizeObserver(entries => {
             for (const entry of entries) {
-                gridSizeStore.setGridWidth(entry.target.clientWidth ? entry.target.clientWidth : undefined);
+                gridSizeStore.setGridWidth(entry.contentRect.width);
             }
         });
 

packages/pluggableWidgets/datagrid-web/src/model/stores/GridSize.store.ts

@@ -45,7 +45,12 @@ export class GridSizeStore {
     }
 
     get templateColumnsHead(): string | undefined {
-        return this.columnSizes?.map(s => `${s}px`).join(" ");
+        return this.columnSizes
+            ?.map(s => {
+                const str = s.toString();
+                return `${str.slice(0, str.indexOf(".") + 4)}px`;
+            })
+            .join(" ");
     }
 
     bumpPage(): void {