fix(charts): add default padding to match other charts by vighneshtule · Pull Request #36895 · apache/superset

vighneshtule · 2026-01-04T17:05:45Z

User description

SUMMARY

This PR resolves an inconsistency in the default padding of Table charts compared to other chart types (like ECharts). Previously, Table charts rendered edge-to-edge within their containers (0px padding), causing visual misalignment when placed alongside other charts which typically have a default 20px padding.

Changes:

Added 20px (via theme.sizeUnit * 5) padding to the Table chart container in Styles.tsx.
Updated TableChart.tsx to subtract this 40px total horizontal/vertical padding from the width and height passed to the virtualized DataTable component. This ensures the table renders correctly within the new padded area without overflowing or causing unnecessary scrollbars.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

After (Verified Padding):

TESTING INSTRUCTIONS

Open a Dashboard in Superset.
Add a Table chart.
Add a Bar chart (or any ECharts chart) next to it for comparison.
Verify: The Table chart should now have ~20px padding between the card edge and the table content, visually matching the spacing of the Bar chart.
Verify: Ensure the table fits within the container and no unexpected scrollbars appear unless the data actually overflows.

ADDITIONAL INFORMATION

Has associated issue: Fixes Inconsistent Default Padding for Different Charts #31033
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

CodeAnt-AI Description

Add 20px padding to Table charts so they match other chart types' spacing

What Changed

Table chart containers now include ~20px padding around the table content so table cards no longer render edge-to-edge
The table rendering area is reduced by the same padding so tables fit inside the padded card without creating unexpected scrollbars
Dashboard layout: Table charts now visually align with other chart types that already used the same padding

Impact

✅ Consistent chart spacing on dashboards
✅ Fewer unexpected scrollbars for table charts
✅ Table content no longer touches card edges

💡 Usage Guide

Checking Your Pull Request

Every time you make a pull request, our system automatically looks through it. We check for security issues, mistakes in how you're setting up your infrastructure, and common code problems. We do this to make sure your changes are solid and won't cause any trouble later.

Talking to CodeAnt AI

Got a question or need a hand with something in your pull request? You can easily get in touch with CodeAnt AI right here. Just type the following in a comment on your pull request, and replace "Your question here" with whatever you want to ask:

@codeant-ai ask: Your question here

This lets you have a chat with CodeAnt AI about your pull request, making it easier to understand and improve your code.

Example

@codeant-ai ask: Can you suggest a safer alternative to storing this secret?

Preserve Org Learnings with CodeAnt

You can record team preferences so CodeAnt AI applies them in future reviews. Reply directly to the specific CodeAnt AI suggestion (in the same thread) and replace "Your feedback here" with your input:

@codeant-ai: Your feedback here

This helps CodeAnt AI learn and adapt to your team's coding style and standards.

Example

@codeant-ai: Do not flag unused imports.

Retrigger review

Ask CodeAnt AI to review the PR again, by typing:

@codeant-ai: review

Check Your Repository Health

To analyze the health of your code repository, visit our dashboard at https://app.codeant.ai. This tool helps you identify potential issues and areas for improvement in your codebase, ensuring your repository maintains high standards of code health.

codeant-ai-for-open-source · 2026-01-04T17:05:50Z

CodeAnt AI is reviewing your PR.

Thanks for using CodeAnt! 🎉

We're free for open-source projects. if you're enjoying it, help us grow by sharing.

Share on X ·
Reddit ·
LinkedIn

bito-code-review · 2026-01-04T17:05:55Z

Code Review Agent Run #e8af69

Actionable Suggestions - 0

Review Details

Files reviewed - 2 · Commit Range: b7a4d04..b7a4d04
- superset-frontend/plugins/plugin-chart-table/src/Styles.tsx
- superset-frontend/plugins/plugin-chart-table/src/TableChart.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 Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by

codeant-ai-for-open-source · 2026-01-04T17:08:00Z

Nitpicks 🔍

🔒 No security issues identified
⚡ Recommended areas for review Negative size risk Subtracting padding from measured table sizes can produce negative/very small width or height values (table initial state is 0). Passing negative sizes to the virtualized DataTable may cause layout glitches or unexpected behavior. Clamp computed sizes to >= 0 before passing to child components. Inconsistent layout inputs The DataTable dimensions now use adjusted content size (widthFromState - padding) while other layout decisions (e.g., maxPageItemCount) still use the original `width` prop. This can cause inconsistent behavior/line-wrapping between the table body and controls. Consider computing a single adjusted content width/height and reuse it across layout logic. Layout / overflow Adding padding to the top-level chart container increases the element's total size; if the container or table children use width: 100% and the box-sizing is content-box (default), the padding will cause overflow and can produce horizontal/vertical scrollbars. Verify the table rendering and the JS sizing logic consider padding (or set box-sizing to border-box) so the table fits reliably without visual regressions.

codeant-ai-for-open-source · 2026-01-04T17:08:02Z

CodeAnt AI finished reviewing your PR.

Co-authored-by: codeant-ai-for-open-source[bot] <244253245+codeant-ai-for-open-source[bot]@users.noreply.github.com>

bito-code-review · 2026-01-04T18:36:07Z

Code Review Agent Run #90a13e

Actionable Suggestions - 0

Review Details

Files reviewed - 2 · Commit Range: b7a4d04..c9885ec
- superset-frontend/plugins/plugin-chart-table/src/Styles.tsx
- superset-frontend/plugins/plugin-chart-table/src/TableChart.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 Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by

rusackas · 2026-01-05T17:34:59Z

running CI 🤞 Do you have a "before" pic by any chance?

vighneshtule · 2026-01-06T22:24:42Z

@rusackas this is the before ss where the table was not center aligned as mentioned in issue #31033

rusackas · 2026-06-13T15:41:43Z

Thanks @vighneshtule, but this one still needs some tweaks.

The PR Lint lint-check and sharded-jest-tests are failing (likely a snapshot/test affected by the new padding)

Per CodeAnt please clamp the width/height passed to DataTable to >= 0, since subtracting padding from the 0 initial table size can yield negative dimensions.

Ping us once it's green, and we'll come review again.

codecov · 2026-06-13T15:53:16Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 64.28%. Comparing base (b05fe48) to head (fde07c0).

Additional details and impacted files

@@           Coverage Diff           @@
##           master   #36895   +/-   ##
=======================================
  Coverage   64.28%   64.28%           
=======================================
  Files        2659     2659           
  Lines      144304   144304           
  Branches    33260    33260           
=======================================
  Hits        92773    92773           
  Misses      49902    49902           
  Partials     1629     1629

Flag	Coverage Δ
javascript	`68.25% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

bito-code-review · 2026-06-13T18:43:50Z

Code Review Agent Run #faaea6

Actionable Suggestions - 0

Additional Suggestions - 2

superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx - 2
- Missing unit tests for width/height calculation · Line 1611-1612
  
  The width/height calculation change introduces `theme.sizeUnit * 10` subtraction. The test file has no assertions verifying this dimensional logic per rule [6262] — tests should validate actual business logic, not just component rendering. Consider adding unit tests for the size adjustment behavior.
- Magic number in dimensional calculation · Line 1611-1612
  
  The value `10` in `theme.sizeUnit * 10` is a magic number controlling dimensional adjustment. Per maintainability guidelines, extracting this to a named constant would clarify its purpose and ease future adjustments.

Review Details

Files reviewed - 2 · Commit Range: b7a4d04..fde07c0
- superset-frontend/plugins/plugin-chart-table/src/Styles.tsx
- superset-frontend/plugins/plugin-chart-table/src/TableChart.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 Superset You can customize the agent settings here or contact your Bito workspace admin at evan@preset.io.

Documentation & Help

AI Code Review powered by

fix(table-chart): add 20px default padding to match other charts

b7a4d04

pull-request-size Bot added the size/XS label Jan 4, 2026

github-actions Bot added the plugins label Jan 4, 2026

dosubot Bot added the change:frontend Requires changing the frontend label Jan 4, 2026

codeant-ai-for-open-source Bot added the size:XS This PR changes 0-9 lines, ignoring generated files label Jan 4, 2026

codeant-ai-for-open-source Bot reviewed Jan 4, 2026

View reviewed changes

Comment thread superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx Outdated

vighneshtule mentioned this pull request Jan 4, 2026

Inconsistent Default Padding for Different Charts #31033

Open

3 tasks

Update superset-frontend/plugins/plugin-chart-table/src/TableChart.tsx

c9885ec

Co-authored-by: codeant-ai-for-open-source[bot] <244253245+codeant-ai-for-open-source[bot]@users.noreply.github.com>

rusackas requested a review from msyavuz January 5, 2026 17:35

vighneshtule changed the title ~~fix#31033: add 20px default padding to match other charts~~ fix(charts): add default padding to match other charts Jan 6, 2026

Merge branch 'master' into fix/table-chart-padding

fde07c0

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(charts): add default padding to match other charts#36895

fix(charts): add default padding to match other charts#36895
vighneshtule wants to merge 3 commits into
apache:masterfrom
vighneshtule:fix/table-chart-padding

vighneshtule commented Jan 4, 2026 •

edited by codeant-ai-for-open-source Bot

Loading

Uh oh!

codeant-ai-for-open-source Bot commented Jan 4, 2026

Uh oh!

bito-code-review Bot commented Jan 4, 2026 •

edited

Loading

Code Review Agent Run #e8af69

Uh oh!

Uh oh!

codeant-ai-for-open-source Bot commented Jan 4, 2026

Uh oh!

codeant-ai-for-open-source Bot commented Jan 4, 2026

Uh oh!

bito-code-review Bot commented Jan 4, 2026 •

edited

Loading

Code Review Agent Run #90a13e

Uh oh!

rusackas commented Jan 5, 2026

Uh oh!

vighneshtule commented Jan 6, 2026

Uh oh!

rusackas commented Jun 13, 2026

Uh oh!

codecov Bot commented Jun 13, 2026

Uh oh!

bito-code-review Bot commented Jun 13, 2026 •

edited

Loading

Code Review Agent Run #faaea6

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

vighneshtule commented Jan 4, 2026 • edited by codeant-ai-for-open-source Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

User description

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

CodeAnt-AI Description

What Changed

Impact

Checking Your Pull Request

Talking to CodeAnt AI

Example

Preserve Org Learnings with CodeAnt

Example

Retrigger review

Check Your Repository Health

Uh oh!

codeant-ai-for-open-source Bot commented Jan 4, 2026

Thanks for using CodeAnt! 🎉

Uh oh!

bito-code-review Bot commented Jan 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Agent Run #e8af69

Uh oh!

Uh oh!

codeant-ai-for-open-source Bot commented Jan 4, 2026

Nitpicks 🔍

Uh oh!

codeant-ai-for-open-source Bot commented Jan 4, 2026

Uh oh!

bito-code-review Bot commented Jan 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Agent Run #90a13e

Uh oh!

rusackas commented Jan 5, 2026

Uh oh!

vighneshtule commented Jan 6, 2026

Uh oh!

rusackas commented Jun 13, 2026

Uh oh!

codecov Bot commented Jun 13, 2026

Codecov Report

Uh oh!

bito-code-review Bot commented Jun 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Review Agent Run #faaea6

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vighneshtule commented Jan 4, 2026 •

edited by codeant-ai-for-open-source Bot

Loading

bito-code-review Bot commented Jan 4, 2026 •

edited

Loading

bito-code-review Bot commented Jan 4, 2026 •

edited

Loading

bito-code-review Bot commented Jun 13, 2026 •

edited

Loading