Table Widgets

Editing Table Data

You can add text to a table cell or edit its current text via any of the options below:

• Double-click the cell to enter text-editing mode
• Select the cell and press ENTER to enter text-editing mode
• Select the cell and begin typing. (This option is only available if you have disabled single-key shortcuts)

Pasting from Spreadsheet Applications

You can copy table data from spreadsheet applications like Microsoft Excel and Google Sheets and paste it into Axure RP as a table widget. First, copy the table cells in your spreadsheet app. Then, in Axure RP, right-click the canvas and select Paste Special → Paste as Table.

You can also paste tabular data into an existing table widget. To do so, select the top-left cell of the table and press CTRLV or CMDV. The pasted data will fill the cells already present in the table.

Note

New columns and rows will not be added to existing table widgets when you paste data into them. If the table is too small to accommodate the pasted data, add more columns and/or rows to the table before pasting the data.

Editing Rows and Columns

Adding, Deleting, and Moving Rows and Columns

To add a row or column to a table widget, right-click one of its cells or one of the grey row or column controls. In the context menu, choose from the following:

• Insert Row Above
• Insert Row Below
• Insert Column Left
• Insert Column Right

To delete a row or column, right-click a cell in that row or column, or right-click the appropriate grey row or column control. In the context menu, choose Delete Row or Delete Column.

To rearrange a table's rows and columns, select a grey row or column control and then drag it up/down or left/right.

Resizing Rows and Columns

You can change a row's height or a column's width by clicking one of its borders and dragging.

You can also set an individual cell's width and height with the W and H fields in the Style pane. This will automatically resize the row and column that the cell is a part of.

To resize multiple cells at once, select the cells with a click-drag or by SHIFT-clicking each cell. Then, use the W and H fields.

Special Interactions

Interacting with Individual Cells

Each cell in a table widget has its own events that you can use to set up interactions specific to that particular cell. For example, you can configure a cell's Click or Tap event to show another widget on the page.

You can also target individual table cells in interactions and conditions. For example, you can change the text on a cell with the Set Text action, and you can evaluate the text on a cell with the text on widget value option.

Tip

When you mouse over a cell's name in the Select Widget dropdown, the cell is highlighted in yellow on the canvas. Look at the Column 3 cell in the screenshot above for an example.

You can also name individual table cells in the Interactions and Notes panes to make them easier to find.

Limitations and Workarounds

Images

Table cells cannot contain images, only text. To simulate a column of images, create an empty column in your table and place image widgets on top of it.

Merging Cells

Table widget cells cannot be merged. To give the appearance of merged table cells, place a rectangle widget over the cells that would be merged. Then, set the text on the rectangle to the text that would have occupied the merged cells.

Alternating Row Colors

To give the appearance of alternating row colors, change the fill color of the cells in every other row to your desired color.

Tip

You can use the grey boxes along the side of a table widget to select all the cells in a row, and you can CMD/CTRL-click them to multi-select rows.

Mouseover Style for Rows

To give the appearance of a mouseover or rollover style for an entire table row, place a rectangle widget on top of the row. Give the rectangle a semiopaque fill and assign it a MouseOver style effect.

Dynamically Adding, Removing, Sorting, and Filtering Rows

Table rows cannot be dynamically added, removed, sorted, or filtered in the web browser. To prototype this behavior, try one of the following:

• Use a multi-state dynamic panel to simulate dynamic changes to a table widget. In each state of the dynamic panel, put a table widget with the expected changes already made. When a given change needs to occur, show its corresponding dynamic panel state.

• If you need to be able to make true dynamic changes to a table, use a repeater widget instead.

Not Adaptive

All aspects of table widgets are consistent across all adaptive views. To style a table differently across adaptive views, you can "place" a different table widget in each adaptive view, "unplacing" from each view the table widgets designed for other adaptive views.