Managing IndexTable Row Layout When Inline Error Messages Appear

Polaris
1

Hello Shopify Community,

I am working with <Layout.Section variant="oneThird"> and using IndexTable in my app interface. The issue I’m experiencing is that whenever an inline error message appears for a row, the whole row layout breaks. Specifically, the content shifts up and down, causing an inconsistent and glitchy UI.

I have tried applying vertical-align: top !important; to fix the alignment, but it does not seem to work effectively.

The inline error messages happen in different use cases such as:

  • Duplicate quantity is not allowed

  • Quantity field is mandatory

  • Value is mandatory

  • Quantity must be greater than or equal to 1

  • Discount value must be between 0 and 100

I am looking for:

  • Best practices or solutions to keep the IndexTable row layout stable when these error messages show up inline

  • How to properly style or manage vertical alignment for these messages to avoid the layout jumping

  • Examples of handling multiple inline error messages gracefully in Shopify app UI components

Any help or code snippets will be greatly appreciated!

Thank you.

image
image1549×879 92.9 KB

image
image655×581 34.7 KB

2

Hey @Shrutika_Lokhande :waving_hand: - thanks for the details on this one here.

I can’t say for sure in this case without taking a closer look at your implementation, but generally, Index Tables aren’t intended to be used to handle data input directly (there’s a bit more info on them here) . We do usually reccommend that if you’re using an Index Table, the component would be used to list some basic data and then when an object listed there is clicked, it takes the user to a full page representation of the object where they can then make adjustments/input data.

That said, if you’re open to share a minimal snippet of one IndexTable.Row with the affected cell, your Polaris React version, and confirm whether you pass error={…} to TextField/NumberField or render InlineError manually, I’m definitely happy to take a look to see if we can find a workaround for you.

Hope this helps! :slight_smile:

1 Like