Polaris table inside a modal

Polaris
1

In this screen recording, I’m demonstrating an issue with the Polaris table component.

When a Polaris table is placed inside a modal, the table’s header and leftmost column lose their sticky behavior — they scroll out of the viewport instead of remaining fixed.
Interestingly, resizing the browser window temporarily resolves the issue and restores the sticky positioning for both the header and the first column.

However, this issue doesn’t persist when the table is outside of a modal.

You can see the video demonstrating here - Polaris Table Inside a Modal Issue

I’ve tried wrapping the table in additional <div> elements and applying custom classes, but that hasn’t solved the problem yet.

2

Which table are you using - the one from React? The <s-table> component doesn’t have sticky behavior so it can’t be that one.

If it’s the one from React, unfortunately we don’t support that component anymore.

3

Yeah it’s the react one and for the web-component one - it needs the sticky behavior.

Lacking the sticky behavior is forcing us to still use the react one.

Anyway, thanks for the followup.

1 Like