# Ui-Table custom formatter on nested tables

**URL:** <https://discourse.nodered.org/t/ui-table-custom-formatter-on-nested-tables/54070>\
**Category:** Dashboard\
**Created:** [21 November 2021 16:41 UTC](https://discourse.nodered.org/t/ui-table-custom-formatter-on-nested-tables/54070 "2021-11-21T16:41:26Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![dptek](https://avatars.discourse-cdn.com/v4/letter/d/f1d935/32.png) [@dptek](https://discourse.nodered.org/u/dptek)\
**Post date:** [21 November 2021 16:41 UTC](https://discourse.nodered.org/t/ui-table-custom-formatter-on-nested-tables/54070/1 "2021-11-21T16:41:27Z")

</div>

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**?

```auto
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](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/2/22f6f6a7fedb016ee1adf45c99252f7bba091a92.png)

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

 ![delete02](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/e/6edd0e18ef7290fcbb0bfa541121ceb7ada00804.png)

---

<div class="post-metadata">

**Author:** ![dptek](https://avatars.discourse-cdn.com/v4/letter/d/f1d935/32.png) [@dptek](https://discourse.nodered.org/u/dptek)\
**Post date:** [21 November 2021 20:08 UTC](https://discourse.nodered.org/t/ui-table-custom-formatter-on-nested-tables/54070/2 "2021-11-21T20:08:38Z")

</div>

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

Below the code that works.

```auto
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};

```

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [5 December 2021 20:08 UTC](https://discourse.nodered.org/t/ui-table-custom-formatter-on-nested-tables/54070/3 "2021-12-05T20:08:39Z")

</div>

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