TABLE WIDGETS

MORE RESOURCES

© 2002-2016 Axure Software Solutions, Inc. All rights reserved. Axure ® is a registered trademark of Axure Software Solutions, Inc.

AXURE

RESOURCES

LEGAL

CONNECT

EMAIL

MOST COMMON USE

ORGANIZING AND PRESENTING DATA

A table is used to organize data into rows and columns.

EDITING

ADDING AND DELETING COLUMNS AND ROWS

To add a row or column, right-click a table cell. Choose from "Insert Row Above," "Insert Row Below," "Insert Column Left," and "Insert Column Right."


To delete a row or column, right-click a cell in that row or column and then choose "Delete Row" or "Delete Column".


You can also perform these actions from the Properties tab, where there is an icon for each action.

RESIZING TABLE CELLS

A single column or row width can be resized by clicking a border and dragging.


You can also set a cell's width and height in the "width" and "height" fields in the Style tab. To resize multiple cells at once, select the cells with a click-drag or by holding [SHIFT] and clicking each cell, and then use the "width" and "height" fields.

ADDING TEXT

Double-click a table cell to edit the text of that cell. (Double-clicking gives you access to the most common editing function for each widget type.) If you want to add new text to a cell, you can just begin typing while the cell is selected.


If you'd like add multiple lines of text to a single cell, press [SHIFT] + [ENTER] to add a carriage turn inside the cell.


Pressing the [ENTER] key by itself will move you to the cell below. Pressing the [TAB] key will send you to the cell to the right.

LOCATION AND SIZE

To move a widget, drag and drop it into place or use the arrow keys to nudge. You can also choose the exact location of a widget using the "x" and "y" fields in the top toolbar or in the Inspector’s Style tab.


When a widget is selected, a green border is drawn around it. Handles on the border can be dragged to resize the widget. To maintain the aspect ratio of a widget when resizing via the handles, hold the [SHIFT] key while dragging. Drag a column or row border to resize that specific column or row.


Widgets can also be resized to a specific pixel value. Use the “w” and “h” fields in the top toolbar or Style tab to set the widget size in pixels. To constrain the widget’s proportions, click the “Maintain aspect ratio” icon between the “w” and “h” fields.


Rows can also be sized to the text they contain. Double-click the border below a row to automatically size the height of the row to its contents. (Note: This is only necessary if the row is taller than the text; rows will automatically expand to accommodate taller text.)

STYLING

Editable properties of a table widget's formatting include: text font and family; line, fill, and text colors; and border color and thickness. These properties can be controlled from both the Style tab of the Inspector and in the Style Toolbar at the top of the interface.


Each cell can have its own text and fill styling, and its own border color and thickness.

INTERACTIVITY

INTERACTION STYLES

Interaction styles are alternative sets of style properties (e.g. color, border, font weight) which are applied in certain situations, for example after a widget is clicked.


Table widgets can have the following interaction styles:


MouseOver: When the cursor moves over a widget

MouseDown: When the widget is clicked on but not yet released

Selected: When an interaction has set the widget to its selected state

LINKS

The quickest way to add a link to a table widget is to select the widget and click "Create Link" in the Interactions tab. A list of pages in the project will appear. Click on the name of target page to create the link and close the dialog. You can add an interaction to the whole table or to a cell. Learn more about creating interactions here.

DYNAMICALLY CHANGING TEXT ON A TABLE CELL

You can use the "set text" action to change the text on a specific table cell.

COPYING DATA FROM EXCEL

You can copy table data from Microsoft Excel (or a similar application) and paste it into RP as a table widget. First, copy the table cells in Excel. Then, in Axure RP, right-click the canvas and select "Paste Special > Paste as Table".

LIMITATIONS AND WORKAROUNDS

MOUSEOVER STYLE FOR ROWS

To give the appearance of a MouseOver or rollover style for an entire table row,  you can add a rectangle on top of the row. Give the rectangle a semiopaque fill and then specify its MouseOver Interaction Style.

MERGING TABLE CELLS

Table widget cells cannot be merged. To give the appearance of merged table cells, you could place a rectangle over the cells that would be merged.

ADDING ROWS, DELETING ROWS, SORTING, AND FILTERING

To prototype the appearance of adding rows, deleting rows, sorting, or filtering a table, you could use a multi-state dynamic panel. Each state of the dynamic panel could have a table widget with the expected changes already made. When the change needs to occur, show the appropriate dynamic panel state.


If you need to dynamically add rows, delete rows, sort, or filter, use a repeater widget instead of a table.

NOT ADAPTIVE

All aspects of table widgets are consistent across all adaptive views. To style a menu differently across adaptive views, you could place a different table widget in each adaptive view, "unplacing" from each view the table widgets designed for other adaptive views. (For advanced applications, you could also consider using a repeater widget.

Each table cell can have its own interaction style.


In each scenario, the alternative look you've configured for that interaction style will be applied to the widget. If you haven't set up a given interaction style, the widget's look will remain unchanged during that interaction.


The interaction styles of each widget are configured in the Properties tab. Click the name of an interaction style to open the "Set Interaction Styles" dialog. Check the checkbox next to a style property and configure it to add it to the overall interaction style. In addition to choosing from specific style properties, you can also choose to apply a widget style as an interaction style.