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

Introduction 

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

Table Data Addition and Deletion

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

Through the Add Rows to Repeater feature of the repeater.

Preview the completed prototype for this tutorial 


1. Widgets Setup

Header of table

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

table actions

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.

Error state events

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.

Add  a new row
Add a new row-repeater

In this way, all the settings are completed. If you have any questions and suggestions, please leave a message.

If you like the article, please share it with others with page link, thanks for your supporting! ❤

Note: Click here to download the completed RP file for this tutorial (RP 10 or up).


Well Joe @AxureBoutique, a technical writer and teacher, focuses on Axure prototype design and product design.


Leave a comment

Please note, comments must be approved before they are published

This site is protected by hCaptcha and the hCaptcha Privacy Policy and Terms of Service apply.