ResizableTableContainer can have "layout flash" on initial render and refresh

[mw10013]

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 no defaultWidth'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

[LFDanLu]

I see a flash in the docs but I'm unsure if that is docs side or from the table itself. Mind updating your stackblitz, it doesn't seem to run for me.

[mw10013]

@LFDanLu: I put it in codesandbox.io and hopefully it will run for you there: https://codesandbox.io/p/github/mw10013/rr-rac-resizable-table-container/main

[LFDanLu]

@mw10013 Thanks! I see what you mean now, thanks for reporting this. Will need to dig into the TableColumnLayout calculations to see if we can handle this defaultColumn width case better

[LFDanLu]

#7382 (comment) seems to be related, but we can see about trying to calculate the widths percentage based or rely on the user providing an ideal/estimated width perhaps.