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.

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;

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.

#axure widgets #ux design #Axure templates #Axure tutorial #Axure

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.

--

--

--

We Only Provide High-Quality Axure Tutorial, Axure Libraries, Templates.

Love podcasts or audiobooks? Learn on the go with our new app.

Tools & techniques to help you find the most promising research participants

How You Can Improve UX with Microinteractions. Part I

As a Designer, I learned to code, and you should too

Juggling the balance between “free to play” and “pay to win” in mobile games

Introduction

Design Thinking and Agile

The Enso Symbol

Bonded Rubber Mulch Installers in Bridgend #Rubber #Mulch #Play #Areas #Bridgend https://t.co/DrjIh5

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Well Joe

Well Joe

We Only Provide High-Quality Axure Tutorial, Axure Libraries, Templates.

More from Medium

Axure Tutorial: Common Mobile Login and Registration Page

Axure Tutorial: Making Scatter Chart with Repeater

Axure Tutorial: Data Transfer Across Pages with Repeater

Axure Tutorial: High-Fidelity Dynamic Slider