chore: use position sticky for virtual scrolling

Author: r0b1n

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

@@ -346,8 +346,13 @@ $root: ".widget-datagrid";
     position: relative;
 
     &-grid {
+        &-head,
+        &-body {
+            display: contents;
+        }
         &.table {
             display: grid !important;
+            grid-template-columns: var(--widgets-grid-template-columns);
             min-width: fit-content;
             margin-bottom: 0;
             &.infinite-loading {
@@ -487,106 +492,53 @@ $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;
-    }
+    // infinite loading grid limits height to initiate scrolling
+    max-height: var(--widgets-grid-table-height);
+    overflow: auto;
 
     .widget-datagrid-grid-head {
-        &[data-scrolled-x="true"],
-        &[data-scrolled-y="true"] {
-            z-index: 1;
+        .th {
+            // make header sticky when grid is scrolled.
+            position: sticky;
+            top: 0;
+            z-index: 10;
+            &:has([data-overlay-content]) {
+                // when there is popup open inside of the header cell, it should
+                // overlay other header elements, including ones from other grids.
+                z-index: 20;
+            }
         }
     }
 
-    .widget-datagrid-grid-head[data-scrolled-y="true"] {
+    &[data-scrolled-y] .widget-datagrid-grid-head .th:after {
         // 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;
+        bottom: -5px;
         left: 0;
-        width: 10px;
-        box-shadow: inset 5px 0 5px -5px gray;
-        top: 0;
-        bottom: 0;
+        right: 0;
+        height: 5px;
+        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), transparent);
     }
 }
 
-// styles for browsers that don't support subgrid
-// if the browser doesn't support subgrid
-// fall back header an body the contents and apply grid template to the table
-.widget-datagrid-grid.table {
-    grid-template-columns: var(--widgets-grid-template-columns);
-}
-.widget-datagrid-grid-body,
-.widget-datagrid-grid-head {
-    display: contents;
-}
-
-// styles for modern browsers
-@supports (grid-template-rows: subgrid) {
-    .widget-datagrid-grid.table:not([data-has-scroll-x="true"]) {
-        grid-template-columns: var(--widgets-grid-template-columns);
-        .widget-datagrid-grid-body,
-        .widget-datagrid-grid-head {
-            display: grid;
-            min-width: 0;
-
-            // this property makes sure we align our own grid columns
-            // to the columns defined in the global grid
-            grid-template-columns: subgrid;
-
-            // ensure that we cover all columns of original top level grid
-            // so our own columns get aligned with the parent
-            grid-column: 1 / -1;
-        }
-    }
-
-    .widget-datagrid-grid.table[data-has-scroll-x="true"] {
-        // reset the columns defined on table level
-        // header and body will define their own instead
-        // this is needed to make body horizontally scrollable
-        grid-template-columns: initial;
-        .widget-datagrid-grid-head {
-            display: grid;
-            min-width: 0;
-
-            grid-template-columns: var(--widgets-grid-template-columns-head, var(--widgets-grid-template-columns));
-        }
-
-        .widget-datagrid-grid-body {
-            display: grid;
-
-            grid-template-columns: var(--widgets-grid-template-columns);
-        }
+// add shadows at the left to imply that grid is scrolled horizontally
+.widget-datagrid-content:has(.widget-datagrid-grid[data-scrolled-x]) {
+    position: relative; // needed to keep :after element positioned inside
+    &:after {
+        content: "";
+        position: absolute;
+        left: 0;
+        z-index: 10;
+        bottom: 0;
+        top: 0;
+        width: 5px;
+        background: linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);
+        pointer-events: none;
     }
 }
 
-.grid-mock-header {
-    display: contents;
-}
-
 :where(#{$root}-paging-bottom, #{$root}-paging-top) {
     display: flex;
     flex-flow: row nowrap;
@@ -681,3 +633,7 @@ $root: ".widget-datagrid";
         }
     }
 }
+
+[data-overlay-content] {
+    z-index: 15;
+}

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

@@ -2,10 +2,12 @@ import classNames from "classnames";
 import { observer } from "mobx-react-lite";
 import { PropsWithChildren, ReactElement } from "react";
 import { useDatagridConfig, useGridSizeStore, useGridStyle } from "../model/hooks/injection-hooks";
+import { useInfiniteControl } from "../model/hooks/useInfiniteControl";
 
 export const Grid = observer(function Grid(props: PropsWithChildren): ReactElement {
     const config = useDatagridConfig();
     const gridSizeStore = useGridSizeStore();
+    const [handleScroll] = useInfiniteControl();
 
     const style = useGridStyle().get();
     return (
@@ -17,6 +19,7 @@ export const Grid = observer(function Grid(props: PropsWithChildren): ReactEleme
             role="grid"
             style={style}
             ref={gridSizeStore.gridContainerRef}
+            onScroll={handleScroll}
         >
             {props.children}
         </div>

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

@@ -8,22 +8,15 @@ import {
     usePaginationVM,
     useVisibleColumnsCount
 } from "../model/hooks/injection-hooks";
-import { useBodyScroll } from "../model/hooks/useBodyScroll";
 import { RowSkeletonLoader } from "./loader/RowSkeletonLoader";
 import { SpinnerLoader } from "./loader/SpinnerLoader";
 
 export const GridBody = observer(function GridBody(props: PropsWithChildren): ReactElement {
     const { children } = props;
     const gridSizeStore = useGridSizeStore();
-    const { handleScroll } = useBodyScroll();
 
     return (
-        <div
-            className={"widget-datagrid-grid-body table-content"}
-            role="rowgroup"
-            ref={gridSizeStore.gridBodyRef}
-            onScroll={handleScroll}
-        >
+        <div className={"widget-datagrid-grid-body table-content"} role="rowgroup" ref={gridSizeStore.gridBodyRef}>
             <ContentGuard>{children}</ContentGuard>
         </div>
     );

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

@@ -64,6 +64,7 @@ export function Header(props: HeaderProps): ReactElement {
             onDrop={draggableProps.onDrop}
             onDragEnter={draggableProps.onDragEnter}
             onDragOver={draggableProps.onDragOver}
+            ref={ref => column.setHeaderElementRef(ref)}
         >
             <div
                 className={classNames("column-container")}

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

@@ -13,7 +13,6 @@ import { WidgetFooter } from "./WidgetFooter";
 import { WidgetHeader } from "./WidgetHeader";
 import { WidgetRoot } from "./WidgetRoot";
 import { WidgetTopBar } from "./WidgetTopBar";
-import { MockHeader } from "./MockHeader";
 
 export function Widget(props: { onExportCancel?: () => void }): ReactElement {
     return (
@@ -27,7 +26,6 @@ export function Widget(props: { onExportCancel?: () => void }): ReactElement {
                     <RefreshStatus />
                     <GridBody>
                         <RowsRenderer />
-                        <MockHeader />
                         <EmptyPlaceholder />
                     </GridBody>
                 </Grid>

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

@@ -6,26 +6,26 @@ import { VIRTUAL_SCROLLING_OFFSET } from "../stores/GridSize.store";
 export function useInfiniteControl(): [trackBodyScrolling: ((e: any) => void) | undefined] {
     const gridSizeStore = useGridSizeStore();
 
-    const isVisible = useOnScreen(gridSizeStore.gridBodyRef as RefObject<HTMLElement>);
+    const isVisible = useOnScreen(gridSizeStore.gridContainerRef as RefObject<HTMLElement>);
 
-    const trackBodyScrolling = useCallback(
+    const trackTableScrolling = useCallback(
         (e: UIEvent<HTMLDivElement>) => {
             const target = e.target as HTMLElement;
-            const head = gridSizeStore.gridHeaderRef.current;
-            if (head) {
-                // synchronize header position to the body as they are decoupled
-                // we don't use state to optimize speed as we
-                // don't want a re-render.
-                head.scrollTo({ left: target.scrollLeft });
-
+            const container = gridSizeStore.gridContainerRef.current;
+            if (container) {
                 // this is cosmetic, needed to provide nice shadows when body is scrolled
-                head.dataset.scrolledY = target.scrollTop > 0 ? "true" : "false";
-                head.dataset.scrolledX = target.scrollLeft > 0 ? "true" : "false";
+                if (target.scrollTop > 0) {
+                    container.dataset.scrolledY = "true";
+                } else {
+                    delete container.dataset.scrolledY;
+                }
+                if (target.scrollLeft > 0) {
+                    container.dataset.scrolledX = "true";
+                } else {
+                    delete container.dataset.scrolledX;
+                }
             }
 
-            // we need to determine scrollbar width to calculate header size correctly in css
-            gridSizeStore.setScrollBarSize(target.offsetWidth - target.clientWidth);
-
             /**
              * In Windows OS the result of first expression returns a non integer and result in never loading more, require floor to solve.
              * note: Math floor sometimes result in incorrect integer value,
@@ -42,26 +42,9 @@ export function useInfiniteControl(): [trackBodyScrolling: ((e: any) => void) |
     );
 
     useEffect(() => {
-        const timer = setTimeout(() => isVisible && gridSizeStore.lockGridBodyHeight(), 100);
+        const timer = setTimeout(() => isVisible && gridSizeStore.lockGridContainerHeight(), 100);
         return () => clearTimeout(timer);
     });
 
-    useEffect(() => {
-        const observeTarget = gridSizeStore.gridContainerRef.current;
-        if (!gridSizeStore.hasVirtualScrolling || !observeTarget) return;
-
-        const resizeObserver = new ResizeObserver(entries => {
-            for (const entry of entries) {
-                gridSizeStore.setGridWidth(entry.contentRect.width);
-            }
-        });
-
-        resizeObserver.observe(observeTarget);
-
-        return () => {
-            resizeObserver.unobserve(observeTarget);
-        };
-    }, [gridSizeStore]);
-
-    return [gridSizeStore.hasVirtualScrolling ? trackBodyScrolling : undefined];
+    return [gridSizeStore.hasVirtualScrolling ? trackTableScrolling : undefined];
 }

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

@@ -18,10 +18,7 @@ export function gridStyleAtom(
                     checkboxColumn: config.checkboxColumnEnabled,
                     selectorColumn: config.selectorColumnEnabled
                 }),
-                "--widgets-grid-template-columns-head": gridSizeStore.templateColumnsHead,
-                "--widgets-grid-body-height": asPx(gridSizeStore.gridBodyHeight),
-                "--widgets-grid-width": asPx(gridSizeStore.gridWidth),
-                "--widgets-grid-scrollbar-size": asPx(gridSizeStore.scrollBarSize)
+                "--widgets-grid-table-height": asPx(gridSizeStore.gridContainerHeight)
             }) as CSSProperties
     );
 }