Master Axure Repeater: Build Dynamic Data Tables Step‑by‑Step

What Is an Axure Repeater?

The Repeater is a special Axure widget that acts like a temporary data table, allowing CRUD (create, read, update, delete) operations on a dataset and enabling dynamic data display.

Basic Usage

Drag a Repeater onto the canvas; it automatically creates an "Item Load" event for each row, with the first column’s value bound to each item. Visually, a Repeater consists of multiple rectangles and resembles iOS’s UITableView component.

You can add or modify rows and columns, import images into columns, and column names must be in English.

Data Binding

Drag a table, keep only the header row, and delete empty rows.

Place a Repeater below the header and name it.

Enter the Repeater, paste the header inside, and delete the original rectangles.

Rename the header to “Delete” with red font for the operation column.

Adjust the internal coordinates to (0,0) to create placeholder rows.

Define column names (English only) that match the header.

Insert sample data rows.

Rename each header component to match its column name.

Bind each cell to the corresponding Repeater column via the Case 1 event.

After binding, the table populates dynamically.

Row Deletion

Add a click event to a delete label inside the Repeater.

Mark the row to be deleted (using this), similar to batch‑delete checkboxes.

Execute the delete action on the marked row.

Adding Rows

Create an “Add” button and a hidden dynamic panel as the add form.

Convert the panel to a dynamic panel and name it.

Design the add form inside State 1.

Place the panel at the bottom layer and hide it initially.

Attach a click event to the add button to show the panel.

On form submission, bind input values to local variables and add a new row to the Repeater, mapping each column to its variable.

After adding, hide the panel, clear inputs, reset dropdowns, and reset the cancel button.

Updating Rows

Click a “Modify” button, mark the row, and open a dialog.

After editing, click “Confirm” to apply the update action.

Finally, clear the row’s mark to avoid affecting subsequent updates.

Filtering

Add a name input field and a search button.

Attach a click event to the button that adds a filter to the Repeater.

Pagination

The Repeater supports pagination; you can set items per page and the start page.

Create a pagination widget (a rectangle) and set it as a radio‑button group.

Define selected styles (blue background, white text).

Add click events for “Previous”, page numbers, and “Next” to update the current page and highlight the active button.

Layout Options

Repeater layout defaults to horizontal (one item per row). You can switch to vertical or grid layout by setting the number of items per row.

Repeater Item and Repeater Properties

Each Repeater item has its own properties (e.g., itemCount indicates the number of loaded items after filtering). The Repeater object itself can be referenced via a local variable for scripting.

Target Object

In interactions, the component that triggers the event is the source (referenced as this), while the component being acted upon is the target (referenced as Target).

Use this for the event source.

Use Target for the component to manipulate.

Typical Use Cases

Repeater is ideal for scenarios where many items share the same layout but differ in data, such as table rows, product listings, or any repeated UI element. Instead of manually duplicating items, you create a single template and let the Repeater generate the rest dynamically.