We can expand on our list by binding a click event on a field in the table header to reverse the ordering so that when we click on Electricity, it will sort the dams the other way around.
We will use conditional styling; if you are not familiar with it, you will be after completing the Adding styles conditionally recipe.
To make it clear which way we are ordering, we should introduce two CSS classes:
.ascending:after { content: "25B2" } .descending:after { content: "25BC" }
Here, the content is the Unicode representation of an arrow pointing up for ascending and pointing down for descending.
First, we should keep track of the order with a variable order that will be 1 when ascending and -1 when descending:
data: { 
