Tabulator Nested Table Replicating on Table update

Question

I have been trying to create a nested table and have succeeded using the code-1 below. I am trying to create a dynamic IOT table and i am updating the table every time a new data is coming from a device, and I used code-2 below for that. but whenever i try to update, the update is successful but the the nested table is replicating it self so how can I stop this from happening.

================ CODE 1 ==================================
rowFormatter:function(row){

   var holderEl = document.createElement("div");
   var tableEl = document.createElement("div");

   const id = row.getData().id;

   holderEl.style.boxSizing = "border-box";
   holderEl.style.padding = "10px 10px 10px 10px";
   holderEl.style.borderTop = "1px solid #d1ddea";
   holderEl.style.borderBotom = "1px solid #d1ddea";
   holderEl.style.background = "#fff";
   holderEl.setAttribute('class', "subTable" + id + "");

   tableEl.style.border = "2px solid #d1ddea";
   tableEl.setAttribute('class', "subTable" + id + "");

   holderEl.appendChild(tableEl);

   row.getElement().appendChild(holderEl);



   var myRowData = row.getData().customFields;

   var subTable = new Tabulator(tableEl, {
       layout:"fitColumns",
       data:myRowData,
       columns:[
       {title:"Name", field:"n",headerSort:true },
       {title:"Value", field:"v"},
       ]
     })    
}, 
============= CODE 2 ===========================
tableAllUnits.updateData([{id:unit.id, speedformatted:data.speed}]);

Oli Folkerd Oli Folkerd · Accepted Answer · 2019-12-24T16:46:25

This is happening because when the row foratter is called a second time on row update it isnt removing the old nested table first.

when you create the holder element you should assign it a class:

holderEl.classList.add("nested-table")

then before you add elements to the row check for any pre existing tables and remove them:

var el = row.getElement();
var nested = el.getElementsByClassName("nested-table");

for(let child of nested){
    child.parentNode.removeChild(child);
}

Tabulator Nested Table Replicating on Table update

1 Answers