fix(table-chart): fix missing table header IDs

[sadpandajoe]

SUMMARY

Table chart column headers were rendering with id="header-undefined" instead of meaningful IDs, breaking CSS customization and ARIA accessibility that worked in Superset 4.1.1.

Root Cause:
PR #31590 (Ant Design v5 migration) changed header IDs from column.key to column.originalLabel, but originalLabel is only set for time-comparison columns (added in PR #32665), leaving regular columns with undefined values.

Solution:
Implemented defensive fallback with sanitization:

• Headers: id="header-${sanitizeHeaderId(column.originalLabel || column.key)}"
• Cells: aria-labelledby="header-${sanitizeHeaderId(column.originalLabel || column.key)}"

Column identifiers can contain CSS-unsafe characters (%, #, △, spaces), so added sanitizeHeaderId() helper to ensure valid CSS selectors and ARIA references.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before:

After:

TESTING INSTRUCTIONS

Manual Testing:

1. Test regular table chart:

   - Create a table chart with regular columns (non-time-comparison)
   - Inspect the DOM (browser dev tools)
   - Verify column headers have meaningful IDs like id="header-column_name"
   - Verify NO headers have id="header-undefined"
   - Verify table cells have matching aria-labelledby attributes
   

2. Test time-comparison table chart:

   - Create a table chart with time comparison enabled
   - Add metrics and enable comparison type
   - Inspect the DOM
   - Verify comparison columns have IDs like id="header-metric_1"
   - Verify NO headers have id="header-undefined"
   

3. Test special characters:

   - Create columns with special characters: %pct_nice, #count, etc.
   - Verify IDs are sanitized: id="header-percentpct_nice", id="header-hashcount"
   - Verify no spaces or invalid CSS characters in IDs
   

4. Test CSS customization (issue reporter's use case):

   /* Should now work */
   #header-column_name {
     background-color: red;
   }

Automated Testing:

# Run table chart tests
npm test -- plugins/plugin-chart-table/test/TableChart.test.tsx

# Run pre-commit validation
pre-commit run --files plugins/plugin-chart-table/src/TableChart.tsx plugins/plugin-chart-table/test/TableChart.test.tsx

ADDITIONAL INFORMATION

• Has associated issue: Fixes 【6.0.0-RC2】Table chart header IDs are not populated correctly #35783
• Required feature flags:
• Changes UI
• Includes DB Migration (follow approval process in SIP-59)
  • Migration is atomic, supports rollback & is backwards-compatible
  • Confirm DB migration upgrade and downgrade tested
  • Runtime estimates and downtime expectations provided
• Introduces new feature or API
• Removes existing feature or API

[bito-code-review]

Code Review Agent Run #67d15c

Actionable Suggestions - 0

Review Details

• Files reviewed - 2 · Commit Range: 790fe5c..9fcddc5

  • superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx
  • superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx
• Files skipped - 0
• Tools

  • Whispers (Secret Scanner) - ✔︎ Successful
  • Detect-secrets (Secret Scanner) - ✔︎ Successful

---

Bito Usage Guide

Commands

Type the following command in the pull request comment and save the comment.

• /review - Manually triggers a full AI review.

• /pause - Pauses automatic reviews on this pull request.

• /resume - Resumes automatic reviews.

• /resolve - Marks all Bito-posted review comments as resolved.

• /abort - Cancels all in-progress reviews.

Refer to the documentation for additional commands.

Configuration

This repository uses Default Agent You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

• Customize agent settings
• Review rules
• General documentation
• FAQ

AI Code Review powered by

[korbit-ai]

Review by Korbit AI

Korbit automatically attempts to detect when you fix issues in new commits.

Category	Issue	Status
	Redundant header ID sanitization in render loop ▹ view
	Inconsistent header ID generation fallback ▹ view

Files scanned

​

File Path	Reviewed
superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx	✅

Explore our documentation to understand the languages and file types we support and the files we ignore.

Check out our docs on how you can make Korbit work best for you and your team.

Loving Korbit!? Share us on LinkedIn Reddit and X

[github-actions]

🎪 Showtime is building environment on GHA for 9fcddc5

[github-actions]

🎪 Showtime deployed environment on GHA for 9fcddc5

• Environment: http://35.88.151.195:8080 (admin/admin)
• Lifetime: 48h auto-cleanup
• Updates: New commits create fresh environments automatically

[Copilot]

Pull Request Overview

This PR adds header ID sanitization to the TableChart component to ensure HTML id attributes and ARIA labels are valid and safe for CSS selectors. The change prevents issues with special characters (%, #, △) and spaces in column identifiers that could break accessibility features and CSS selectors.

• Introduces sanitizeHeaderId() function to replace problematic characters in header IDs
• Updates header id and aria-labelledby attributes to use sanitized IDs
• Adds comprehensive test coverage for the sanitization function and validates proper ARIA attribute handling

Reviewed Changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

File	Description
superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx	Implements sanitizeHeaderId() function and applies it to header and cell ARIA attributes
superset-frontend/plugins/plugin-chart-table/test/TableChart.test.tsx	Adds unit tests for sanitizeHeaderId() and integration tests verifying proper header ID generation and ARIA attribute references

[Copilot]

[nitpick] Using cloneDeep here is appropriate to prevent test pollution by modifying the original test data. However, the variable name dataWithEmptyCell is misleading - based on the test context at line 507-510, this data will have a new row pushed to it, so it's not specifically 'empty cell data' but rather 'modified query data'. Consider renaming to modifiedQueryData or queryDataWithExtraRow for clarity.

[sadpandajoe]

The name captures that we are testing empty cell rendering rather than the cloning + pushing. Will probably not change unless if we think it's a merge blocker.

[github-actions]

🎪 Showtime deployed environment on GHA for ebfb2a9

• Environment: http://44.244.132.19:8080 (admin/admin)
• Lifetime: 48h auto-cleanup
• Updates: New commits create fresh environments automatically

[sadpandajoe]

@rusackas wondering if one of your changes/rules didn't get updated. I had added it tags for tests and they didn't fail. I caught it and updated the all to test now. But just a heads up.

[Copilot]

Pull Request Overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated no new comments.