Drill to detail: column headers misaligned with table body (headers truncated)
- Dominant language
- Python
- Stars
- 74.8k
- Forks
- 18.3k
- Avg merge
- 2d 5h
- Merged PRs (30d)
- 685
Description
### Bug description
## Bug description
In the **Drill to detail** modal, column headers are misaligned with their corresponding data cells. Some headers also appear truncated or incomplete, while the row values underneath still render correctly.
This makes it hard to match a header to the values in that column, especially when there are many columns or when scrolling horizontally.
## Expected behavior
- Each column header lines up with its data column
- Header labels remain readable (or are clearly truncated with a tooltip)
- Headers stay in sync with the body when scrolling vertically or horizontally
## Actual behavior
- Headers are visually offset from the body cells
- Some header text looks cut off or not shown properly
- Row data still displays correctly
## Where it happens
- **Feature:** Drill to detail (chart context menu / “Drill to detail”)
- **Component:** Virtualized table in the drill modal (`VirtualTable` from `@superset-ui/core`), used by `DrillDetailPane`
- **Not the same as:** Table chart sticky-header misalignment (`plugin-chart-table` / `useSticky`), which was addressed in PRs like #36190, #36891, and #42573
## Suspected cause
Drill to detail uses a virtualized table (Ant Design header + `react-window` body) with fixed column widths (e.g. `150px`) and header ellipsis. Header and body width/scroll handling can get out of sync (especially when a vertical scrollbar is present), so headers and cells no longer align. Long labels are also clipped by `text-overflow: ellipsis`.
## How to reproduce
1. Open a dashboard or Explore view with a chart that supports Drill to detail
2. Right-click a data point (or use the chart menu) → **Drill to detail**
3. In the modal table, compare column headers to the cells below
4. Optionally scroll horizontally / vertically if many columns or rows are present
5. Observe misalignment and/or truncated headers while cell values still look correct
## Environment
- Superset version: 6.1.x / latest-dev
- Browser: Chrome
- OS: Linux
## Additional context
Cherry-picking table-chart sticky-header fixes (e.g. #42573) does **not** resolve this, because Drill to detail does not use `plugin-chart-table`’s `useSticky` path.
## Screenshots
### Screenshots/recordings
_No response_
### Superset version
6.1.0
### Python version
3.12
### 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.
- [ ] I have searched the GitHub issue tracker and didn't find a similar bug report.
- [ ] 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 with the VirtualTable from @superset-ui/core and its use by DrillDetailPane, then reproduce the issue in a Drill to detail modal with many columns and vertical or horizontal scrolling. Compare the Ant Design header with the react-window body, including fixed widths, scrollbar handling, and ellipsis. Done means headers align with cells, remain synchronized while scrolling, and truncated labels are readable or have a tooltip.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 66/100