I’ve migrated my app to web components except for a few DataTable components (and their dependencies) where I need the totals row.
It’s not too hard to put a row with totals at the top, but there isn’t a good pattern that I know of for styling it properly on both desktop and mobile app (where the display is as a list regardless of the setting for the table).
I’m curious if the community has any good patterns for this, and if not, I’d love to re-ping the Shopify staff that this is still an oversight of the new library.
We did something similar and used the Index table composition. Try these links Index table and Table. There is a good explanation there and various code examples. If you have a specific problem that you need help with, give more details and I’ll see if we can help with a tailored solution.
@storelift I’m specifically asking about how to include a totals row between the headings and the data rows that works reasonably in terms of styling on both desktop and mobile. If you’ve done this do you mind sharing a screenshot how how it looks and an outline of the totals row composition?
I’ve built plenty of index-style and tables with data (but no totals) with web components and am quite familiar with the docs. They do not discuss this use case at all, hence my question and this post.
There isn’t a perfect solution, unfortunately, as you can’t hack the table. The best we could find was to treat the totals as the first s-table-row inside s-table-body. You can use the layout components (s-box,s-stack, s-text and s-badge) to style that row to make it look like headings. To get it to work on mobile as well, you need to wrap the content of each totals cell in a small layout block. Try s-box background=“strong” padding=“small” borderRadius=“small-100” . Inside, use s-text type=“strong” for emphasis, maybe s-text type=“small” color=“subdued” for secondary scope text. These are standard components and should render consistently. On desktop, the "Totals"band sits across the first row, aligned with the columns. On mobile, the same block appears in the first card and reads clearly as a summary, with header labels provided by the table component. Not perfect, but you can get it to look good with a bit of fiddling.
@storelift thanks for that suggestion. I may give it a try.
Anyone at Shopify know if a 1st class totals row that works desktop and mobile is in the works? Seems like it could be done with an additional s-totals-row to go with the header row.