Advanced UI elements (table, sitemap, tree pane)

Some UI elements have more powerful editing capabilities that are worth describing in more detail.

The table element

The table element lets you create and edit data tables visually. Click into individual cells to edit text, and use the handles around the table to add or rearrange rows and columns.

Selecting cells, rows, and columns

Click a cell to select it. Double-click a cell to start editing its text.

To select an entire row or column, click the grab handle on the left edge (for rows) or top edge (for columns). While a row or column is selected, a control bar appears with options like alignment, wrap/clip, sorting, and delete.

Editing cell text

Double-click a cell to enter edit mode. A text editing toolbar appears with options for bold, italic, font size, and color. You can also insert icons into cells using the icon button in the toolbar. The icon popup shows checkboxes and radio buttons in the first row for quick access, useful for creating forms or checklists inside tables.

Press Tab to move to the next cell, Shift+Tab to move to the previous cell, Enter to move to the cell below, or Escape to exit edit mode. Arrow keys also navigate between cells.

Alignment can be set per column using the control bar, or per cell using the text editing toolbar. Cell-level alignment overrides the column setting.

Adding, removing, and reordering rows and columns

Small gray dot handles appear along the edges of the table when you hover over it. Click a handle to add a row or column at that position.

To remove a row or column, select it by clicking its grab handle, then click the trash icon in the control bar or press Delete/Backspace. To reorder, drag the grab handle to a new position.

Resizing columns and rows

Drag the separator between column headers or row edges to resize. Double-click a separator to auto-fit the column or row to its content.

When the entire table is resized, columns adjust proportionally.

Sorting indicators

Select a column and use the sort control in the control bar to cycle through sort states: ascending, descending, bidirectional (both arrows), and unsorted. Ascending and descending reorder the actual row content. Bidirectional shows both arrows as a visual indicator without reordering rows. Only one column can have an active sort direction at a time.

Header options

Table-level display options include whether to show a header row, a header column, or numbered rows. You can also configure row height, row colors, alternating row colors, and grid lines.

Text wrapping can be set at the table, column, row, or cell level — use the wrap/clip toggle in the control bar (when a row or column is selected) or in the text editing toolbar (when editing a cell).

Pasting data from a spreadsheet

You can copy a range of cells from a spreadsheet application like Google Sheets or Excel and paste them directly onto the Balsamiq canvas. A new Table element will be created automatically with the pasted data.

This also works for pasting into existing table cells, and in the opposite direction from Balsamiq to a spreadsheet.

Virtual rows

When a table is taller than its data, additional empty rows are displayed. You can click into these virtual rows and start typing to add new data rows seamlessly.

When rows are clipped (not all visible), three dots appear when the table is selected. Click them to auto-size the table to show all content.

The site map element

You can create simple site maps from a text outline using the Site Map element.

Edit the Site Map element by double-clicking or selecting it and pressing ENTER. Edit the outline to create parent-child relationships. Each line represents a box (or page/node) in your sitemap. Use hyphens to indent child boxes beneath a parent. Here's an example:

Home
- Products
-- Product 1
-- Product 2
- About Us\rCompany
- Support
- Blog

Using the selection toolbar, you can add links to the nodes in the map and change the text properties and orientation of the map (vertical or horizontal).

This is what the outline above looks like in vertical (default) or in horizontal orientation:

Generating site maps automatically

Next to the options for changing the orientation in the selection toolbar is a button that allows you to automatically populate a site map based on the order and structure of your boards in the boards Panel.

Each time you click the "Populate from Project" project the site map will be updated to reflect the current project structure.

If you are using a parent-child hierarchy, child boards will be shown as child nodes in the site map, as shown below.

Links will be added to each node in the site map to the corresponding board in your project.

Notes and options

• Single Tree Support: Site Map expects the first line to be the top-most parent, and only one of these can exist because it only makes a single tree. If you want to make multiple trees, just add more Site Map elements.
• Multi-Line Text: You can use \r to create line returns on text in a box like this: About\rUs
• You can't resize Site Maps, but if you are unable to view the entire map on your canvas you can try changing the orientation or showing one of the nodes expanded in a separate Site Map, as shown below.

The tree pane

The Tree Pane element allows you to create a hierarchical list of objects, similar to what you would see in a file explorer or vertical navigation panel.

You can show common icons next to items in the list, such as folders, files, and other types of expand/collapse components.

Double-click to edit the text and you will see how to use it ("f" for closed folder, "F" for open folder, etc.).

To indent items, use a space or dot (".") for each level in the hierarchy you want to indent to.