Balsamiq for Desktop Docs > Working with Data Grids / Tables
The Data Grid control functions like many other text-based controls. It uses commas as column separators and new lines as rows. A basic table with three columns and two rows would look like this:
First Name, Last Name, Email Address firstname, lastname, firstname.lastname@example.org
You can choose whether to show the first row as a header row in the Property Inspector, as well as specifying the row height, row colors, and grid lines.
Text in the Data Grid can be formatted as bold, italic, etc. using the same syntax as other text controls.
Mockups lets you specify individual width and alignment options for each Data Grid column.
Here's a quick video showing how to do this:
Here are the details for creating column widths:
Data Grid supports sort icons in headers using the following text:
Data Grids support a single checkbox or radio button in a table cell using the following text:
Sometimes you want to create line returns in a table cell. To do this, you can use "\r" to create a line return.
The code example below would print on two lines.
Some people like to prepare tables in a spreadsheet application like Excel. You can copy and paste a range of cells directly from Excel into the Data Grid/Table component. Just copy/paste and it will just work. It also works in the opposite direction from Mockups to Excel.
Note: If you have commas in your cells, you will have to escape them with a backslash like this:
The component recognizes both commas and tabs as delimiters. Anything else should be populated into cells.