Drill to detail modal VirtualTable header and body become misaligned
- 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
### 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
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