(superset) branch master updated: fix(sqllab): keep the results grid header opaque when rows scroll under it (#45480)

[ru...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

rusackas pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/superset.git


The following commit(s) were added to refs/heads/master by this push:
     new 293f159deaf fix(sqllab): keep the results grid header opaque when rows scroll under it (#45480)
293f159deaf is described below

commit 293f159deaf63c20d08ada41af77c2925b89a0a0
Author: Joe Li <jo...@preset.io>
AuthorDate: Tue Oct 20 11:59:00 2026 -0700

    fix(sqllab): keep the results grid header opaque when rows scroll under it (#45480)
    
    Co-authored-by: Claude Opus 5.5 <no...@anthropic.com>
---
 .../src/components/GridTable/GridTable.test.tsx    | 25 ++++++++++++++++++++--
 .../src/components/GridTable/index.tsx             |  9 +++++++-
 2 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/src/components/GridTable/GridTable.test.tsx b/superset-frontend/src/components/GridTable/GridTable.test.tsx
index 75993d4283b..c0bb0dc76f5 100644
--- a/superset-frontend/src/components/GridTable/GridTable.test.tsx
+++ b/superset-frontend/src/components/GridTable/GridTable.test.tsx
@@ -16,8 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import { render } from 'spec/helpers/testing-library';
-import { setupAGGridModules } from '@superset-ui/core/components/ThemedAgGridReact';
+import { render, waitFor } from 'spec/helpers/testing-library';
+import { supersetTheme } from '@apache-superset/core/theme';
+import {
+  setupAGGridModules,
+  type AgGridContainerElement,
+} from '@superset-ui/core/components/ThemedAgGridReact';
 import { GridTable } from '.';
 
 const mockedProps = {
@@ -47,6 +51,23 @@ test('renders a grid with 3 Table rows', () => {
   });
 });
 
+test('sets an opaque grid background so rows do not show through the sticky header', async () => {
+  const { container } = render(<GridTable {...mockedProps} />);
+  const gridContainer = container.querySelector<AgGridContainerElement>(
+    '[data-themed-ag-grid]',
+  );
+  await waitFor(() => expect(gridContainer?._agGridApi).toBeDefined());
+
+  // ag-grid paints its sticky header container with the data background,
+  // which derives from the backgroundColor param.
+  const theme = gridContainer!._agGridApi!.getGridOption(
+    'theme',
+  ) as unknown as { _getParamsCss: () => string };
+  expect(theme._getParamsCss()).toContain(
+    `--ag-background-color: var(--ag-inherited-background-color, ${supersetTheme.colorBgContainer});`,
+  );
+});
+
 test('sorts strings correctly', () => {
   const stringProps = {
     ...mockedProps,
diff --git a/superset-frontend/src/components/GridTable/index.tsx b/superset-frontend/src/components/GridTable/index.tsx
index 04ae59fb015..16e5766dfb7 100644
--- a/superset-frontend/src/components/GridTable/index.tsx
+++ b/superset-frontend/src/components/GridTable/index.tsx
@@ -159,6 +159,13 @@ export function GridTable<RecordType extends object>({
     [rowHeight, headerHeight],
   );
 
+  // ag-grid paints its sticky header and pinned containers with the data
+  // background, so it must be opaque or scrolled rows show through them.
+  const gridThemeOverrides = useMemo(
+    () => ({ backgroundColor: theme.colorBgContainer, ...themeOverrides }),
+    [theme.colorBgContainer, themeOverrides],
+  );
+
   return (
     <div
       css={css`
@@ -207,7 +214,7 @@ export function GridTable<RecordType extends object>({
         components={gridComponents}
         gridOptions={gridOptions}
         onCellKeyDown={onKeyDown}
-        themeOverrides={themeOverrides}
+        themeOverrides={gridThemeOverrides}
       />
     </div>
   );