Axure Tutorial: Data Sorting - Repeater Elementary Tutorial

Introduction

Data sorting is a common feature in table design. Through the use of repeater, this feature can be completed quickly and well.

Features to be Realized

Click the arrow button in the table header to switch the sorting of table and the direction of the arrow.

How to Realize these Features

Through the sorting feature of repeater. When clicking the arrow, if the arrow is in ascending or descending state, add a sort to the current column. If the arrow is in unsorted state, remove the sort.

Table Data Sorting

Preview the completed prototype for this tutorial


Widgets Setup

1.  Here we directly refer to the tables made in the course Axure Tutorial: Repeater Elementary Tutorial - Table Making. Only 2 sorting icons need to be added.

Sorting icon states

2. Make sorting icons into dynamic panels. Make three statuses: Default, Ascending and Descending.

Interaction Setup

1. When the set sorting icon is clicked, the dynamic panel will be set to the next state (DefaultAscending and Descending).

table sorting

2. When the dynamic panel changes, if the dynamic panel states is ascending, add ascending sort to the table;   if the dynamic panel is in descending state, add descending sort to the table;  if the dynamic panel is in default state, remove ascending and descending sort to the table; 

Birthday sorting

3. Similarly, set the sorting of birthdays in the table.

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

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 reCAPTCHA and the Google Privacy Policy and Terms of Service apply.