Data grid column size controls


#1

I use data grids quite often because our application and websites contain a lot of tables.

Often the size of the columns in the data grid is also important.

I know that I’m able to use the curly brace notation in the data grid contents to control the size:

{10, 10, 10, 10}

However, I’ve never been quite sure how these work (Especially when they don’t add up to 100), and they don’t offer the amount of quick control I need in a lot of cases - I can often spend a long time playing with the values just to make things align. Take this example, where I’ve had to use two data grids and I’m trying to align the second’s columns with those of the first:

You can see in the lower data grid, the inside column lines are not quite aligned with the ones above them, and that’s because they’re two separate data grids.

I’ve played around with the curly braced column sizes for a while, but can’t get it quite right.

How likely are you to consider a feature which would allow for dragging column sizes using the mouse, for quick resizing, as well as alignment options when I’m trying to ensure that the columns on multiple different data grids align properly?

I suggest it because it would seem to fit with Mockups’ goal of being for fast mock ups.

Of course, I understand that perhaps people producing fast mock ups shouldn’t care so much about their data grids being nicely aligned!


#2

Hey, Anthony :slight_smile:

The Data Grid is something that we have started talking more about. It is, by far, our most complex control, so changing it is difficult.

That being said, you are not the first person to bring these issues up to us, and we have started to talk about how we can make the Data Grid better. We are determined to make it easier to use, whether that means adding to the current control, or rewriting it entirely.

I wish I had a better workaround than just “fiddle with it” but the column proportions can be finicky because they are affected by the content within them. I assume you have already seen the Data Grid documentation, but I’ll link it just in case.

I’ll make sure the team knows you’re looking for draggable column sizes, and I hope we get to talk soon about our plans for the Data Grid.

Thanks for taking the time to write such concise feedback, Anthony. We really appreciate it.


#3

We also use a ton of tables. Use Excel to manage your table data & layout, and simply copy/paste into the grid. Can setup column titles, easy to manipulate data and columns, use a formulas to set widths and alignments, and get the add to 100 (percent). Simple sample attached.


#4

Looks interesting. Mind sharing a link to that (modified) excel template?


#5

This looks quite comprehensive!

Unfortunately the biggest issue I have with tables is visual alignment. For example if I have two tables with a different number of columns, but want some of those columns to align across tables.

I suspect there’d be just as much trial and error if I used your spreadsheet.


#6

On the column alignment, Balasmiq basically add’s up your column widths and then turns them into % of the total width – so if you say 10 10 10 10, it gives each 25% of the space of the table width. So, if you make sure that ALL of your columns on a given table add up to 100 (or 100%), then you should be able to more easily align stacked tables as you can compare the cumulative % of the columns from table to table.

For example, to align the last column in a 3 equal column table with a 2 column table, use 33 33 34 on the first, 66 34 on the second (assumes the table widths are the same).