Description
Provide a general summary of the issue here
ResizableTableContainer seems to cause a "layout flash" on initial render and refresh if the width of the table is wider than the minimum widths of all its columns.
This is reproducible using the Stock Table example alone in a web page: https://react-spectrum.adobe.com/react-aria/examples/stock-table.html
🤔 Expected Behavior?
Resizable tables should not have a "layout flash" on initial render and refresh.
😯 Current Behavior
Resizable tables can have a "layout flash" on initial render and refresh.
💁 Possible Solution
No response
🔦 Context
Impacts JustD: irsyadadl/justd#247
🖥️ Steps to Reproduce
- Render the Stock Table Example (https://react-spectrum.adobe.com/react-aria/examples/stock-table.html) in a web page that is wider than the minimum widths of all the columns.
- Initial render has "layout flash"
- Refreshing page results in "layout flash"
CodeSandbox: https://codesandbox.io/p/github/mw10013/rr-rac-resizable-table-container/main
StackBlitz: https://stackblitz.com/~/github.com/mw10013/rr-rac-resizable-table-container?file=app/components/StockTableExample.tsx
NB: Enlarge the preview pane so that it is wider than the minimum widths of all the table columns. Refreshing the preview pane will cause a "layout flash" in the first two tables.
The reproduction shows 3 tables:
- Stock table example
- Stock table example with
min-w-full
on the table. - Stock table example with
min-w-full
on the table and nodefaultWidth
's. There is no "layout flash" with this one.
Version
1.5.0
What browsers are you seeing the problem on?
Chrome
If other, please specify.
No response
What operating system are you using?
MacOS
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
Metadata
Metadata
Assignees
Labels
Type
Projects
Status
🔬 To Investigate / Verify