Table Headers with two metrics and time shift are bad aligned

[ThomasBayen]

Bug description

The formatting of table chart headers is bad aligned if you use metrics and time comparison. It looks crazy. The added screenshot explains it best.

To explain if the screenshort is not obvious for you: This table chart has two metrics ("HL Summe" and "€ Summe") and for each an additional column for last year's amount. Afaiu the table header should have two lines. One thing is that all four columns (in the lower header line) seem to be collected under the first entry in the upper header line. That is wrong. The second thing is that all header columns are in no way aligned to the table columns below the header.

Screenshots/recordings

Superset version

master / latest-dev

Python version

3.10

Node version

16

Browser

Chrome

Additional context

I use superset 6.0.0rc2 and I am not sure if I have to install the master branch to file a bug report. Sorry if this is already solve somewhere else but I did not find a ticket for it.

The server is a docker image on Debian Trixie and the Browser is actual Google Chrome on Debian Trixie/XFCE4.

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.
• [ ] 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.

[dosubot[bot]]

Hi @ThomasBayen! I'm Dosu and I’m helping the superset team.

This table header misalignment issue with metrics and time comparison columns was recently fixed in Superset via PR #35968, which improves header alignment and accessibility for table charts with time comparison enabled. The fix was merged after the 6.0.0rc2 release, so you’ll need to update to a newer version (master or a future release) to benefit from these improvements.

The root cause was inconsistent header IDs, which broke alignment and CSS targeting. The fix introduces proper header ID generation and grouping, so headers and columns now line up as expected. If you can’t upgrade immediately, you may be able to use custom CSS targeting header IDs as a temporary workaround, but the best solution is to update Superset to include this fix.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}    

[ThomasBayen]

This belongs to #35783 and is solved with PR #35968

[ThomasBayen]

Sorry, I was wrong. The error is not solved. I installed master branch from today and the table headers in my case (metrics and time shift) are still misaligned.

[dosubot[bot]]

The header misalignment with metrics and time shift persists on master because the grouping and header ID logic in the TableChart component doesn't guarantee unique or consistent mapping when multiple metrics and their time-shift columns share the same base label. This can result in grouped headers drifting away from the actual columns below, especially if originalLabel values are duplicated or grouping keys are inconsistent. The recent fix in PR #35968 improved header ID generation, but it doesn't fully resolve cases with duplicate labels or complex metric/time-shift combinations source.

There isn't an open issue or PR currently tracking this specific bug. As a workaround, you could try renaming your metrics to ensure unique labels or use custom CSS targeting header IDs if possible. If you can share a minimal reproducible example or specific configuration that triggers the misalignment, it would help maintainers debug and address the problem. Reviewing the grouping and header ID logic in TableChart and DataTable for uniqueness and correct mapping is recommended for a long-term fix.

To reply, just mention @dosu.

---

^{How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other}

   

[YousufFFFF]

Hey @rusackas!, I would like to work on this issue! I’ll investigate whether this is a regression or a missing backport of the previous header/body width sync fix for the Table chart, and submit a PR.