fix(listview): prevent table column layout shift on content change by massucattoj · Pull Request #37299 · apache/superset

massucattoj · 2026-01-21T00:23:47Z

SUMMARY

Problem: The Name column in list tables (Dataset, Dashboard, Chart) was shifting horizontally when table content changed - either from filtering, pagination, or when the browser scrollbar appeared/disappeared.

Solution: Two root causes were addressed:

Browser scrollbar: Added scrollbar-gutter: stable to the HTML element so space is always reserved for the scrollbar, preventing layout shift when it appears/disappears.

Column width recalculation: Changed from tableLayout="auto" to tableLayout="fixed". With fixed layout, columns with explicit size get fixed pixel widths, while the Name column (without size) takes all remaining space. This prevents the table from recalculating column widths based on content.

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

Before (Dashboard):

After (Dashboard):

Before (Charts):

After (Charts):

Before (Datasets):

After (Datasets):

TESTING INSTRUCTIONS

Navigate to the Datasets list page
Apply a filter (e.g., search by name or filter by database)
Observe that the table columns no longer shift when the filtered results load
Navigate between pages with different row counts
Verify columns remain stable when scrollbar appears/disappears

ADDITIONAL INFORMATION

Has associated issue:
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

netlify · 2026-01-21T00:26:48Z

✅ Deploy Preview for superset-docs-preview ready!

Name	Link
🔨 Latest commit	`66a1e9d`
🔍 Latest deploy log	https://app.netlify.com/projects/superset-docs-preview/deploys/698d22527374790007a11860
😎 Deploy Preview	https://deploy-preview-37299--superset-docs-preview.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

codecov · 2026-01-21T00:33:11Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 66.49%. Comparing base (3fba967) to head (66a1e9d).
⚠️ Report is 321 commits behind head on master.

Additional details and impacted files

@@             Coverage Diff             @@
##           master   #37299       +/-   ##
===========================================
+ Coverage        0   66.49%   +66.49%     
===========================================
  Files           0      668      +668     
  Lines           0    51265    +51265     
  Branches        0     5770     +5770     
===========================================
+ Hits            0    34088    +34088     
- Misses          0    15791    +15791     
- Partials        0     1386     +1386

Flag	Coverage Δ
hive	`41.50% <ø> (?)`
mysql	`64.59% <ø> (?)`
postgres	`64.67% <ø> (?)`
presto	`41.52% <ø> (?)`
python	`66.46% <ø> (?)`
sqlite	`64.26% <ø> (?)`
unit	`100.00% <ø> (?)`

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

☔ View full report in Codecov by Sentry.
📢 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-01-21T02:02:11Z

Code Review Agent Run #87d86b

Actionable Suggestions - 0

Review Details

Files reviewed - 3 · Commit Range: 80056c1..80056c1
- superset-frontend/packages/superset-ui-core/src/components/TableCollection/index.tsx
- superset-frontend/src/pages/DatasetList/index.tsx
- superset/templates/superset/spa.html
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

sadpandajoe · 2026-01-21T18:54:19Z

@massucattoj can you label the screenshots with before and after?

github-actions · 2026-01-21T18:55:18Z

🎪 Showtime is building environment on GHA for 80056c1

github-actions · 2026-01-21T19:14:27Z

🎪 Showtime deployed environment on GHA for 80056c1

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

massucattoj · 2026-01-21T19:20:22Z

@massucattoj can you label the screenshots with before and after?

sure! done.

msyavuz

@kasiazjc might have an opinion on this one but this looks a bit off to me. Especially the favourites column

github-actions · 2026-01-29T21:52:50Z

🎪 Showtime is building environment on GHA for 7269e68

github-actions · 2026-01-29T22:12:15Z

🎪 Showtime deployed environment on GHA for 7269e68

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

kasiazjc · 2026-01-30T12:18:30Z

@massucattoj how did you define width for each column? Does each type of the column (owners for example) have the same width in every CRUD?

Some CRUD views look weird, because we do not have a lot of columns - for example dashboard crud. It's harder to scan, because all of the info is on the right, and title is super far away. I am thinking maybe it should be other way round - max/fixed title, and the rest "fill in" the space (not based on the content, but space left), so that it's more balanced. wdyt @msyavuz @yousoph ?

One more thing:
I think in datasets first column that is empty should be removed (probably was for favorites, but we do not have favorites in datasets)

msyavuz · 2026-02-02T09:48:03Z

Some CRUD views look weird, because we do not have a lot of columns - for example dashboard crud. It's harder to scan, because all of the info is on the right, and title is super far away. I am thinking maybe it should be other way round - max/fixed title, and the rest "fill in" the space (not based on the content, but space left), so that it's more balanced. wdyt @msyavuz @yousoph ?

I think it would look better for most CRUD views but if the title becomes multiline i am not sure. But that can be easily solved by a sufficient enough title column width and rest taking up the remaining space

kasiazjc · 2026-02-02T12:44:04Z

Some CRUD views look weird, because we do not have a lot of columns - for example dashboard crud. It's harder to scan, because all of the info is on the right, and title is super far away. I am thinking maybe it should be other way round - max/fixed title, and the rest "fill in" the space (not based on the content, but space left), so that it's more balanced. wdyt @msyavuz @yousoph ?

I think it would look better for most CRUD views but if the title becomes multiline i am not sure. But that can be easily solved by a sufficient enough title column width and rest taking up the remaining space

We have truncation implemented with "..." and details on hover, so it should be fine. From what I can see 360px could be a sweet spot for fixed title width

…r as auto width

massucattoj · 2026-02-12T01:06:24Z

Hey guys I address the changes requested by @kasiazjc now we have a fixed title width of 360px and the secondary columns fit the remaning space 🚀

bito-code-review · 2026-02-12T01:45:59Z

Code Review Agent Run #e5e562

Actionable Suggestions - 0

Additional Suggestions - 1

superset-frontend/packages/superset-ui-core/src/components/TableCollection/index.tsx - 1
- Ineffective tableLayout prop · Line 299-299
  
  The tableLayout prop is set to "auto", but since scroll.x is present, Ant Design automatically overrides this to "fixed". This makes the "auto" setting ineffective and potentially confusing for maintainers. Consider changing it to "fixed" to align with the actual behavior.
  Code suggestion
  @@ -299,1 +299,1 @@ - tableLayout="auto" + tableLayout="fixed"

Review Details

Files reviewed - 4 · Commit Range: 7269e68..bef9828
- superset-frontend/packages/superset-ui-core/src/components/TableCollection/utils.tsx
- superset-frontend/src/pages/ChartList/index.tsx
- superset-frontend/src/pages/DashboardList/index.tsx
- superset-frontend/src/pages/DatasetList/index.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

superset-frontend/packages/superset-ui-core/src/components/TableCollection/utils.tsx

bito-code-review · 2026-02-12T10:07:41Z

AntD's size naming follows a pattern of repeating 'x' (xs, sm, md, lg, xl, xxl). Using 'xxxl' instead of '3xl' would align better with this convention for consistency across the codebase, as '3xl' deviates from the pattern.

bito-code-review · 2026-02-12T16:44:12Z

Code Review Agent Run #f9e4c6

Actionable Suggestions - 0

Review Details

Files reviewed - 4 · Commit Range: bef9828..fae1cd6
- superset-frontend/packages/superset-ui-core/src/components/TableCollection/utils.tsx
- superset-frontend/src/pages/ChartList/index.tsx
- superset-frontend/src/pages/DashboardList/index.tsx
- superset-frontend/src/pages/DatasetList/index.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

alexandrusoare

Thank you for your contribution! One thing though, I see that we gave a fix width for some of the CRUD views, Chart, Dashboard and Dataset. Wondering if we should do the same for the Crud views for Users, Roles and Groups etc?

fix(listview): prevent table column layout shift on content change

80056c1

pull-request-size bot added the size/S label Jan 21, 2026

github-actions bot added the packages label Jan 21, 2026

fix(listview): prevent table column layout shift dashboard and charts

1fd7c6b

massucattoj marked this pull request as ready for review January 21, 2026 00:56

dosubot bot added the listview Namespace | Anything related to lists, such as Dashboards, Charts, Datasets, etc. label Jan 21, 2026

sadpandajoe added the 🎪 ⚡ showtime-trigger-start Create new ephemeral environment for this PR label Jan 21, 2026

rusackas requested a review from msyavuz January 22, 2026 04:33

msyavuz previously requested changes Jan 23, 2026

View reviewed changes

github-actions bot added the 🎪 ⌛ 48h Environment expires after 48 hours (default) label Jan 29, 2026

msyavuz added the requires:design-review Requires input/approval from a Designer label Jan 30, 2026

fix(tables): change title to a fix width of 360px and return the othe…

66a1e9d

…r as auto width

github-actions bot added the 🎪 🔒 showtime-blocked label Feb 12, 2026

fix(tables): change title to a fix width of 360px and return the othe…

bef9828

…r as auto width

EnxDev reviewed Feb 12, 2026

View reviewed changes

superset-frontend/packages/superset-ui-core/src/components/TableCollection/utils.tsx Outdated Show resolved Hide resolved

fix(tables): change name from 3xl to xxxl

fae1cd6

alexandrusoare reviewed Feb 13, 2026

View reviewed changes

Conversation

massucattoj commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

SUMMARY

BEFORE/AFTER SCREENSHOTS OR ANIMATED GIF

TESTING INSTRUCTIONS

ADDITIONAL INFORMATION

Uh oh!

netlify bot commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for superset-docs-preview ready!

Uh oh!

codecov bot commented Jan 21, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

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

Uh oh!

Code Review Agent Run #87d86b

Uh oh!

sadpandajoe commented Jan 21, 2026

Uh oh!

github-actions bot commented Jan 21, 2026

Uh oh!

github-actions bot commented Jan 21, 2026

Uh oh!

massucattoj commented Jan 21, 2026

Uh oh!

msyavuz left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Jan 29, 2026

Uh oh!

github-actions bot commented Jan 29, 2026

Uh oh!

kasiazjc commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

msyavuz commented Feb 2, 2026

Uh oh!

kasiazjc commented Feb 2, 2026

Uh oh!

massucattoj commented Feb 12, 2026

Uh oh!

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

Uh oh!

Code Review Agent Run #e5e562

Uh oh!

Uh oh!

bito-code-review bot commented Feb 12, 2026

Uh oh!

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

Uh oh!

Code Review Agent Run #f9e4c6

Uh oh!

alexandrusoare left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

massucattoj commented Jan 21, 2026 •

edited

Loading

netlify bot commented Jan 21, 2026 •

edited

Loading

codecov bot commented Jan 21, 2026 •

edited

Loading

bito-code-review bot commented Jan 21, 2026 •

edited

Loading

kasiazjc commented Jan 30, 2026 •

edited

Loading

bito-code-review bot commented Feb 12, 2026 •

edited

Loading

bito-code-review bot commented Feb 12, 2026 •

edited

Loading