Basic column sorting

In this recipe, we will enable column sorting. This will allow the user to click on the header cells of the table to sort the entire table alphabetically or numerically by the contents of that column. Clicking once will sort ascending, and clicking a second time will sort descending. Subsequent clicks will toggle between these two states.

Getting ready

Open the datatable.js file for editing. We will modify the column definitions to allow sorting.

How to do it...

Modify the column definition as follows:

var columns = [
{
key: "chapter",
label: "Chapter No.",
formatter: "number",
sortable: true
{
key: "title",
label: "Title",
formatter: "string",
sortable: true
}
];

How it works...

We simply added an extra property to each column definition object: sortable.

Setting this to true activates the built-in column sorting functionality for each column that we have enabled.

The following screenshot shows that the DataTable has been sorted alphabetically on the Title column, simply...