Adding nested data table to a Tabulator cell in a Tabulator table

Question

I am using Tabulator 4.8 (tabulator.info)

I see documentation for adding nested tables to Tabulator rows (http://tabulator.info/examples/4.8#nested-tables)

I would like to do something similar to that but instead add a Tabulator table to a cell of Tabulator table.

I read about custom formatting of cells (http://tabulator.info/docs/4.0/format#format-custom) and see it says the formatting function must return a String, valid html or a DOM node.

I tried something like the following (following the example for nested table in rows):

columns:[ //Define Table Columns
    {title:"Name", field:"name", width:150},
    {title:"Age", field:"age", hozAlign:"left", formatter:"progress"},
    {title:"Favourite Color", field:"col", formatter:function(cell){
        //create and style holder elements
       var holderEl = document.createElement("div");
       var tableEl = document.createElement("div");

       holderEl.style.boxSizing = "border-box";
       holderEl.style.padding = "10px 30px 10px 10px";
       holderEl.style.borderTop = "1px solid #333";
       holderEl.style.borderBotom = "1px solid #333";
       holderEl.style.background = "#ddd";

       tableEl.style.border = "1px solid #333";
       holderEl.appendChild(tableEl);
       cell.getElement().appendChild(holderEl);

       var subTable = new Tabulator(tableEl, {
           layout:"fitColumns",
           data:tabledata,
           columns:[
           {title:"Name", field:"name", width:150},
           {title:"Age", field:"age", hozAlign:"left", formatter:"progress"},
           {title:"Favourite Color", field:"col", formatter:"star", formatterParams:{stars:6}},
           {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
           ]
       })
    return subTable;
    }},
    {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
],

But this does not show up in the cell as a nested table. Of course if I return "<table><tr><td>test</td></tr></table>";, I see that simple table but I would like to see the tabulator table in there.

Any tips on how to do that?

Oli Folkerd Oli Folkerd · Accepted Answer · 2020-11-23T21:03:08

Im not sure that including a whole other table in the cell is a great way to proceed, it could create a very clustered UI.

But that being said if that is what you need then the reason this is failing for two reasons, your are trying to return a tabulator instance rather than the containing element and you are creating your table on the table element before it has been added to the DOM so tabulator has no way to calculate the table dimensions to lay itself out properly.

In this case you would need to define the table in the onRendered callback passed into the third argument the formatter, this will ensure the container has been added to the dom after the cell has been rendered. and you will notice that we are now returning holder element from the formatter not the table instance:

//NOTICE - onRendered function passed into the third argument of the formatter
{title:"Favourite Color", field:"col", formatter:function(cell, formatterParams, onRendered){
        //create and style holder elements
       var holderEl = document.createElement("div");
       var tableEl = document.createElement("div");

       holderEl.style.boxSizing = "border-box";
       holderEl.style.padding = "10px 30px 10px 10px";
       holderEl.style.borderTop = "1px solid #333";
       holderEl.style.borderBotom = "1px solid #333";
       holderEl.style.background = "#ddd";

       tableEl.style.border = "1px solid #333";
       holderEl.appendChild(tableEl);
       cell.getElement().appendChild(holderEl);

       //define the table once the cell has been rendered
       onRendered(function(){
           var subTable = new Tabulator(tableEl, {
               layout:"fitColumns",
               data:tabledata,
               columns:[
                   {title:"Name", field:"name", width:150},
                   {title:"Age", field:"age", hozAlign:"left", formatter:"progress"},
                   {title:"Favourite Color", field:"col", formatter:"star", formatterParams:{stars:6}},
                   {title:"Date Of Birth", field:"dob", sorter:"date", hozAlign:"center"},
               ]
           })
       });

    //return the element that holds the table
    return holderEl;
    }

Adding nested data table to a Tabulator cell in a Tabulator table

1 Answers