apache / apache/superset

Drill to detail modal VirtualTable header and body become misaligned

Open
#43,558 1 comment 0 reactions 0 assignees View on GitHub
#bug #bug:cosmetic dashboard:drill-to-detail
Dominant language
Python
Stars
74.8k
Forks
18.3k
Avg merge
2d 5h
Merged PRs (30d)
685

Description

### Bug description

In the Drill to detail modal, the virtualized table can render the header and body out of sync. The column headers no longer line up with the row values, which makes the drill results hard to read and can cause the wrong field name to appear above a given column of data.

From the current behavior, this appears in the VirtualTable used inside the drill modal when the result set is wide enough to require scrolling and/or large enough to paginate. The issue is especially visible after opening a drill from a chart and interacting with the table inside the modal.

Actual result:
The table header and body lose alignment. Header labels do not match the visible data columns, and horizontal/virtualized rendering appears offset.

Expected result:
The header should stay aligned with the body at all times, including after the modal opens, after scrolling, and after pagination or resize events

**Steps to reproduce:**

- Open Superset and load the sample dashboard such as “USA Births Names”.
- Open a chart context menu and select “Drill to detail”.
- Use a chart and selection that returns many rows and several columns.
- In the drill modal, scroll horizontally or interact with the paginated VirtualTable.
- Observe that the column headers and body cells are no longer aligned.

### Screenshots/recordings

Image

### Superset version

master / latest-dev

### Python version

3.11

### Node version

18 or greater

### Browser

Chrome

### Additional context

_No response_

### Checklist

- [x] I have searched Superset docs and Slack and didn't find a solution to my problem.
- [x] I have searched the GitHub issue tracker and didn't find a similar bug report.
- [x] I have checked Superset's logs for errors and if I found a relevant Python stacktrace, I included it here as text in the "additional context" section.

Contributor guide

Open the contributing guide

Research direction

Start by locating the VirtualTable used in the Drill to detail modal, then reproduce the issue with the USA Births Names sample dashboard and a wide, large result set. Check alignment after opening the modal, horizontal scrolling, pagination, and resizing; done means headers remain aligned with body columns throughout.

Written by the indexing model from the issue text.

Assessment

Tech stack
react
Domain
data-visualization, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.