Axure Promotion · Axure RP · Axure Tutorial · Data Sorting · Learn axure · Repeater · Table · Jan 08, 2022

Axure Tutorial: Data Sorting - Repeater Elementary Tutorial

by WELLJOE

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.

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 (Default, Ascending and Descending).

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;