Adding Arrows for Dynamic Sorting

Expected Effect 

In a scenario where you can sort data dynamically by clicking the table header, you may want to add arrows to the table header to indicate the current sort basis and the sort rule (ascend or descend). The expected effect is shown in the following figure.

Implementation Method 

Use Condition Attribute together with HTML tags.

Template Preparation 

This document uses a template made in Multi-column Dynamic Sort for illustration.

You can download the template. 

Adding Condition Attributes 

Add three condition attributes to all cells with table headers, and name them Unsort, Ascend, and Descend. Set Attribute to New Value, select F(x), enter the following formula, and set Type to Formula.

Note:

You can select cells A2 to D2 simultaneously, add condition attributes, and modify details separately

• Unsort

• Ascend

• Descend

The steps are shown in the following figure.

Setting Cells to Display by HTML 

Select cells A2 to D2, choose Cell Attributes > Others, and set Display Content to Display by HTML. 

Effect Display 

On PC

Save the template and click Pagination Preview. You can see that the effect is the same as section "Expected Effect."

On Mobile Terminals

The template can be previewed on both the DataAnalyst and HTML5 apps. The effect is shown in the following figure.

You can download the example template. Add arrows for dynamic sorting .cpt