Search code examples
tabulator

How do I create a table in Tabulator without having to add the columns attribute?


The code given in the documentation requires the column attribute and the corresponding JSON column mapping. But I have a dataset having 100+columns and I don't want to map them manually. Is there a function in tabulator that creates the table with the original column names given in JSON. I tried SetData Function but it doesn't work. I tried to remove the columns attribute from the below code but it still doesn't work (Tables are not displayed in the web).

Code given in the documentation is not working:

    var table = new Tabulator("#example-table", {
        index:"age", //set the index field to the "age" field.
    });

var tableData = [
    {id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
    {id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
]

table.setData(tableData);

Code working only with Column attributes:

var table = new Tabulator("#example-table", {
    index:"age", //set the index field to the "age" field.
});

var tableData = [
    {id:1, name:"Billy Bob", age:"12", gender:"male", height:1, col:"red", dob:"", cheese:1},
    {id:2, name:"Mary May", age:"1", gender:"female", height:2, col:"blue", dob:"14/05/1982", cheese:true},
]

var table = new Tabulator("#example-table", {
    data:tableData, //set initial table data
    columns:[
        {title:"Name", field:"name"},
        {title:"Age", field:"age"},
        {title:"Gender", field:"gender"},
        {title:"Height", field:"height"},
        {title:"Favourite Color", field:"col"},
        {title:"Date Of Birth", field:"dob"},
        {title:"Cheese Preference", field:"cheese"},
    ],
});

Solution

  • Not a function, but a table constructor property: http://tabulator.info/docs/4.3/columns#autocolumns