How load columns via ajax in tabulator

Question

I am trying to load columns in a tabulator 4.5 using the following:

var table = new Tabulator("#tables", {
    ajaxURL:"worker.php?data",
    ajaxRequestFunc:queryRealm,
    cellEdited:cEdit,
    history:true,
    clipboard:true,
    //autoColumns:true,
    clipboardPasteAction:"replace",
    layout:"fitData",
    columns:getColumns,
});

function getColumns(){
    return new Promise(function(resolve, reject){
        $.ajax({
            url: "worker.php?columns",
            success: function(data){
                resolve(data);
            },
            error: function(error){
                reject(error);
            }
        })
    });
}

But I get the error:

tabulator.min.js:4 Uncaught TypeError: this.options.columns.slice is not a function
    at t.u._clearObjectPointers (tabulator.min.js:4)
    at t.u._create (tabulator.min.js:4)
    at new t (tabulator.min.js:4)
    at (index):84

Tell me please, how can I load columns into a tabulator via ajax?

Answer 1

You cannot pass an async function into the columns parameter. It expects an array of columns.

So instead of passing getColumns into the columns option, you should get the value from getColumns and then pass that into the Tabulator options.

I re-arranged your code some, I believe this should work.

function getColumns(){
    return new Promise(function(resolve, reject){
        $.ajax({
            url: "worker.php?columns",
            success: function(data){
                resolve(data);
            },
            error: function(error){
                reject(error);
            }
        })
    });
}

getColumns().then((columns) => {
  var table = new Tabulator("#tables", {
    ajaxURL:"worker.php?data",
    ajaxRequestFunc:queryRealm,
    cellEdited:cEdit,
    history:true,
    clipboard:true,
    //autoColumns:true,
    clipboardPasteAction:"replace",
    layout:"fitData",
    columns:columns,
  });
});