apache / apache/superset

Drill to detail: column headers misaligned with table body (headers truncated)

Open
#43,383 1 comment 0 reactions 0 assignees View on GitHub
#bug #bug:cosmetic dashboard:drill-to-detail 🦾 ai-candidate
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

Image

### 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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.