Tabulator: Force update of cell formattter

[MusinAmir]

Hey, @olifolkerd
Is it possible to force update formatter of specific cells?

[olifolkerd]

Hey @MusinAmir,

if you change the data in a cell the cell will automatically be reformatted.

Alternatively if you want to force the reformat you can trigger the reformat function on the row component which will reformat all cells in that row.

If you have a more specific usage case in mind i can give you a more specific example.

Cheers

Oli :)

[MusinAmir]

Unfortunately calcFormatter doesn't trigger after changing elements.

[olifolkerd]

@MusinAmir

The calcFormatter will be triggered whenever there is an update to a column that results in that columns calculation changing.

Could you let me know what you are trying to acheive, i might then be able to suggest a solution for you.

Cheers

Oli

[MusinAmir]

Hey @olifolkerd
I made test example

    var tableData = [
        {user:"test", hours: 251},
        {user:"test", hours: 260},
        {user:"test1", hours: 450}
    ];
    $("#tabulator").tabulator({
        data: tableData,
        placeholder:"No Data Available",
        height:"600px", 
        history:true,
        autoResize:false,
        resizableColumns:false,
        resizableRows: false,
        groupClosedShowCalcs:true,
        groupToggleElement:"header",
        columns: [
            {title: 'Employee', field:'user', width: 250, headerSort:false},
            {title: 'hours', field:'hours', width:100, editor: "input", headerSort:false, formatter: cellFormatter, bottomCalc:"sum", bottomCalcFormatter: totalFormatter}
        ],

        groupBy: "user",

        groupHeader:function(value, count, data, group){
            return value;
        },

    });

    function cellFormatter(cell, formatterParams){
        if (cell.getValue() > 250)
            cell.getElement().css("background-color", "red");
        else
            cell.getElement().css("background-color", "");
        return cell.getValue();
    };

    function totalFormatter(cell){
        console.log(cell.getValue());
        if (cell.getValue() > 500)
            cell.getElement().css("background-color", "red");
        else
            cell.getElement().css("background-color", "");

        return cell.getValue();
    };

I noticed that formatter doesn't work properly if there are two and more rows in group. Formatter for group with one row works well.

[olifolkerd]

Hey @MusinAmir

Thanks for the very detailed test, that has helped me get straight to the bottom of the issue, it is an issue that only affects column calcs in groups and results in them dropping back to using the standard column formatter after the first render of the cell.

I will look at getting a patch in for this at the weekend and include it in the 3.5 release.

Thanks for pointing it out!

Cheers

Oli :)

[olifolkerd]

Hey @MusinAmir,

You will be happy to hear that I have just pushed a fix for this to the 3.5 branch which will be released in the next week.

Thanks for the detailed description, it really helped get to the bottom of the issue quickly.

Let me know if you have any other issues.

Cheers

Oli :)

[MusinAmir]

Hey @olifolkerd
Thank you very much!

[olifolkerd]

Hey @MusinAmir

Version 3.5 has now been released!