Balsamiq Community Discussion

Centered headings of Data Grid


When using a data grid, I can set the width % and the positioning of the data to be L,C,R. Is it possible, within the data grid, to have the headers centered and the data L,C,R?

I know the obvious fix is to overlay the headers with a text area or some other control but that doesn’t always work.

I’ve tried using the button bar control which gives me the headings centered but the column headings never seem to line up with the DG columns and sometimes, there’s one extra tiny button that gets added to the end that I can’t eliminate.


Hi Michael

Thanks for the post. Unfortunately, the Data Grid control only supports a single column width/alignment line but you can still achieve your goal relatively easily. Instead of overlaying the headers, just create your table using two Data Grid controls. Here’s what it would look like:

So the top Data grid has the headings centered and the lower data grid has the data left-aligned. Do you think that would work for you?

To make this even easier to manage, you could group the two controls and create a Symbol for re-use: Working with Symbols.

I have attached a BMPR containing that table so you can take a look: two_datagrids.bmpr (45 KB)

All the best,



That is an awesome idea.
I should have thought of that myself.
I’m sure that would work beautifully.

Mike P.


An issue has come up…
I’m using the ‘\r’ control to force a line before and after my title (looks better) and for some reason the first column heading is not showing. When I remove the control, it comes back.

Any idea?

Mike P.


Not sure, Michael.

Would it be possible to copy/paste the data grid contents in a PM to us? That will allow us to test it on our end.