For up-to-date Handsontable documentation, see handsontable.com/docs.

Have you ever wondered if you could store your data with various units and sort them really easily in Handsontable? Of course you can. You don’t have to take my word for it, take a look at the examples below and you’ll see for yourself.

The setup

• To enable the sorting functionality in Handsontable, you will need to set columnSorting in the config object to true (for an initial sorting configuration, see docs for more information).
• Define the sortFunction property for the column to sort it using the custom algorithms.

How does the sortFunction option work exactly?

Every time a column is sorted, it uses a comparison function to detect which of the two currently processed elements is greater. When all the rows in a column are compared to one another, we can re-render the table in the proper order.

To make a custom sorting algorithm, you will need to create a function with a sortOrder argument.

sortFunction: function(sortOrder) {

}

sortOrder defines if we’re trying to sort the column in ascending (sortOrder='asc'), descending (sortOrder='desc') or initial order (sortOrder is not defined).

Then we need to make our function return another function, which will be used to compare elements, so now we have:

sortFunction: function(sortOrder) {
    return function(a, b) {

    }
}

Each of the inner-function arguments represent the compared elements and both of them are defined as an array, where

a = [row_index, element_value];

The inner function needs to return -1, when we want the a element to be rendered before b (so, if the sorting is defined as ascending -> a < b ), 1otherwise, and 0 if both elements are equal.

It may look complex at first, but it’s really straightforward when you see it in real-life examples.

Currencies

Let’s take a look at an example based on currency comparison. The demo below shows a table with different art pieces, along with their prices. Try sorting the Price column and see what happens.

As you can see, we have used a custom sortFunction in order to sort prices in different currencies. The function itself contains an array of currency rates, which is used to properly compare them.

Height and weight

Alright, we’ve got the currencies covered – let’s move on to weight and height units. The demo below contains information about certain NBA players. Their height is provided in feet or centimeters, their weight – in pounds or kilograms.

The logic behind this example is pretty much the same as in the last one, but we needed to do some more parsing with the x'x'' format.

Distance

The odds are that you use (or used) distance-related data in your Handsontable implementation. Take a look at this example – it shows how far the listed cities are from Paris. I’ve used kilometers and miles, and regardless of the units we can sort the Distance column properly.

It’s worth noting, that although this demo works pretty much the same as the previous examples, I’ve simplified it a little to make the code less redundant. I would highly recommend optimizing the sorting algorithms, because when you are sorting large amounts of data, it can have a significant impact on your table’s performance.

Unit of areas

Now let’s try a slightly different approach. We will create a table, where the sorted column’s order depends on values from another column.

The demo below shows a list of cities, their corresponding states and areas. Let’s hide the Area column and make the City column sorting depend on that hidden column.

Note that the sorting function doesn’t have any reference to the Handsontable instance so you will have to inject it somehow. In this example I’ve achieved that with a global variable and called it window.hot.

Conclusion

As you can see, the sortFunction feature is pretty versatile, and you can write your own sorting mechanism without putting too much effort into it. So if you’d like your Handsontable implementation to reflect that a $20 Queens of the Stone Age T-shirt is actually worth more than a $40 Justin Bieber T-shirt, now you know how.