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.
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.
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…
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.
@Alan_G Any of these make your internal feature lists?
I hate being nag on these forums, but by doing all the work and tracking behind closed doors, it’s impossible to know what has actually surfaced to the team or not without pestering (let alone contribute solutions rather than just issues).
Hey @_Ryan
I appreciate you taking the time to write all this up, and I hear you on the frustration of not knowing whether feedback is landing, we do often intake feedback sort of silently from the forums here, but I did want reach out to make sure I’m capturing your request accurately so I can advocate for them internally.
On the sorting piece, are you looking for something that handles the full sorting logic, or more just the visual/interaction pattern (the clickable headers, icons, aria attributes) with you still managing the actual data ordering?
And for the column hiding on narrow screens, is the current listSlot approach falling short for you, or is it more that you want certain columns to just disappear entirely in list view rather than being reorganized?
Thanks again for pushing on this, feel free to ping me here and I’d be happy to get this feedback logged officially for you 
@Alan_G Thanks for replying.
On sorting, I’m just talking about the visual/interaction pattern. So column headings could be, for example, marked as “sortable”, and/or as “sorted desc” or “sorted asc” and even “next sort” (for what the sorting will be if clicked) so that the component can render the appropriate icon and implement the appropriate hover behaviour that is consistent across shopify pages. I’ve implemented this myself for my tables, but the behaviour doesn’t quite match what shopify have. And if I recall, I also lose the automatic header alignment (based on numeric values or not) and have to introduce that manually, in order to get the sorting icons in there reasonably.
It’s been awhile but my comment on the table component was about wide tables (even on wide screens) being clipped – so columns just fall outside the box that is displayed. This isn’t just a function of the number of columns and screen width – it’s a function of how wide each column is, and that can depend on data that’s in them – e.g. are the product titles long? The clipping is obviously not what’s intended for a table. I solved this by wrapping the whole table in a div that can scroll, but ideally the table could handle this, allowing, for example, the table body to scroll while the filters and search bar do not and adjust to the width of the viewport. This is what Shopify’s tables do (still based on some version of React Polaris, I believe) and it’s quite nice.
I am able to hide columns, but I’m not aware of a good way to query the width of the table that might help with auto hiding based on clipping or calculated widths. That might be nice.
The listSlot thing is fine for narrow screens – though see my post about how these don’t render properly in the mobile app.
I don’t know if there’s any progress using the web components for the main shopify pages (products, orders, etc), but the table features are in a state where you really can’t build anything as nice as them – certainly not in a way that will lead different implementations to maintain a consistent look and feel, which it think is some of the point of the web components. There just aren’t enough features in the components.
There is also no “data table” replacement – something where I can put column totals up top – and the present web component is not flexible enough to let me build one. At least I haven’t figured out how to do so in a robust way. This would need to work on mobile too.
Hey @_Ryan really appreciate you breaking all this down.
On the sorting piece, I think I understand where you’re coming from. Just to clarify - you’re not asking us to handle the data sorting, just the visual stuff like the icons, hover states, aria attributes, and alignment? So you’d mark a column as sortable and sorted=“asc” and the component takes care of making it look and behave right?
If you’re able to share a bit more detail on the mobile app listSlot issue you mentioned. You said it doesn’t render properly in the app - could you share a bit more on what you’re seeing there? Are you seeing this in iOS or Android or both, is If you have a quick code snippet or screenshot that’d be super helpful for me to flag this to the right folks. That one feels like something we might actually be able to dig into as a possible issue rather than just feature feedback.
Thanks again for pushing on this, really appreciate your detailed feedback. I’ll get this logged 
@Alan_G correct. My component handles the data sorting. I’d like the web component table header to, as you say, allow me to mark a column as sorted and sortable (to render UI inputs), and to take callbacks that indicate when the sorting UI is clicked.
On the listSlot issue, I created a thread a few weeks ago with details, but nobody seems to have seen it. Appreciate you taking this up over there: S-table not rendering kicker/inline listSlot when embedded in mobile app