Tabulator: sort does not work when using certain formatters

[ken-colvin]

I am setting a column to be formatter:'link' and sorter:'string' and the column does not sort properly.

NOTE: I do have NULL and blank values in the cell, does that matter?

{ "title": "Url", "field": "url", "formatter": "link", "sorter": "string", "editor": "input" },

Likewise with date inputs

Here is the javascript for the date column
{ "title": "Start At", "field": "start_at", "formatter": "date", "sorter": "date", "sorterParms": { "format": "YYYY-MM-DD" }, "editor": "input" }

I am including moment.js

[olifolkerd]

Hey @ken-colvin

The formatters are applied after the sort and are purely visible not touching the data, and so have no impact on the sort.

If you have null values then this will mess with the sort as they dont match the data type being sorted, you would need to write a custom sorter to tell Tabulator how to sort these null values.

for more information on custom sorters please have a read of the Sorting Data Documentation

Cheers

Oli

[ken-colvin]

Hi - How does tabulator handle null values and empty strings?
Being that null and empty strings are very common for any column type, I would assume tabulator has a default rule for empty cells, for example, for certain column types, number, dates, email, image, ...

If I have to write a custom function to deal with null and empty cells, then what do you recommend I do as a generic function. That is, I would have to write a custom function for every column type, being most of my data allows null and empty cells.

-Thanks

[olifolkerd]

Hi Ken,

Tabulator can handle blanks with no issue, it is only the nulls that cause the issue in string sorting, if this is an issue for you then to simplify things i suggest you use a custom mutator to convert all null values to empty strings, you can then apply this mutator to the affected columns:

//define mutator
var nullToStringMutator = function(value, data, type, mutatorParams, cell){
        //value - original value of the cell
        //data - the data for the row
        //type - the type of mutation occuring (data|edit)
        //mutatorParams - the mutatorParams object from the column definition
        //cell - when the "type" argument is "edit", this contains the cell component for the edited cell, otherwise it is undefined

        return value || ""; //return the value or an empty string
},

Then in your column definition for the affected column:

{"title": "Url", "field": "url",  mutator:nullToStringMutator } 

Have a read of the Mutator Documentation for more information.

Cheers

Oli

[irupeshprasai]

hi how can i show nepali date and format the nepali date in tabulator js i am inserting the english date in field and nepali date in formatter but sorting is not working

headers.push({
title: "From Date", width: "150", field: "FromDateEnglish", headerSort: true, visible: true, sorter: "date",

                 formatter: function (cell, formatterParams) {
                    var CellData = cell.getRow().getData();
                    var html = "";
                    html += "<label>" + CellData.FromDate + "</label>"; return html;


                }
            });

[olifolkerd]

Hey @ken-colvin

Please ask questions on Stack Overflow, this issues list is only for Bug Reports and Feature Requests, you definitely should t be asking questions on long closed issues.

As the above question is answered, formatting has nothing to do with sorting, it is purely visual, you need to make sure you are using the date sorter on the column.

If you are still having issues please ask for help on Stack Overflow.

Cheers

Oli :)

[AmmarKureja]

Hi Oli,
My datetime sorter is not working and below is my code.
{
title: "Last Modified Date", field: "lastModifiedDate", align: "center",
sorter: "datetime",
sorterParams: {format:"DD/MM/YYYY hh:mm:ss.SSS"}
}
I have installed and included moment.js library in my react page but still, I am getting an error

Can you guide how to include the moment.js. This is what i am getting
Sort Error - 'datetime' sorter is dependant on moment.js

Can you please guide.
Thanks.

[olifolkerd]

Hey @AmmarKureja

If you get that message it means that the global variable moment has not been setup when you included the moment library.

if you have used a require function to include moment then you need to use:

global.moment = require("moment");

I hope that helps,

Cheers

Oli :)

[AmmarKureja]

Thanks a lot, Oli, Its worked for me. :)