# \[Solved\] How to change timestamps in objects to date/time for ui\_table

**URL:** <https://discourse.nodered.org/t/solved-how-to-change-timestamps-in-objects-to-date-time-for-ui-table/28289>\
**Category:** FAQs\
**Created:** [13 June 2020 19:15 UTC](https://discourse.nodered.org/t/solved-how-to-change-timestamps-in-objects-to-date-time-for-ui-table/28289 "2020-06-13T19:15:15Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [13 June 2020 19:15 UTC](https://discourse.nodered.org/t/solved-how-to-change-timestamps-in-objects-to-date-time-for-ui-table/28289/1 "2020-06-13T19:15:16Z")

</div>

I'm sending an array of objects to a ui\_table and that works fine. One of the properties - in each of the objects - is a timestamp that I want to convert to a human readable format. I've been trying to use jsonata to see if I could change it (and have failed).

Any suggestions? Attached is an `inject` -\> `change` -\> `debug` node flow with the data in the `inject` node if anyone wants to play with it. The change node currently doesn't have anything in it.

Here's what the data looks like:

```auto
[
  {
    "last_action" : "msg",
    "last_seen" : 1592070983674,
    "location" : "testing",
    "mqtt_mode" : "local",
    "node_id" : "node28",
    "node_status" : "sleep",
    "sleep_time" : 0
  },
  {
    "last_action" : "msg",
    "last_seen" : 1592070444879,
    "location" : "greenhouse",
    "mqtt_mode" : "local",
    "node_id" : "node42",
    "node_status" : "sleep",
    "sleep_time" : 0
  },
  {
    "last_action" : "msg",
    "last_seen" : 1592070734128,
    "location" : "basement",
    "mqtt_mode" : "local",
    "node_id" : "node44",
    "node_status" : "sleep",
    "sleep_time" : 0
  }
]

```

and here is the flow

```auto
[{"id":"4210db69.6dfdcc","type":"change","z":"3822972f.7f2b38","name":"","rules":[],"action":"","property":"","from":"","to":"","reg":false,"x":360,"y":420,"wires":[["b8dac0.466ded4"]]},{"id":"eb354e69.2bf12","type":"inject","z":"3822972f.7f2b38","name":"Data in Payload","topic":"","payload":"[{\"last_action\":\"msg\",\"last_seen\":1592070983674,\"location\":\"testing\",\"mqtt_mode\":\"local\",\"node_id\":\"node28\",\"node_status\":\"sleep\",\"sleep_time\":0},{\"last_action\":\"msg\",\"last_seen\":1592070444879,\"location\":\"greenhouse\",\"mqtt_mode\":\"local\",\"node_id\":\"node42\",\"node_status\":\"sleep\",\"sleep_time\":0},{\"last_action\":\"msg\",\"last_seen\":1592070734128,\"location\":\"basement\",\"mqtt_mode\":\"local\",\"node_id\":\"node44\",\"node_status\":\"sleep\",\"sleep_time\":0}]","payloadType":"json","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":140,"y":420,"wires":[["4210db69.6dfdcc"]]},{"id":"b8dac0.466ded4","type":"ui_table","z":"3822972f.7f2b38","group":"ba6fbc1c.dd7588","name":"table","order":2,"width":0,"height":0,"columns":[],"outputs":0,"cts":false,"x":530,"y":420,"wires":[]},{"id":"ba6fbc1c.dd7588","type":"ui_group","z":"","name":"Device Status","tab":"5208bb69.642964","order":1,"disp":true,"width":"12","collapse":false},{"id":"5208bb69.642964","type":"ui_tab","z":"","name":"Status table","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [13 June 2020 21:22 UTC](https://discourse.nodered.org/t/solved-how-to-change-timestamps-in-objects-to-date-time-for-ui-table/28289/2 "2020-06-13T21:22:12Z")

</div>

Hi Paul, try this:

1- Add an ui\_template (head session) with below config:

```auto
<script src= "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.26.0/moment.min.js" type="text/javascript"></script>

```

2- Add a `formatter` to the column that has the timestamp

```auto
    {
        "title": "LastSeen",
        "field": "lastSeen",
        "width": 150,
        "align": "left",
        "formatter": "function(cell, formatterParams, onRendered) {return moment(cell.getValue()).format('DD-MM-YYYY HH:mm');}"
    }

```

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [13 June 2020 21:28 UTC](https://discourse.nodered.org/t/solved-how-to-change-timestamps-in-objects-to-date-time-for-ui-table/28289/3 "2020-06-13T21:28:41Z")

</div>

Hi,

I would let ui-table (tabulator) do the formatting. This would ensure that sorting, filtering and all other features work as expected. Moment.js features are build into the dashboard (at least in my installations).  
You can use msg.ui\_control to activated the build in `datetime` formatter:

```auto
{
    "tabulator": {
        "columns": [
            {
                "formatter": "datetime",
                "formatterParams": {
                    "inputFormat": "x",
                    "outputFormat": "DD. MMMM YYYY hh:mm:ss",
                    "invalidPlaceholder": "(invalid date)"
                },
                "title": "Last Seen",
                "field": "last_seen"
            }
        ]
    }
}

```

gives you this  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/1/61a40ba96d47ea74eddd3ff9698c8d0a1304a197.png)

```auto
[{"id":"d29f47f1.983ac8","type":"inject","z":"bfc08422.a451e8","name":"Data in Payload","topic":"","payload":"[{\"last_action\":\"msg\",\"last_seen\":1592070983674,\"location\":\"testing\",\"mqtt_mode\":\"local\",\"node_id\":\"node28\",\"node_status\":\"sleep\",\"sleep_time\":0},{\"last_action\":\"msg\",\"last_seen\":1592070444879,\"location\":\"greenhouse\",\"mqtt_mode\":\"local\",\"node_id\":\"node42\",\"node_status\":\"sleep\",\"sleep_time\":0},{\"last_action\":\"msg\",\"last_seen\":1592070734128,\"location\":\"basement\",\"mqtt_mode\":\"local\",\"node_id\":\"node44\",\"node_status\":\"sleep\",\"sleep_time\":0}]","payloadType":"json","repeat":"","crontab":"","once":true,"onceDelay":0.1,"x":285,"y":221,"wires":[["d54c7a85.46e848"]]},{"id":"dc0c2b3c.bd0a88","type":"ui_table","z":"bfc08422.a451e8","group":"68300045.dcdbf","name":"table","order":2,"width":"12","height":"7","columns":[],"outputs":1,"cts":true,"x":675,"y":221,"wires":[["c6384aa1.cbe018"]]},{"id":"d54c7a85.46e848","type":"change","z":"bfc08422.a451e8","name":"ui_control","rules":[{"t":"set","p":"ui_control","pt":"msg","to":"{\"tabulator\":{\"columns\":[{\"formatter\":\"datetime\",\"formatterParams\":{\"inputFormat\":\"x\",\"outputFormat\":\"DD. MMMM YYYY hh:mm:ss\",\"invalidPlaceholder\":\"(invalid date)\"},\"title\":\"Last Seen\",\"field\":\"last_seen\"},{\"title\":\"Action\",\"field\":\"last_action\"},{\"title\":\"Location\",\"field\":\"location\"},{\"title\":\"MQTT node\",\"field\":\"mqtt_mode\"},{\"title\":\"Id\",\"field\":\"node_id\"},{\"title\":\"Status\",\"field\":\"node_status\"},{\"title\":\"sleep\",\"field\":\"sleep_time\"}]}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":502,"y":221,"wires":[["dc0c2b3c.bd0a88"]]},{"id":"c6384aa1.cbe018","type":"debug","z":"bfc08422.a451e8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":832,"y":221,"wires":[]},{"id":"68300045.dcdbf","type":"ui_group","z":"","name":"Device Status","tab":"baf5f94f.3685c8","order":1,"disp":true,"width":"12","collapse":false},{"id":"baf5f94f.3685c8","type":"ui_tab","z":"","name":"Status table","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

```

If you format one column you should format all other columns too. (More examples for using ui\_control are in the examples including custom formatters) and more about tabulator formatters and other features you find here:

> **[Tabulator - Interactive JavaScript Tables](http://tabulator.info/docs/4.4/format#format-builtin)**
>
> Create interactive data tables in seconds with Tabulator. A lightweight, fully featured JavaScript table generation library.

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [13 June 2020 21:36 UTC](https://discourse.nodered.org/t/solved-how-to-change-timestamps-in-objects-to-date-time-for-ui-table/28289/4 "2020-06-13T21:36:52Z")

</div>

Nice!! @Christian-Me, I did not know that `"inputFormat": "x",` could be used to match the timestamp (that is why I was using custom formatter). It worked fine for me. Thanks.

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [13 June 2020 21:42 UTC](https://discourse.nodered.org/t/solved-how-to-change-timestamps-in-objects-to-date-time-for-ui-table/28289/5 "2020-06-13T21:42:00Z")

</div>

It took me some time reading the moment.js docs ... so I wrote my custom formatters too 😉

~~[https://momentjs.com/docs/#/parsing/string-format/](https://momentjs.com/docs/#/parsing/string-format/)~~

comprehensive moment.js formats table here:

[https://momentjs.com/docs/#/displaying/](https://momentjs.com/docs/#/displaying/)

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [13 June 2020 21:46 UTC](https://discourse.nodered.org/t/solved-how-to-change-timestamps-in-objects-to-date-time-for-ui-table/28289/6 "2020-06-13T21:46:01Z")

</div>

I found the table here easier to use - [https://momentjs.com/docs/#/displaying/](https://momentjs.com/docs/#/displaying/)

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [13 June 2020 21:48 UTC](https://discourse.nodered.org/t/solved-how-to-change-timestamps-in-objects-to-date-time-for-ui-table/28289/7 "2020-06-13T21:48:41Z")

</div>

Indeed, that is a comprehensive table. Bookmarked. Thanks !

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [13 June 2020 21:49 UTC](https://discourse.nodered.org/t/solved-how-to-change-timestamps-in-objects-to-date-time-for-ui-table/28289/8 "2020-06-13T21:49:06Z")

</div>

Great - will bookmark it, I was looking for a "complete" table for a long time ...

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [13 June 2020 22:50 UTC](https://discourse.nodered.org/t/solved-how-to-change-timestamps-in-objects-to-date-time-for-ui-table/28289/9 "2020-06-13T22:50:30Z")

</div>

Brilliant! Thank you and I'm bookmarking this too!

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [13 June 2020 23:09 UTC](https://discourse.nodered.org/t/solved-how-to-change-timestamps-in-objects-to-date-time-for-ui-table/28289/10 "2020-06-13T23:09:37Z")

</div>

Ohhh I just found `"layout": "fitData",` which automatically fits the column to the width of the data. Without it the table looks like this:  
 ![Screen Shot 2020-06-13 at 7.07.53 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/0/f/0f58f36250b3da89d096bf4034c7229552df5b22.png)  
with it the table looks like this  
 ![Screen Shot 2020-06-13 at 7.08.10 PM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/f/9ffc83f169945ee7d8e36b4108edc2e692a8cbcc.png)

```auto
{
    "tabulator": {
        "layout": "fitData", <=== I added this line
        "columns": [
            {
                "formatter": "datetime",
                "formatterParams": {
                    "inputFormat": "x",
                    "outputFormat": "MM/DD/YY hh:mm:ss",
                    "invalidPlaceholder": "(invalid date)"
                },
                "title": "Last Seen",
                "field": "last_seen"
            },
            {
                "title": "Action",
                "field": "last_action"
            },
            {
                "title": "Location",
                "field": "location"
            },
            {
                "title": "MQTT node",
                "field": "mqtt_mode"
            },
            {
                "title": "Id",
                "field": "node_id"
            },
            {
                "title": "Status",
                "field": "node_status"
            },
            {
                "title": "sleep",
                "field": "sleep_time"
            }
        ]
    }
}

```

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [13 June 2020 23:22 UTC](https://discourse.nodered.org/t/solved-how-to-change-timestamps-in-objects-to-date-time-for-ui-table/28289/11 "2020-06-13T23:22:45Z")

</div>

One more thing, the `template` node is even easier to use than the `change` node. Just set it to Output to `Parsed JSON`

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [14 June 2020 10:35 UTC](https://discourse.nodered.org/t/solved-how-to-change-timestamps-in-objects-to-date-time-for-ui-table/28289/12 "2020-06-14T10:35:20Z")

</div>

Tabulator has so many cool features and a very good documentation! All features should be available through ui-table.

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [28 June 2020 10:35 UTC](https://discourse.nodered.org/t/solved-how-to-change-timestamps-in-objects-to-date-time-for-ui-table/28289/13 "2020-06-28T10:35:22Z")

</div>

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