Search code examples
tabulator

How to set callback after the instance of Tabulator is created?


I am using Tabulator and want to listen the table editing event. I checked the callback dataEdited and found all the examples set the callback function when creating the instance, like new Tabulator('#samplediv',{dataEdited:function(){...}}).

However, I need to set the callback in a sub-function after the instance created like:

const table=new Tabulator(......)

function SomeSub(){
// how to set dataEdited of table here?
}

I tried table.dataEdited=function(){} that does not work.

I don't know if it's a real problem for a skilled programmer but it really confused me. Thank you so much for any comments.


Solution

  • You cannot change a callback in Tabulator after it has been instantiated, but you can simply call another function from inside the callback.

    If you are only looking to track user edits, rather than all changes to data, then the cellEdited callback may be a more appropriate choice.

    function externalFunction(cell){
        do a thing;
    }
    
    var table = new Tabulator("#example-table", {
        cellEdited:function(cell){
            externalFunction(cell);
        },
    });
    

    If you want to be able to change the nature of the function called, then you can just add the function on an external object, and then change it any time you want.

    //define initial function holding object
    var functionHolder = {
        externalFunction:function (cell){
            do a thing;
        }
    }
    
    //create your table
    var table = new Tabulator("#example-table", {
        cellEdited:function(cell){
            functionHolder.externalFunction(cell);
        },
    });
    
    //...
    
    //some time later redefine the function
    functionHolder.externalFunction = function(cell){
        //do something different
    }