Axure tutorial: Table Data Addition and Deletion - Repeater Intermediate Tutorial

Adding and deleting table data is a common feature in table data operation. These features can be realized quickly and well through the repeater. In this tutorial, we use the tables made in Axure Tutorial: Table Making - Repeater Elementary Tutorial.

Features to be Realized

Enter data in the input box of the table. When you click the Add button, a row will be added to the table, and the data is the entered data.

How to Realize these Features

Preview the completed prototype for this tutorial 

1. Widgets Setup

1. As shown in the image above, make the table headers.

2. To create the operation bar of the table, we need to drag in four text fields named First Name, Last Name, Age and Birthday. Drag into a dropdown with online and offline options. Then drag in an Add button.

3. Modify the data table of repeater and add delete button.

2. Interaction Setup

1. Sets the error style for text fields. When clicking the Add button, if the text field value is empty, we need to set it as the error style.

2.  When clicking the Add button, if all text box values are not empty, we need to set to add a new row in the table.