Compact table with shorter row height

[apombo-ux]

Hi there,
I've designed an update to the Studio Flow Configuration floating sidepanel that includes a small table, but with the default (and not modifiable) table component, the rows felt too bulky for the sidepanel space.

Here it is with the default required padding:

And here's what it looks like with less padding:

You can also see it in a prototype here (select the Trigger widget, then '10 numbers assigned' in the bottom left to see the full table), which shows it in context of the other content in the sidepanel: https://www.figma.com/proto/18lyQmm2Xsd3nuYUDkjZfi/Phone-Number-Helper?page-id=1%3A28&node-id=329%3A300765&viewport=232%2C231%2C0.11&scaling=min-zoom&starting-point-node-id=329%3A300765&show-proto-sidebar=1

What's the best practice in this case-- would we need to rebuild the whole table component out of primitives to customize it or is there a way to 'break' the component out of Paste to access unmodifiable properties for our use case?

(I've also considered putting it in an accordion or having a maximum of 5 rows display at a time in order to minimize space. None of those felt as good as just having a more compact table, but if you have concerns about breaking the table component in this way those are other options I'd look at.)

Or, is there another component or layout that you recommend that's within the existing guidelines?

Thanks!

[nkrantz]

Hi Amy! We're discussing this as a team and will post an update here soon with more info.

[gloriliale]

Hi @apombo-ux! We don't have a way to change the row-height for Table, but does this information have to be in a table? If they were a list in a listbox, it might be easier to create a compact view, as well as navigate through and around it with keyboard interactions. We can continue discussing after break when we've got more time to develop ideas.

[apombo-ux]

I don't see a component called listbox-- do you mean a listbox like the primitive that's mentioned as up next in the Dec newsletter, or like breaking out and repurposing the list that drops down from a combobox, or something else?

I'd chosen a table for a couple reasons-- it gave me built-in column header labels and content alignment, the option of paging when there were lots of records (it's not a common use case but some customers have flows with hundreds of numbers), and it created visual continuity with the larger Phone Numbers table of active numbers (which was something that was preferred in earlier design reviews)-- but if it's a non-starter to modify it to fit well in the sidepanel l can explore more alternatives. Will revisit this after break!

[kelseycavitt]

@apombo-ux Thanks for reading our newsletter! Yes, our team is going to be building a listbox primitive soon, which will allow builders to use a powerful, but flexible component to build things like you're wanting! This primitive will support easy styling and customization in the same way other Paste primitives do today, while also being accessible. See an example here.

If you're ok with the spacing of the table, you could continue using this, as I did a quick count and you're really only adding a couple of extra phone numbers into view with the compact version, and it achieves the other design elements you're looking for.
If you want to design a custom list that does what you need that isn't a table, you don't have to use a component straight out of the Figma library. Paste is composable, so you could use labels, dividers, buttons, badges, etc. to compose the design you need. Once your design is ready, your developers could use the listbox primitive when it's ready to bring your design to life in the product.

Let us know if you have any more questions or would like some feedback if you have an updated design.