Ui-Table custom formatter on nested tables

Dashboard
1

Hi,

I want to apply a custom column formatter on a subTable, but for some reason it doesn't work. The example below doesn't show the subTable when timestamp uses custom formatter (timestamp_formatter). If I set the timestamp to i.e. html, than the table is shown. I also tried to pass the timestamp_formatter as object instead of string, since subtable_formatter is being converted to string but still doesn't work. Any tips about the correct way to pass timestamp_formatter?

var payload =[];
var serviceHistory = [];

serviceHistory.push({timestamp:1637497189000,temperature:18});
serviceHistory.push({timestamp:1637497289000,temperature:19});
serviceHistory.push({timestamp:1637497389000,temperature:20});
payload.push({active: "Y", event: "Event01", trigger: "Trigger01", serviceHistory: serviceHistory});

var timestamp_formatter = function(cell, formatterParams, onRendered){
    return new Date(cell.getValue()).toISOString().replace("T"," ").slice(0,19);
} 

var subtable_formatter = function(row){
   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);

   row.getElement().appendChild(holderEl);

   var subTable = new Tabulator(tableEl, {
       layout:"fitColumns",
        headerSort: false,
        selectable:false,
       data:row.getData().serviceHistory,
       columns:[
           {
               title:"Timestamp", 
               field:"timestamp",
               formatter:timestamp_formatter.toString()
           }, {
               title:"Temperature", 
               field:"temperature",
               formatter:"html"
           },
       ]
   })
}

var ui_control = {
    tabulator:{
        headerSort: false,
        selectable:false,
        columns : [
            {
                title: "Act",
                field: "active",
                align: "center",
                formatter : "html"
            }, {
                title: "Event",
                field: "event",
                align: "center",
                formatter : "html"
            }, {
                title: "Trigger",
                field: "trigger",
                align: "center",
                formatter : "html"
            }
        ],
        rowFormatter:subtable_formatter.toString()
    }
};

return {payload : payload, ui_control: ui_control};

Result when I use formatter:timestamp_formatter.toString() or formatter:timestamp_formatter on timestamp.

delete01
delete011204Ă—111 1.94 KB

Result when I use formatter:"html" on timestamp.

delete02
delete021204Ă—238 5.17 KB

2

Ok I found the solution. The function must defined on the formatter directly.

Below the code that works.

var payload =[];
var serviceHistory = [];

serviceHistory.push({timestamp:1637497189000,temperature:18});
serviceHistory.push({timestamp:1637497289000,temperature:19});
serviceHistory.push({timestamp:1637497389000,temperature:20});
payload.push({active: "Y", event: "Event01", trigger: "Trigger01", serviceHistory: serviceHistory});


var subtable_formatter = function(row){
   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);

   row.getElement().appendChild(holderEl);

   var subTable = new Tabulator(tableEl, {
       layout:"fitColumns",
        headerSort: false,
        selectable:false,
       data:row.getData().serviceHistory,
       columns:[
           {
               title:"Timestamp", 
               field:"timestamp",
               formatter:function(cell, formatterParams, onRendered){
                                 return new Date(cell.getValue()).toISOString().replace("T"," ").slice(0,19);
                               } 
           }, {
               title:"Temperature", 
               field:"temperature",
               formatter:"html"
           },
       ]
   })
}

var ui_control = {
    tabulator:{
        headerSort: false,
        selectable:false,
        columns : [
            {
                title: "Act",
                field: "active",
                align: "center",
                formatter : "html"
            }, {
                title: "Event",
                field: "event",
                align: "center",
                formatter : "html"
            }, {
                title: "Trigger",
                field: "trigger",
                align: "center",
                formatter : "html"
            }
        ],
        rowFormatter:subtable_formatter.toString()
    }
};

return {payload : payload, ui_control: ui_control};
1 Like
3

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.