fix: go back to the fill css grid and fall back to detached header with calculated layout if needed

Author: r0b1n

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

@@ -524,27 +524,54 @@ $root: ".widget-datagrid";
     }
 }
 
+// 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: 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
-    // using template from the grid might to misalignment from the grid itself,
-    // but in practice:
-    //   - grid has no data at that moment, so misalignment is not visible.
-    //   - as soon as the grid itself gets rendered --widgets-grid-template-columns-head gets calculated
-    //     and everything looks like it should.
-    grid-template-columns: var(--widgets-grid-template-columns-head, var(--widgets-grid-template-columns));
+    display: contents;
 }
 
-.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: var(--widgets-grid-template-columns);
+// 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);
+        }
+    }
 }
 
 .grid-mock-header {

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

@@ -8,6 +8,21 @@ export function MockHeader(): ReactNode {
     const resizeCallback = useCallback<ResizeObserverCallback>(
         entries => {
             const container = entries[0].target.parentElement!;
+
+            const gridContainer = container.closest<HTMLDivElement>(".table");
+            const gridBody = container.closest<HTMLDivElement>(".table-content");
+            if (gridContainer && gridBody) {
+                if (gridContainer.dataset.hasScrollX === "true") {
+                    if (gridBody.scrollWidth <= gridBody.clientWidth) {
+                        delete gridContainer.dataset.hasScrollX;
+                    }
+                } else {
+                    if (gridContainer.scrollWidth > gridContainer.clientWidth) {
+                        gridContainer.dataset.hasScrollX = "true";
+                    }
+                }
+            }
+
             const sizes = new Map<string, number>();
             container.querySelectorAll<HTMLDivElement>("[data-column-id]").forEach(c => {
                 const columnId = c.dataset.columnId;

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

@@ -26,8 +26,8 @@ export function Widget(props: { onExportCancel?: () => void }): ReactElement {
                     <SelectAllBar />
                     <RefreshStatus />
                     <GridBody>
-                        <MockHeader />
                         <RowsRenderer />
+                        <MockHeader />
                         <EmptyPlaceholder />
                     </GridBody>
                 </Grid>