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

[vighneshtule]

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

1. Open a Dashboard in Superset.
2. Add a Table chart.
3. Add a Bar chart (or any ECharts chart) next to it for comparison.
4. 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.
5. 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]

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]

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

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

AI Code Review powered by

[codeant-ai-for-open-source]

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]

CodeAnt AI finished reviewing your PR.

[bito-code-review]

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

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

AI Code Review powered by

[rusackas]

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

[vighneshtule]

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