Request for s-table: Give s-header-header an "omit" listSlot, and a few more

Polaris
1

It would be nice to be able to designate that some table columns just be hidden in the list view. For example, I have a user avatar in table that looks nice in the table view, but wastes precious space on small screens.

2

Also: I’m trying to make columns sortable, and it doesn’t seem possible (or at least it’s quite tricky, and likely fragile) to get the heading-click behaviour to match the usual Shopify tables. It strikes me that this is a behaviour that could be supported with some additional props and smarter formatting on the s-table-header.

Right now, my workaround is something like this:

<s-table-header
  key={header.id}
  format={meta?.format}
  listSlot={meta?.listSlot}
  aria-sort={canSort ? ariaSort : undefined}
>
  {canSort ? (
    <s-clickable
      padding="none"
      background="transparent"
      onClick={toggleSortingHandler}
      aria-label={`Sort by ${sortLabel}`}
      aria-pressed={sortState ? "true" : "false"}
    >
      <s-grid
        gridTemplateColumns="auto auto"
        gap="small-400"
        padding="none"
        alignItems="center"
        justifyContent={
          meta?.format === "numeric" ||
          meta?.format === "currency"
            ? "end"
            : "start"
        }
      >
        {headerContent}
        <s-icon
          type={sortIconType}
          size="small"
          color={sortState ? "base" : "subdued"}
        />
      </s-grid>
    </s-clickable>
  ) : (
    headerContent
  )}
</s-table-header>

Notice that I have to be careful to preserve the alignment of the numeric/currency headers because the s-table-header control of the alignment is lost. The look is also a bit cluttered compared to Shopify’s tables as the icons are always shown, rather than appearing on hover. I can add in hover behaviour, of course, but then the alignment is funny. And correcting the alignment messes with the “list” form of the table… so, yeah.

I do notice that the component is doing something to remove the sort icon (which doesn’t match the ones Shopify is using, by the way) in list mode, which is nice but also a bit odd and I wonder how robust it is.

Anyway, it would be nice to see some better features in the component around supporting sorting that can make it robust and match the rest of the Shopify style.

3

Tagging @Anthony_Frehner for visibility. I can see y’all are working hard on these components and they are quite promising, and I appreciate the effort and responsiveness.

I wish they were open so I could help add these features rather than just complain on these forums-- but also I can recognise that letting people deploy their own versions of the web components in part defeats the purpose of achieving consistency across the platform. But of course, at the moment, we’re not quite there anyway…

4

Another one: The web components table will clip the table contents (i.e. columns fall out of view) when the table gets narrow relative to the content, and there is no longer any scrolling capability (compared to the React Polaris and Shopify’s own tables) to view the clipped content. I can wrap the whole table in a <div> that scrolls on overflow, but this leads to scrolling any search or filtering slot, which is not ideal. The web component should mirror the behaviour of Shopify’s tables (e.g. the Orders index table). These tables even allow fixing columns during scrolling! Though I’d put that at a lower priority than just making sure no content is inaccessible.