Repository navigation
Conversation
The table was sized to exactly the sum of its column widths, so the SQLite results pane stopped short of its right edge and an empty state was squeezed into zero width. The table now fills the container and never drops below its columns; a trailing unsized column absorbs the spare width so resized columns keep their exact widths. Adds a ColumnResizingEmpty story.
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Resizable data tables now fill their container instead of stopping at the total width of their columns. This fixes the SQLite panel, where an empty result showed "No Results" squeezed into a narrow column and a populated result stopped short of the right edge of the results pane.
width: 100%, withmin-widthset to its column total, so it is never narrower than its columns.<col>takes the spare width. Fixed layout gives leftover space to auto-width columns, so the resized columns keep their exact widths and resizing one column still does not stretch the others.DataTableandVirtualizedDataTable, since they shareresizableTableStyle.Related Issue
Closes #566
Context
The first attempt used
width: max(<columns>px, 100%). jsdom dropsmax()values, so the unit tests could not assert them, which is why the helper now setswidth: 100%andminWidth. Browsers honormin-widthon tables, and the measured SQLite table width matched its pane (1074 CSS px).The table is still exactly as wide as its columns when it is wider than the container, so horizontal scrolling is unchanged.
The version plan is a patch for
@rozenite/ui: user-visible behavior changes in the shared table, and the SQLite panel inherits the fix.Testing
Automated:
pnpm checks:affected: 106 tasks successfulpnpm test:affected: 72 tasks successfulpnpm release:plan: passes with the new changesetpackages/uitable tests: 24 passed (data-table,virtualized-data-table), including updated width assertions and a new trailing-column assertionManual, on the iPhone 17 Pro simulator with the playground running from this branch and React Native DevTools open through
agent-browser:SELECT * FROM projectson the empty table: "No Results / Run SQL to see rows here." is centered across the results pane.SELECT name, type FROM sqlite_master: the results table spans the full pane (1074 CSS px, measured in the DOM).projectstable: "No Rows On This Page" is centered across the pane.wide_demo: columns scroll horizontally, and the footer spans the pane.projectsandwide_demo(20+ columns): Columns table fills the width, Keys and Indexes empty states are centered.