Overview
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.
Example
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:Unsort
| Cell | New Value Formula | Formula Condition |
|---|---|---|
| A2 | "<font color='gray'>↑↓ </font>" + $$$ | $asc<>"A3" |
| B2 | $asc<>"B3" | |
| C2 | $asc<>"C3" | |
| D2 | $asc<>"D3" |
Ascend
| Cell | New Value Formula | Formula Condition |
|---|---|---|
| A2 | "↑<font color='gray'>↓ </font>" + $$$ | $asc="A3"&&$a=1 |
| B2 | $asc="B3"&&$a=1 | |
| C2 | $asc="C3"&&$a=1 | |
| D2 | $asc="D3"&&$a=1 |
Descend
| Cell | New Value Formula | Formula Condition |
|---|---|---|
| A2 | "<font color='gray'>↑</font>↓ " + $$$ | $asc="A3"&&$a<>1 |
| B2 | $asc="B3"&&$a<>1 | |
| C2 | $asc="C3"&&$a<>1 | |
| D2 | $asc="D3"&&$a<>1 |
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.
Template Download
You can download the example template. Add arrows for dynamic sorting .cpt
