如何在 tabulator.js 中向嵌套表中添加新行

Question

I have created a table inside parent table like this: http://tabulator.info/examples/4.7#tree - Check Nested Tables not the Nested Data Trees.

Now, I want to add a new row to the nested table. We can add to parent table using table.addRow() but how can I add to the child/nested table?

I am using 4.7 version

Answer 1

You would need to maintain a link the table object created when you called the constructor function on the nested table. You could store it on a property of the parent row data to make it accessible elsewhere.

An oversimplified example:

var table = new Tabulator("#example-table", {
    columns:[
        {title:"Make", field:"make"},
        {title:"Model", field:"model"},
        {title:"Registration", field:"reg"},
        {title:"Color", field:"color"},
    ],
    rowFormatter:function(row){
        //create and style holder elements
       var tableEl = document.createElement("div");

       row.getElement().appendChild(tableEl);

       var subTable = new Tabulator(tableEl, {
           layout:"fitColumns",
           data:row.getData().serviceHistory,
           columns:[
           {title:"Date", field:"date", sorter:"date"},
           {title:"Engineer", field:"engineer"},
           {title:"Action", field:"actions"},
           ]
       })
      
       row.update({subTable:subTable});

    },
});

In example the subtable would then be accessible on the data object for the row component. so for example, if you had the component for the row containing the table you want to add a new row to, you could call:

row.getData().subTable.setData({name:"bob", age:52}), add row to nested table inside row.

Answer 2

Before you have to set the subtable with an id o something

tableEl.setAttribute('class', "sottotabella subTable" + id + ""); 
var subTable = new Tabulator(tableEl, {}....)

then you can get the subtable with

var tableSub = Tabulator.prototype.findTable(".subTable" + idSub)[0];

and add the row

tableSub.addData([{}])