Unfortunately I won’t be able to make it on the 28th, but one question I’ve got is around real-world strategies for how to create efficient reusable tables in my PenPot designs.
TL;DR: Need help creating multiple CSS Grid table instances in a project that I can edit/update at source without slowing my browser to a crawl.
The challenge
Our business is B2B and tends to deal with displaying a lot of data in various forms. The challenge I tend to face quite often is including instances of an example table of data, say with 6 columns and 10 rows in high fidelity visuals for a new feature across multiple pages (boards) for presentation. This could be across layers or just on one.
From my perspective, my main goal is to try to retain the ability to alter the parent table component if those in charge decide they want a column or row removed/added so it’s updated across the pages it’s used on (a task that’s obviously technically trivial with PenPot’s Edit Grid feature, however increasingly difficult when more instances are used, with browser slowdown and instance glitching being an ever-present issue).
How I tackle it (at the moment)
Workflow wise, I tend to use a table container with one header row, one body row (which is sometimes linked to a ‘body row’ parent component so I don’t have to redefine all the column widths of detached instances if things change down the line) and a footer (screenshot below).
The header and the body rows have the same CSS grid definition. I then dupe the body rows for what I need, input the example content and use instances of this table parent component in the layouts of the pages (could be anywhere from 3 - 10 pages per layer on average).
I’m aware this causes a lot of nested linking but I’m not sure how to do it any other way while keeping it editable without having to revisit each detached instance, or to edit the first then come through deleting and copy/pasting the updated version.
Alternate strategies?
The only workaround I’ve devised on larger projects where I know this will be an issue is to create the original table, export it as an image, import that image back in, use it in a board as a parent component and then farm instances of it out to use in the layouts - replacing the image when an update comes through…but it’s a trade-off of more time and lower-fidelity images next to crisp vectors for the sake of keeping ‘one source of truth’ for the table.
Any advice would be appreciated. Happy to answer any questions on it and/or alter my workflow to suit if there’s a better way. Thanks!
Save the date: Wednesday 28th October.
