Version 6.0 Released!

Click to checkout the new features

Old Documentation
You are browsing documentation for an old version of Tabulator. Consider upgrading your project to Tabulator 6.0

Sorting Data

Overview

Tabulator allows you to sort the data in your table in any way you want either by clicking on column headers or by calling a number of sort functions on the table.

Programmatic Sort Parameters
Loading Example...
Source Code

HTML

<div id="example-table"></div>

JavaScript

//Build Tabulator
var table = new Tabulator("#example-table", {
    height:"311px",
    layout:"fitColumns",
    columns:[
        {title:"Name", field:"name", width:200},
        {title:"Progress", field:"progress", align:"right", headerSortTristate:true},
        {title:"Gender", field:"gender", sorter:"string"},
        {title:"Rating", field:"rating",  align:"center", width:100},
        {title:"Favourite Color", field:"col", sorter:function(a,b){
            return String(a).toLowerCase().localeCompare(String(b).toLowerCase());
        }},
        {title:"Date Of Birth", field:"dob", sorter:"date", align:"center"},
        {title:"Driver", field:"car", align:"center", sorter:"boolean"},
    ],
});

//Trigger sort when "Trigger Sort" button is clicked
$("#sort-trigger").click(function(){
   table.setSort($("#sort-field").val(), $("#sort-direction").val());
});

By default Tabulator will attempt to guess which sorter should be applied to a column based on the data contained in the first row. It can determine sorters for strings, numbers, alphanumeric sequences and booleans, anything else will be treated as a string.

To specify a sorter to be used on a column use the sorter property in the columns definition object

You can pass an optional additional property with sorter, sorterParams that should contain an object with additional information for configuring the sorter.

{title:"Birthday", field:"birthday", sorter:"date", sorterParams:{format:"DD/MM/YY"}}

Params Lookup Function

If you want to dynamically generate the sorterParams at the time the sort is called you can pass a function into the property that should return the params object.

//define lookup function
    function paramLookup(column, dir){
    //column - the column component for the column being sorted
    //dir - the direction of the sort ("asc" or "desc")

    //do some processing and return the param object
    return {param1:"green"};
}

//column definition
{title:"Birthday", field:"birthday", sorter:"date", sorterParams:paramLookup}

Sort Order

When using multiple sorters, the order in the array is the order in which the sort functions will be applied to the data. In the example below the data will first be sorted by age, and then the result of that sort will be sorted by height. So the data displayed on screen will be sorted in order of height, with any equal height values being sorted by age. The same sort order applies when clicking on multiple column header sorts.

table.setSort([
    {column:"age", dir:"asc"}, //sort by this first
    {column:"height", dir:"desc"}, //then sort by this second
]);

Reverse Sort Order

If you would prefer the sorting to occur in the reverse order, to match the way that tables like excel sort, then you should set the sortOrderReverse to true in your table definition:

var table = new Tabulator("#example-table", {
    sortOrderReverse:true,
});

Sorter Functions

Built In Sorters

Tabulator comes with a number of preconfigured sorters including:

Note: For a guide to adding your own sorters to this list, have a look at the Extending Tabulator section.

String

The string sorter will sort columns as strings of characters

{title:"Example", field:"example", sorter:"string", sorterParams:{
    locale:true,
    alignEmptyValues:"top",
}}

The sorter has optional properties for the sorterParams object:

  • locale - the locale code for the string comparison function, (without this the sorter will use the locale of the browser). it can accept:
    • string - the locale code for the sort
    • boolean - set the value to true to use the current table locale
  • alignEmptyValues - force empty cells to top or bottom of table regardless of sort order, this property takes a string:
    • top - force empty cells to the top of the table
    • bottom - force empty cells to the bottom of the table

Numeric

The number sorter will sort column as numbers (integer or float, will also handle numbers using "," separators)

{title:"Example", field:"example", sorter:"number", sorterParams:{
    alignEmptyValues:"top",
}}

The sorter has optional properties for the sorterParams object:

  • alignEmptyValues - force empty cells to top or bottom of table regardless of sort order, this property takes a string:
    • top - force empty cells to the top of the table
    • bottom - force empty cells to the bottom of the table

Alphanumeric

The alphanum sorter will sort column as alpha numeric code

{title:"Example", field:"example", sorter:"alphanum", sorterParams:{
    alignEmptyValues:"top",
}}

The sorter has optional properties for the sorterParams object:

  • alignEmptyValues - force empty cells to top or bottom of table regardless of sort order, this property takes a string:
    • top - force empty cells to the top of the table
    • bottom - force empty cells to the bottom of the table

Boolean

The boolean sorter will sort column as booleans

{title:"Example", field:"example", sorter:"boolean"}

Field Exists

The exists sorter will sort column ordering if value has a type of "undefined" or not

{title:"Example", field:"example", sorter:"exists"}

Date

The date sorter will sort columns as dates

{title:"Example", field:"example", sorter:"date", sorterParams:{
    format:"YYYY-MM-DD",
    alignEmptyValues:"top",
}}

You will need to include the moment.js library to use this sorter

The sorter has optional properties for the sorterParams object:

  • format - the format of the date (default: DD/MM/YYYY)
  • alignEmptyValues - force empty cells to top or bottom of table regardless of sort order, this property takes a string:
    • top - force empty cells to the top of the table
    • bottom - force empty cells to the bottom of the table

Time

The time sorter will sort columns as times

{title:"Example", field:"example", sorter:"time", sorterParams:{
    format:"hh:mm:ss",
    alignEmptyValues:"top",
}}

You will need to include the moment.js library to use this sorter

The sorter has optional properties for the sorterParams object:

  • format - the format of the date (default: hh:mm)
  • alignEmptyValues - force empty cells to top or bottom of table regardless of sort order, this property takes a string:
    • top - force empty cells to the top of the table
    • bottom - force empty cells to the bottom of the table

Date Time

The datetime sorter will sort columns as datetimes

{title:"Example", field:"example", sorter:"datetime", sorterParams:{
    format:"YYYY-MM-DD hh:mm:ss",
    alignEmptyValues:"top",
}}

You will need to include the moment.js library to use this sorter

The sorter has optional properties for the sorterParams object:

  • format - the format of the date (default: DD/MM/YYY hh:mm:ss)
  • alignEmptyValues - force empty cells to top or bottom of table regardless of sort order, this property takes a string:
    • top - force empty cells to the top of the table
    • bottom - force empty cells to the bottom of the table

Array

The array sorter will sort arrays of data

{title:"Example", field:"example", sorter:"array", sorterParams:{
    type:"sum",
    alignEmptyValues:"top",
}}

The sorter has optional properties for the sorterParams object:

  • type - Arrays will be sorted by length by default, this property takes a string for the comparison type:
    • length - sort arrays by length
    • sum - sort arrays by sum of their value
    • max - sort arrays by maximum value
    • min - sort arrays by minimum value
    • avg - sort arrays by average value of all elements
  • alignEmptyValues - force empty cells to top or bottom of table regardless of sort order, this property takes a string:
    • top - force empty cells to the top of the table
    • bottom - force empty cells to the bottom of the table

Custom Sorters

for advanced sorting can define a custom sorter function in the sorter option:

{title:"Name", field:"name", sorter:function(a, b, aRow, bRow, column, dir, sorterParams){
    //a, b - the two values being compared
    //aRow, bRow - the row components for the values being compared (useful if you need to access additional fields in the row data for the sort)
    //column - the column component for the column being sorted
    //dir - the direction of the sort ("asc" or "desc")
    //sorterParams - sorterParams object from column definition array

    return a - b; //you must return the difference between the two values
},
}

The fifth parameter in this callback is a ColumnComponent for the column being sorted.

Header Sorting

By default all columns in a table are sortable by clicking on the column header, if you want to disable this behaviour, set the headerSort property to false.

This can be set per column in the column definition:

{title:"Name", field:"name", sorter:"string", headerSort:false} //disable header sorter

Or globaly for all columns:

var table = new Tabulator("#example-table", {
    headerSort:false, //disable header sort for all columns
});

Multi Column Sorting

By default you can sort by multiple columns at the same time by holding the ctrl or shift key when you click on the column headers.

if you wish to disable this behaviour, so only once column can be sorted at a time, you can set the columnHeaderSortMulti option to false

var table = new Tabulator("#example-table", {
    columnHeaderSortMulti:false,
});

Header Sort Direction

By default Tabulator will sort a column in ascending order when a user first clicks on the column header.

The headerSortStartingDir property in the column definition can be used to set the starting sort direction when a user clicks on an unsorted column, it can either be set to asc or desc.

{title:"Name", field:"name", sorter:"string", headerSortStartingDir:"desc"} //start sorting column in descending order when user clicks on header of unsorted column

Tristate Header Sorting

By default once you click on a header to sort it the header will then toggle between sorting in ascending and descending order.

If you would prefer a third option of returning the column to its original unsorted order, the you can set the headerSortTristate option to true in the column definition. The sort will the toggle between the original order, ascending and descending order

This can be set per column in the column definition:

{title:"Name", field:"name", sorter:"string", headerSortTristate:true} //enable tristate header sort on column

Or globaly for all columns:

var table = new Tabulator("#example-table", {
    headerSortTristate:true, //enable tristate header sort for all columns
});

Initial Sort

When the table is first created it can be defined with an initial set of sorters. These can be set using the initialSort option. This will take the same sorter array as the setSort function. (see Sorter Functions for more details)

var table = new Tabulator("#example-table", {
    initialSort:[
        {column:"age", dir:"asc"}, //sort by this first
        {column:"height", dir:"desc"}, //then sort by this second
    ]
});

Manage Sorting

Trigger Sorting Programmatically

You can trigger sorting using the setSort function

table.setSort("age", "asc");

If you wish to sort by multiple columns then you can pass an array of sorting objects to this function, the data will then be sorted in the order of the objects.

table.setSort([
    {column:"age", dir:"asc"}, //sort by this first
    {column:"height", dir:"desc"}, //then sort by this second
]);

Get Current Sorters

If you need to retrieve the details of the currently sorted column at any point you can use the getSorters function.

table.getSorters();

This will return an array of sort objects with three properties, column the column component for the sorted column, field a string of the field name for the sorted column, and dir a string of either "asc" or "desc" indicating the direction of sort.

[
    {
        column:column,
        field:"age",
        dir:"asc"
    },
    {
        column:column,
        field:"height"
        dir:"desc"
    }
]

If the table is not currently sorted then the array will be empty.

Ajax Sorting

If you would prefer to sort your data server side rather than in Tabulator, you can use the ajaxSorting option to send the sort data to the server instead of processing it client side

var table = new Tabulator("#example-table", {
    ajaxSorting:true, //send sort data to the server instead of processing locally
});

An array of sorters objects will then be passed in the sorters parameter of the request, the name of this parameter can be set in the paginationDataSent option, in the pagination module.

The array of sorter objects will take the same form as those returned from the getSorters function:

[
    {
        column:column,
        field:"age",
        dir:"asc"
    },
    {
        column:column,
        field:"height"
        dir:"desc"
    }
]

If the table is not currently sorted then the array will be empty.

Clear All Sorters

To remove all sorting from the table, call the clearSort function.

table.clearSort();

Callbacks

A range of callbacks are available for tracking progress of sorting. See the Sorting Callbacks section for more information.

Donate