Balsamiq Community Discussion

Expanding rows in table/data grid

Hi all, I need to mock-up a table with expanding rows… something similar to as is shown in the second table in the Balsamiq user guide under ‘Tip 1: Group or hide as much information as you possibly can’ here: Designing Effective Data Tables | Wireframing Academy | Balsamiq


Is there a simple way to do this, or in that example has this expanding section just been manually drawn over over the top of a data grid?

I’m trying to make something like this: Sencha | Examples

Hey @philryan.

Great question, my friend. Your suspicion is correct: the data grid was manually expanded (by creating a bunch of empty rows) and then a rectangle controlled was overlayed to make it appear as though it was expanded.

Our data grid cannot do this on its own yet, but we are planning on doing a data grid re-write next year, and this is something we are considering. It’s our oldest control and needs a little bit of love. :slight_smile:

Let me know if that answers your question, and if you have any others!

Ah ok, I thought it might be a bit of “draw a rectangle over it” trickery!
Looking forward to see the enhancements to this, as we use a lot of tabular data in our systems, so a bit of extra flexibility in this area would be awesome.
Thanks Brendan.

1 Like