(superset) branch ultraset-sqllab-results-header-transparent-rows-show-through created (now cf23d539883)

[jl...@apache.org]

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

sadpandajoe pushed a change to branch ultraset-sqllab-results-header-transparent-rows-show-through
in repository https://gitbox.apache.org/repos/asf/superset.git


      at cf23d539883 fix(sqllab): keep the results grid header opaque when rows scroll under it

This branch includes the following new commits:

     new cf23d539883 fix(sqllab): keep the results grid header opaque when rows scroll under it

The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails.  The revisions
listed as "add" were already present in the repository and have only
been added to this reference.

(superset) 01/01: fix(sqllab): keep the results grid header opaque when rows scroll under it

[jl...@apache.org]

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

sadpandajoe pushed a commit to branch ultraset-sqllab-results-header-transparent-rows-show-through
in repository https://gitbox.apache.org/repos/asf/superset.git

commit cf23d5398839f77992581b7f2e859dcd1651f7d1
Author: Joe Li <47...@users.noreply.github.com>
AuthorDate: Mon Oct 19 18:01:05 2026 +0000

    fix(sqllab): keep the results grid header opaque when rows scroll under it
    
    ag-grid 36 (#41882) moved the header into a sticky container inside the
    scrolling viewport and paints it with the data background, which
    derives from the backgroundColor theme param. ThemedAgGridReact sets
    that param to transparent, so in GridTable (SQL Lab results, Explore
    data pane) scrolled rows showed through the header. Give GridTable an
    opaque colorBgContainer background, still overridable via
    themeOverrides.
    
    Fixes #45465
    
    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>
   );