# Use Tabulator examples in Node-Red

**URL:** <https://discourse.nodered.org/t/use-tabulator-examples-in-node-red/42217>\
**Category:** General\
**Created:** [7 March 2021 20:11 UTC](https://discourse.nodered.org/t/use-tabulator-examples-in-node-red/42217 "2021-03-07T20:11:57Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![multixz](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/multixz/32/39420_2.png) [@multixz](https://discourse.nodered.org/u/multixz)\
**Post date:** [7 March 2021 20:11 UTC](https://discourse.nodered.org/t/use-tabulator-examples-in-node-red/42217/1 "2021-03-07T20:11:58Z")

</div>

Hello

I want to make a table with the help of [http://tabulator.info/](http://tabulator.info/). I need addable rows and a safe buttom to store the whole table data. There are examples on [http://tabulator.info/examples/4.9#adddel](http://tabulator.info/examples/4.9#adddel). But I don't quite understand how I can transfer the examples to node-red.

Could anyone help me, please.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [7 March 2021 20:32 UTC](https://discourse.nodered.org/t/use-tabulator-examples-in-node-red/42217/2 "2021-03-07T20:32:12Z")

</div>

Ui-table users tabulator under the hood.

---

<div class="post-metadata">

**Author:** ![multixz](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/multixz/32/39420_2.png) [@multixz](https://discourse.nodered.org/u/multixz)\
**Post date:** [7 March 2021 20:42 UTC](https://discourse.nodered.org/t/use-tabulator-examples-in-node-red/42217/3 "2021-03-07T20:42:59Z")

</div>

What do you mean with "Ui-table users tabulator under the hood." ?  
Can you please be little bit more precise?

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [7 March 2021 20:44 UTC](https://discourse.nodered.org/t/use-tabulator-examples-in-node-red/42217/4 "2021-03-07T20:44:23Z")

</div>

"node-red-node-ui-table (node) - Node-RED" [node-red-node-ui-table (node) - Node-RED](https://flows.nodered.org/node/node-red-node-ui-table)

---

<div class="post-metadata">

**Author:** ![multixz](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/multixz/32/39420_2.png) [@multixz](https://discourse.nodered.org/u/multixz)\
**Post date:** [7 March 2021 20:57 UTC](https://discourse.nodered.org/t/use-tabulator-examples-in-node-red/42217/5 "2021-03-07T20:57:22Z")

</div>

I know this documentation. Under the title advanced features it tells me I should switch to the documentation of Tabulator. But I don't understand how I can transfer the examples to nodered. That is what I have achieved:

```auto
[{"id":"5fdb3a46.58b504","type":"ui_table","z":"f6f2187d.f17ca8","group":"e2dc63b.75723a","name":"","order":0,"width":0,"height":0,"columns":[],"outputs":1,"cts":true,"x":630,"y":340,"wires":[[]]},{"id":"c63063cd.efae7","type":"inject","z":"f6f2187d.f17ca8","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"name\":\"\",\"volt\":\"Bathroom\",\"status\":0},{\"name\":\"MEQ0451495\",\"volt\":\"Bathroom\",\"status\":1},{\"name\":\"MEQ0451495\",\"volt\":\"Bathroom\",\"status\":2},{\"name\":\"MEQ0451495\",\"volt\":\"Bathroom\",\"status\":3},{\"name\":\"MEQ0451495\",\"volt\":\"Bathroom\",\"status\":4}]","payloadType":"json","x":220,"y":340,"wires":[["468bd21a.c4707c"]]},{"id":"468bd21a.c4707c","type":"change","z":"f6f2187d.f17ca8","name":"","rules":[{"t":"set","p":"ui_control","pt":"msg","to":"{\"tabulator\":{\"columns\":[{\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"Device\",\"field\":\"name\",\"width\":\"40%\",\"align\":\"center\",\"precision\":3},{\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"Akku\",\"field\":\"volt\",\"width\":\"30%\",\"align\":\"right\",\"editor\":\"input\",\"validator\":[\"min:0\",\"max:100\",\"numeric\"]},{\"formatterParams\":{\"target\":\"_blank\"},\"title\":\"Status\",\"field\":\"status\",\"formatter\":\"function(cell, formatterParams, onRendered){var html=\\\"<i class=\\\\\\\"\\\";switch(cell.getValue()) {case 0: html+=\\\"fa fa-battery-empty\\\\\\\" style=\\\\\\\"color:red\\\\\\\"\\\"; break;case 1: html+=\\\"fa fa-battery-quarter\\\\\\\" style=\\\\\\\"color:orange\\\\\\\"\\\"; break;case 2: html+=\\\"fa fa-battery-half\\\\\\\" style=\\\\\\\"color:orange\\\\\\\"\\\"; break;case 3: html+=\\\"fa fa-battery-three-quarters\\\\\\\" style=\\\\\\\"color:orange\\\\\\\"\\\"; break;case 4: html+=\\\"fa fa-battery-full\\\\\\\" style=\\\\\\\"color:green\\\\\\\"\\\"; break;}html+='\\\\\\\"></i>';return html; }\",\"width\":\"30%\",\"align\":\"center\"}],\"layout\":\"fitColumns\",\"movableColumns\":false,\"groupBy\":\"\"},\"customHeight\":20}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":440,"y":340,"wires":[["5fdb3a46.58b504","d5f4853.841ab78"]]},{"id":"d5f4853.841ab78","type":"debug","z":"f6f2187d.f17ca8","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":650,"y":300,"wires":[]},{"id":"e2dc63b.75723a","type":"ui_group","name":"Standard","tab":"fd1f858e.37a068","order":1,"disp":true,"width":"6","collapse":false},{"id":"fd1f858e.37a068","type":"ui_tab","name":"Tabletest","icon":"dashboard","disabled":false,"hidden":false}]

```

But how can I add rows to the table with a button?  
And how can I get the whole table data?

regards Francesco

---

<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:** [8 March 2021 17:08 UTC](https://discourse.nodered.org/t/use-tabulator-examples-in-node-red/42217/6 "2021-03-08T17:08:46Z")

</div>

Hi Francesco,

your task isn't easy, and [asked before](https://discourse.nodered.org/t/get-data-from-ui-table/41440/5).

- you use the standard method, collecting your data in context and send the whole updated table to the dashboard in an array
- you use commands to like "addRow" to add new data. But then your data only exits in tabulator and will soon disappear as the dashboard is only passing the commands to tabulator. So you have to cache the data too.

But there is help 😉

[https://flows.nodered.org/flow/35d0480ce9151b2a722fa9d185a37825](https://flows.nodered.org/flow/35d0480ce9151b2a722fa9d185a37825)

You have to pass your data through this subflow. Everything under a specific property will be added to the table and stored. By sending `msg.payload.command='getTable';` you will get all your data.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/8/18113b159a1fe9c69a1f82d5751685fac9439250.png)

the ui-control is used to update/refresh your table on connects and tab changes

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/a/ca085f5fa6bdc5d0a1818378ab068ec23f5bd1fd.png)

- Tabulator: the tabulator formatting JSON
- the msg property where your data comes in (NOT payload!) like `msg.state.col1="This is row 1"`
- a index property to identify rows (to be able to overwrite / update rows)
- maxRows and maxStore to limit rows in tabulator and in context store
- The Dashboard Tab name (to trigger redraws only if this tab is active)
- a json where and who to store your data.

I haven't imported your flow, sorry, no time.

---

<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:** [7 May 2021 17:08 UTC](https://discourse.nodered.org/t/use-tabulator-examples-in-node-red/42217/7 "2021-05-07T17:08:57Z")

</div>

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