[IndexTable] Scrollbar doesn't appear until window is resized

[thelaughing-man]

Summary

This issue (#7307) still occurs when an IndexTable is included in a ui-modal.

Expected behavior

The horizontal scrollbar should render allowing scrolling on larger IndexTables

Actual behavior

The scrollbar does not appear until the page is reasized just as in ticket (#7307).

The IndexTable loads with a hidden scrollbar with calss Polaris-IndexTable-scrollBarContainerHidden

After resizing the page, it vanishes

Steps to reproduce

Link to sandbox

1. Sandbox does not support modals

Are you using React components?

Yes

Polaris version number

5.10.2

Browser

Chrome 122.0.6261.113

Device

Dell Laptop

[thelaughing-man]

I take it back. It's happening on IndexTables not in a modal as well. I'll try to recreate in the Polaris tester.

[sixkin-stephens]

I'm getting this too. I have an IndexTable in a Page (not in a Modal). When the rows are wide enough to require the horizontal scrollbar, the scrollbar doesn't appear initially.

Resizing the browser, or changing the IndexTable's IndexFilter tab causes the scrollbar to appear.

"@shopify/polaris": "^13.4.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",`

[zgqallan]

Hi, how is it going? I am having this issue two.

[Zetxus]

Also having this issue. Happens to me whenever I've already created the table and add data to it so it becomes wider.

Super inefficient workaround for the above case: whenever I change the data, I change the key attribute of the IndexTable as well - this forces the table to re-render and the scroll is properly sized.

Would appreciate a fix on this though, this gets annoying with big tables.