How to customize the sort order of tables
This article explains how to customize how Datawrapper sorts your text columns. This way, you can enable readers to sort
- by a ranked category, like Low/Medium/High or Today/Yesterday/Last week
- by numbers, even when you put them in cells with other numbers or use Markdown, like **8,382** (12%)
The problem: Alphabetical sorting when you don't want it
In Datawrapper tables, columns are sortable by default. (You can change that by selecting a column and de-selecting Make sortable.)
This allows a reader to click on any of the table headers, and the table will sort by that column. On the first click, it will sort by lowest number or first alphabetically. On the second click, it will reverse and sort by highest number or last alphabetically.
That makes sense in a lot of cases. But when your categories have an intrinsic order (like cloth sizes, prioritizations, month names) you don't want them to sort alphabetically, but by that order.
Here's an example:
Try to sort the columns. You'll find that only the cases columns sorts as intended – that is, by intrinsic order. That's because every column except for the cases column is a text column, so they all get sorted alphabetically.
Note that the Cases (as share) column is a text column, too, because we added Markdown (the ** part) to format the numbers. You can learn more about Markdown in this article.
The solution: text@@order
- To sort Low/Medium/High in the right order:
Low@@1 / Medium@@2 / High@@3 - To sort cells with Markdown-formatted numbers or multiple numbers:
**300** (12.5%)@@300 / **30000** (0.2%)@@30000 / **130** (0.2%)@@130 - To sort cells by dates:
Today@@2021-03-04 / Yesterday@@2021-03-03 / Last week@@2021-02-27
Let's go back to our example. Here's how the full data for our table looks like with the added sort order:
And here's what you'll see in step 3: Visualize, and what your readers will see:
Try to sort the columns again. Now they get sorted by the order we defined behind the two @-signs.