I’m trying to make a mockup of a list of items that uses table-like structure. That is, there are constraints on each row relative to the rows and also on each column, so widths are consistent.
What’s the best way to do this in Penpot currently? I guess each row would be a flex item they’d be grouped together in a flex too? But then how would the widths between individual elements ("td"s in HTML) be interrelated? Would I just have to fix the widths of each element in the row to some approximate value?
Ideally, we’d have a way to do grid layouts too. It would definitely solve mocking up tables like this, and it’d help for form layouts and all sorts of other layouts too.
Well, Grid Layout will still take a bit but we are already working on it and as we don’t know how to keep a secret you can follow the progress here.
In the meantime, I think your approach makes sense. Being independent Flex boards, all rows and their content should share the same settings. Invividual elements won’t be technically interrelated but will behave as if they are. The parent element should be also a Flex board to easily add and reposition the inner rows.
In this example that I’ve just made, all elements (text layers) sizing is “Width: 100%” except the ones for the Age column, that have fixed sizing. That way you can treat spaces differently depending on the type of data.
Right now, this is best I can come up with, but I’m sure the community here will find other creative ways to address challenges related to tables Contributions are welcome!
It would definitely solve mocking up tables like this, and it’d help for form layouts and all sorts of other layouts too.
Contributions are welcome!