chore: virtual scrolling rework (no sticky)

Author: r0b1n

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

@@ -520,13 +520,24 @@ $root: ".widget-datagrid";
     margin: 0 auto;
 }
 
-:where(.widget-datagrid-grid.infinite-loading) {
+.infinite-loading.widget-datagrid-grid-body {
+    // when virtual scroll is enabled we make area that holds rows scrollable
+    // (while the area that holds column headers still stays in place)
     overflow-y: auto;
 }
 
-:where(.infinite-loading .widget-datagrid-grid-head .th) {
-    position: sticky;
-    z-index: 1;
+.widget-datagrid-grid-head,
+.widget-datagrid-grid-body {
+    // this element has to position their children (columns or headers)
+    // as grid and have those aligned with the parent grid
+    display: grid;
+    // 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;
 }
 
 :where(#{$root}-paging-bottom) {

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

@@ -1,35 +1,17 @@
 import classNames from "classnames";
 import { createElement, JSX, ReactElement } from "react";
-import { PaginationEnum } from "../../typings/DatagridProps";
-import { useInfiniteControl } from "@mendix/widget-plugin-grid/components/InfiniteBody";
 
 type P = Omit<JSX.IntrinsicElements["div"], "role" | "ref">;
 
 export interface GridProps extends P {
-    paginationType: PaginationEnum;
     className?: string;
-    hasMoreItems: boolean;
-    setPage?: (update: (page: number) => number) => void;
 }
 
 export function Grid(props: GridProps): ReactElement {
-    const { className, style, paginationType, hasMoreItems, setPage, children, ...rest } = props;
-    const isInfinite = paginationType === "virtualScrolling";
-    const [trackScrolling, bodySize, containerRef] = useInfiniteControl({
-        hasMoreItems,
-        isInfinite,
-        setPage
-    });
+    const { className, style, children, ...rest } = props;
 
     return (
-        <div
-            className={classNames("widget-datagrid-grid table", { "infinite-loading": isInfinite }, className)}
-            role="grid"
-            {...rest}
-            ref={containerRef}
-            style={isInfinite && bodySize > 0 ? { ...style, maxHeight: bodySize } : style}
-            onScroll={isInfinite ? trackScrolling : undefined}
-        >
+        <div className={classNames("widget-datagrid-grid table", className)} role="grid" style={style} {...rest}>
             {children}
         </div>
     );

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

@@ -1,8 +1,9 @@
 import classNames from "classnames";
 import { createElement, Fragment, ReactElement } from "react";
-import { LoadingTypeEnum } from "../../typings/DatagridProps";
+import { LoadingTypeEnum, PaginationEnum } from "../../typings/DatagridProps";
 import { SpinnerLoader } from "./loader/SpinnerLoader";
 import { RowSkeletonLoader } from "./loader/RowSkeletonLoader";
+import { useInfiniteControl } from "@mendix/widget-plugin-grid/components/InfiniteBody";
 
 interface Props {
     className?: string;
@@ -14,10 +15,20 @@ interface Props {
     columnsSize: number;
     rowsSize: number;
     pageSize: number;
+    pagination: PaginationEnum;
+    hasMoreItems: boolean;
+    setPage?: (update: (page: number) => number) => void;
 }
 
 export function GridBody(props: Props): ReactElement {
-    const { children } = props;
+    const { children, pagination, hasMoreItems, setPage } = props;
+
+    const isInfinite = pagination === "virtualScrolling";
+    const [trackScrolling, bodySize, containerRef] = useInfiniteControl({
+        hasMoreItems,
+        isInfinite,
+        setPage
+    });
 
     const content = (): React.ReactElement => {
         if (props.isFirstLoad) {
@@ -32,7 +43,17 @@ export function GridBody(props: Props): ReactElement {
     };
 
     return (
-        <div className={classNames("widget-datagrid-grid-body table-content", props.className)} role="rowgroup">
+        <div
+            className={classNames(
+                "widget-datagrid-grid-body table-content",
+                { "infinite-loading": isInfinite },
+                props.className
+            )}
+            style={isInfinite && bodySize > 0 ? { maxHeight: `${bodySize}px` } : {}}
+            role="rowgroup"
+            ref={containerRef}
+            onScroll={isInfinite ? trackScrolling : undefined}
+        >
             {content()}
         </div>
     );

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

@@ -166,9 +166,6 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
                 <Grid
                     aria-multiselectable={selectionEnabled ? selectActionHelper.selectionType === "Multi" : undefined}
                     style={cssGridStyles}
-                    setPage={setPage}
-                    paginationType={paginationType}
-                    hasMoreItems={hasMoreItems}
                 >
                     <GridHeader
                         availableColumns={props.availableColumns}
@@ -195,6 +192,9 @@ const Main = observer(<C extends GridColumn>(props: WidgetProps<C>): ReactElemen
                         columnsSize={visibleColumns.length}
                         rowsSize={rows.length}
                         pageSize={pageSize}
+                        pagination={props.paginationType}
+                        hasMoreItems={hasMoreItems}
+                        setPage={setPage}
                     >
                         <RowsRenderer
                             preview={props.preview ?? false}