Getting a warning about TableHeaderRow even though the structure seems correct

I am using latest Polaris with and the app is just created with “shopify app init”.

Getting 2 warnings:

  • s-table - Table component is missing TableHeaderRow. Tables should include headers for accessibility and proper structure.
  • s-table - Provide a s-table-header with a listSlot of ‘primary’

The structure I copied from Index table

      <s-section>
        <s-table>
          <s-table-header-row>
            <s-table-header listSlot="primary">Header 1</s-table-header>
            <s-table-header>Header 2</s-table-header>
          </s-table-header-row>
          <s-table-body>
            <s-table-row>
              <s-table-cell>Row 1. Cell 1.</s-table-cell>
              <s-table-cell>Row 1. Cell 2.</s-table-cell>
            </s-table-row>
          </s-table-body>
        </s-table>
      </s-section>

Hi @Vitalii,

Thanks for reaching out about these warnings. These appear to be false positives since the code addresses both warnings: the table header row exists and listSlot of primary exists too. We’ll look into these warnings and ship a fix them. For now, you can safely ignore them.

Some more details:

This only happens for Server Side Rendering. Once for initial page load. I was able to get rid of warning by moving rendering of s-table to client only.

1 Like