# Ui-table supports ui\_control

**URL:** <https://discourse.nodered.org/t/ui-table-supports-ui-control/18870>\
**Category:** Dashboard\
**Created:** [6 December 2019 16:05 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870 "2019-12-06T16:05:57Z")\
**Posts on this page:** 20\
**Page:** 4

<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 January 2021 21:43 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/64 "2021-01-08T21:43:49Z")

</div>

It seams that html download is a newer feature. UI-Table is some versions behind. It uses 4.4.1 of tabulator. The message suggests that the command works but the feature is not supported (jet)

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

---

<div class="post-metadata">

**Author:** ![LeoMeendess](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/leomeendess/32/42053_2.png) [@LeoMeendess](https://discourse.nodered.org/u/LeoMeendess)\
**Post date:** [24 May 2021 13:43 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/65 "2021-05-24T13:43:40Z")

</div>

hi @Christian-Me can you send me the example of this ui\_control table so that i can start my project from there?

---

<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:** [24 May 2021 15:04 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/66 "2021-05-24T15:04:05Z")

</div>

Hi @LeoMeendess  
Take a look into menu/import/examples... you will find a few templates there ...

---

<div class="post-metadata">

**Author:** ![LeoMeendess](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/leomeendess/32/42053_2.png) [@LeoMeendess](https://discourse.nodered.org/u/LeoMeendess)\
**Post date:** [28 May 2021 12:15 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/67 "2021-05-28T12:15:19Z")

</div>

sorry i don't found this menu. can you send to me?

---

<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 May 2021 13:42 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/68 "2021-05-28T13:42:24Z")

</div>

Maybe this will help you find them:  
 ![Screen Shot 2021-05-28 at 9.40.31 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/b/bbacbfa22a93f4067264447c9e9ddb060af8e035.png)  
 ![Screen Shot 2021-05-28 at 9.41.10 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/c/bca5cbfa321923647404c75a2faf53938cd9d909.png)

---

<div class="post-metadata">

**Author:** ![LeoMeendess](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/leomeendess/32/42053_2.png) [@LeoMeendess](https://discourse.nodered.org/u/LeoMeendess)\
**Post date:** [28 May 2021 16:53 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/69 "2021-05-28T16:53:29Z")

</div>

tks for all !

---

<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:** [28 May 2021 17:35 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/70 "2021-05-28T17:35:44Z")

</div>

Don't hesitate to come back if you have any questions.

---

<div class="post-metadata">

**Author:** ![Nasro](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nasro/32/43232_2.png) [@Nasro](https://discourse.nodered.org/u/Nasro)\
**Post date:** [11 June 2021 19:02 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/71 "2021-06-11T19:02:10Z")

</div>

Hi  
how can I pass download command to Ui-etable in same as Ui-table

```auto
{
    "command": "download",
    "arguments": [
        "csv",
        "data.csv"
    ],
    "returnPromise": true
}

```

i use this code but not work  
thanks for Help

---

<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:** [12 June 2021 13:28 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/72 "2021-06-12T13:28:17Z")

</div>

This thread is about ui-table not ui-etable. I think etable is not developed any further.  
Or to say it differently: consider using ui-table instead.

---

<div class="post-metadata">

**Author:** ![Nasro](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nasro/32/43232_2.png) [@Nasro](https://discourse.nodered.org/u/Nasro)\
**Post date:** [13 June 2021 15:33 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/73 "2021-06-13T15:33:19Z")

</div>

Thank you @Christian-Me for your answer  
could you provide an simple exemple flow for how we can change ui-table cell into editable cell

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/2/b20d4211c6b60156d2765b61fd16481773249293.png)  
thank you

---

<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 2021 12:24 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/74 "2021-06-14T12:24:20Z")

</div>

Hi,  
perhaps play around with example `6 ui_control interactive` (import/examples)

Here you can generate 2 messages by clicking on 'enable cell edit (text)' to enable the th build in text editor and the ìnject celledited callback` to install the callback to receive a message as soon a cell was edited by the user

You can combine both into a JSON you inject triggered by a ui-control node into ui-table:

```auto
[{"id":"1186a10c.5eac3f","type":"ui_ui_control","z":"c4712650.59b5e8","name":"","events":"connect","x":401,"y":255,"wires":[["b469decd.fbf44"]]},{"id":"b469decd.fbf44","type":"change","z":"c4712650.59b5e8","name":"","rules":[{"t":"set","p":"ui_control","pt":"msg","to":"{\"tabulator\":{\"columns\":[{\"field\":\"textValue\",\"title\":\"Text\",\"editor\":\"input\",\"formatter\":\"plaintext\"}],\"cellEdited\":\"function(cell){ this.send({ ui_control:{callback:'cellEdited'}, payload:cell.getValue(), oldValue:cell.getOldValue(), field:cell.getColumn().getField(), id:cell.getRow().getIndex() }); }\"}}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":583,"y":255,"wires":[["154e4969.2419f7"]]},{"id":"154e4969.2419f7","type":"debug","z":"c4712650.59b5e8","name":"to Table","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":774,"y":255,"wires":[]}]

```

The callback is "universal". Please edit the columns definition matching your table. only the field properties are mandatory to identify which column you like to make editable. You can use other editors if you like. You can find more info here: [Tabulator](http://tabulator.info/docs/4.7/edit#edit-builtin)

---

<div class="post-metadata">

**Author:** ![Nasro](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/nasro/32/43232_2.png) [@Nasro](https://discourse.nodered.org/u/Nasro)\
**Post date:** [16 June 2021 14:22 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/75 "2021-06-16T14:22:00Z")

</div>

Hi @Christian-Me it work thank you for your help

---

<div class="post-metadata">

**Author:** ![CreativeWarlock](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/creativewarlock/32/102051_2.png) [@CreativeWarlock](https://discourse.nodered.org/u/CreativeWarlock)\
**Post date:** [28 June 2021 10:29 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/76 "2021-06-28T10:29:13Z")

</div>

I found on the Tabulator documentation that there is a modular loader element that can be used

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

```auto
<div style='display:inline-block; border:4px solid #333; border-radius:10px; background:#fff; font-weight:bold; font-size:16px; color:#000; padding:10px 20px;'>Loading Data</div>

```

I have tried it with a ui\_template node but the div is then placed somewhere deep in the HTML document.

Any chance we can put that div element as a top element in the HTML document if the table is in the middle of being filled with data?

---

<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:** [4 July 2021 14:53 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/77 "2021-07-04T14:53:48Z")

</div>

Hi,

reading the docs it seams like the loader is working together with population ui-table with AJAX:

| ajaxLoaderLoading | string | html (see below) | html for loader element | |
| --- | --- | --- | --- | --- |
| ajaxLoaderError | string | html (see below) | html for the loader element in the event of an error | |

If you are using AJAX loading mechanism than you should be able to pass the HTML simply by sending it with `msg.ui_control.tabulator` or use the default HTML.

Filling the table by passing an array will never show up a loading screen as the table is created together with the data. When using commands tabulator starts with an empty table and then shows data as it arrives.

---

<div class="post-metadata">

**Author:** ![CreativeWarlock](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/creativewarlock/32/102051_2.png) [@CreativeWarlock](https://discourse.nodered.org/u/CreativeWarlock)\
**Post date:** [4 July 2021 16:20 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/78 "2021-07-04T16:20:03Z")

</div>

I am afraid, I cannot follow what you are referring to. I know what Ajax is, but never used it in my flows / the frontend dashboard..

Would this example help me?  
[https://flows.nodered.org/flow/1bffe6808d37bd96cce283939983e758](https://flows.nodered.org/flow/1bffe6808d37bd96cce283939983e758)

---

<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:** [4 July 2021 18:21 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/79 "2021-07-04T18:21:05Z")

</div>

> [@CreativeWarlock](#):
>
> modular loader element that can be used

I don't know what you try to achieve here ... loading data from somewhere outside node-red into tabulator? Loading Data into tabulator works in [different ways](http://tabulator.info/docs/4.9/data). ui-table only uses the [first method](http://tabulator.info/docs/4.9/data#array-initial) or using [commands like](http://tabulator.info/docs/4.9/update#alter-update) `updateOrAddData`

I think to help you further I have to understand your goal first

---

<div class="post-metadata">

**Author:** ![CreativeWarlock](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/creativewarlock/32/102051_2.png) [@CreativeWarlock](https://discourse.nodered.org/u/CreativeWarlock)\
**Post date:** [4 July 2021 22:46 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/80 "2021-07-04T22:46:18Z")

</div>

No ofc not. When the data is being filled into the table there's like 2-3 seconds a flimmering going on and another user who is trying to work and click in the table does not realize that the table is still in the process of loading. But he complains why the table does not respond when he clicks inside certain clickable elements. So that's where I thought it could come in handy to just shut the editing out with a "modal loading" HTML element ( you know, there's a gray background above everything and a centered text reads "Loading..." ). That's all I'd like to do.

From the documentation ([Tabulator](http://tabulator.info/docs/4.9/options#data)):

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/e/be63f50272199b87078ce28a646a699be7dee3cb.png)

Will try out if I can make it work through ajaxLoaderLoading.

---

<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:** [5 July 2021 07:39 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/81 "2021-07-05T07:39:23Z")

</div>

All ui widgets should accept `msg.enabled=false` to disable them which then greys them out and makes them read only - so maybe that would work for you ?

---

<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:** [5 July 2021 08:00 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/82 "2021-07-05T08:00:06Z")

</div>

Your table must be very large (?)... How do you send the data to the dashboard? Line by line using `addData`? If so perhaps try to send all data at once. If there is sorting or filtering active I assume that tabulator does it's job after every line you send. (in my syslog table (a lot of lines)) the table show up instantly as it is filled with one array)  
Ajax is a little bit outdated (complicated and slow). As the dashboard uses websockets to communicate with the backend I would not go that road.

---

<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:** [5 July 2021 08:01 UTC](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870/83 "2021-07-05T08:01:37Z")

</div>

Good point ... I think ui-table does not support to be disabled 😉

[Previous page](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870.md?page=3)

[Next page](https://discourse.nodered.org/t/ui-table-supports-ui-control/18870.md?page=5)