# Using Tabulator grids in Dashboard v2.0 templates

**URL:** <https://discourse.nodered.org/t/using-tabulator-grids-in-dashboard-v2-0-templates/85068>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [31 January 2024 11:43 UTC](https://discourse.nodered.org/t/using-tabulator-grids-in-dashboard-v2-0-templates/85068 "2024-01-31T11:43:06Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [31 January 2024 11:43 UTC](https://discourse.nodered.org/t/using-tabulator-grids-in-dashboard-v2-0-templates/85068/1 "2024-01-31T11:43:06Z")

</div>

My team is using interactive data grids extensively in our dashboard UI. Due to limitations of **ui-table** in dashboard v1.0 & v2.0, we instantiate the Tabulator package ([Tabulator](https://tabulator.info/)) directly within v2.0 template nodes, and thus enjoy the full Tabulator functionality.  
I developed a "Grid wrapper", which can manage multiple grids on a UI page, and supports the full Tabulator API (sync & async), receiving & sending flow messages & error handling in both single & multi user modes. It can also expose direct access to the Tabulator objects, allowing local (message-less) operations within the template (e.g. in button-click or onChange callbacks).

@joepavitt, my intention is to take this a step further into a custom dashboard node (which I'll be happy to share with the user community). I have developed many custom nodes, but not yet a dashboard node. Is there some stripped-down, hello-worldish prototype which I can take and build upon?

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [5 February 2024 06:32 UTC](https://discourse.nodered.org/t/using-tabulator-grids-in-dashboard-v2-0-templates/85068/2 "2024-02-05T06:32:52Z")

</div>

Hi @omrid,  
Nice to hear you consider developing a custom ui node for D2!

[Here](https://dashboard.flowfuse.com/contributing/widgets/third-party.html) you can find the documentation for third party ui node development. And Joe has also been so kind to provide us an [example ui node](https://github.com/FlowFuse/node-red-dashboard-2-ui-example).

I also started to create a [cheat sheet](https://github.com/FlowFuse/node-red-dashboard/issues/404) for ui node development in D2, but due to time limitations I have **not** been able to complete it yet. I created that diagram because some time ago I start migrating one of my ui nodes to D2, and (since I don't know anything about Vue) I had big troubles to see the cohesion between all the details in the documenation. So not sure if it can be of any help to you, but it was good enough for me to understand the complete picture.

Good luck!!  
Bart

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [6 February 2024 12:20 UTC](https://discourse.nodered.org/t/using-tabulator-grids-in-dashboard-v2-0-templates/85068/3 "2024-02-06T12:20:56Z")

</div>

@BartButenaers has already shared the best resources to help you get started - but do feel free to ping me or tag me in open PRs/repos as you build this out.

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [26 February 2024 16:16 UTC](https://discourse.nodered.org/t/using-tabulator-grids-in-dashboard-v2-0-templates/85068/4 "2024-02-26T16:16:17Z")

</div>

OK, so I finally got around to try implementing Tabulator in a dashboard v2.0 node.  
Following the advice from @BartButenaers & @joepavitt, I downloaded the example node, and managed to install & run it in my local environment.  
As I understand from the documentation, unlike regular custom nodes, dashboard nodes need to be "compiled" to a `.umd.js` file which is then loaded to the dashboard.  
I'm trying to experiment with the example node, but not able to perform this compilation. When I try to do `npm run build`, I get the following error:  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/9/795634db8ebae12544eec4f10b0bef65ebcb2348.png)

What am I doing wrong?

On another note - my Tabulator implementation is not using Vue. Is it still necessary to include the Vue imports in the node, or can I try to remove them?

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [26 February 2024 16:37 UTC](https://discourse.nodered.org/t/using-tabulator-grids-in-dashboard-v2-0-templates/85068/5 "2024-02-26T16:37:03Z")

</div>

Did you do `npm install` in your node's root folder? Because that installs all dependencies from your package.json file, which includes Vite. If I remember correctly. But far from an expert...

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [26 February 2024 16:42 UTC](https://discourse.nodered.org/t/using-tabulator-grids-in-dashboard-v2-0-templates/85068/6 "2024-02-26T16:42:26Z")

</div>

Thanks. I always `npm install` from within my Node-red home directory. And the new example node did come up correctly. Was I supposed to install it on a different path?

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [26 February 2024 16:47 UTC](https://discourse.nodered.org/t/using-tabulator-grids-in-dashboard-v2-0-templates/85068/7 "2024-02-26T16:47:45Z")

</div>

No I don't mean about installing your new node so Node-RED can use it. That is something else.

I mean if you have a look at the package.json file of your ui node, you will see the Vite related libraries:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/5/15fb16ef1d59e3ed7d2a53c9fd3476f12a60f267.png)

So if you are inside the folder of your ui node and you do `npm install`, the all these dependencies are installed. Which means you can afterwards do inside your ui node folder also `npm run build`, which then hopefully works because now Vite has been installed.

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [26 February 2024 17:00 UTC](https://discourse.nodered.org/t/using-tabulator-grids-in-dashboard-v2-0-templates/85068/8 "2024-02-26T17:00:23Z")

</div>

OK, this seems to have solved the issue. Thanks for the quick reply!  
Moving forward...

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [27 February 2024 11:49 UTC](https://discourse.nodered.org/t/using-tabulator-grids-in-dashboard-v2-0-templates/85068/9 "2024-02-27T11:49:02Z")

</div>

> [@omrid](#):
>
> On another note - my Tabulator implementation is not using Vue. Is it still necessary to include the Vue imports in the node, or can I try to remove them?

The Dashboard framework does depend on each widget being a Vue component (which is built into the `umd.js` file you can see. So whilst it doesn't have to be Vue through and through, it does need to at least be wrapped in a Vue component.

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [28 February 2024 17:14 UTC](https://discourse.nodered.org/t/using-tabulator-grids-in-dashboard-v2-0-templates/85068/10 "2024-02-28T17:14:46Z")

</div>

OK, next question 🙂  
I send & receive Node-red messages successfully, following the example code:

```auto
    mounted () {
        this.$socket.on('msg-input:' + this.id, (msg) => {
		     this.$socket.emit('widget-action', this.id, {payload: "Forwarding: "+msg.payload})
        })

        // tell Node-RED that we're loading a new instance of this widget
        this.$socket.emit('widget-load', this.id)
    },
    unmounted () {
        /* Make sure, any events you subscribe to on SocketIO are unsubscribed to here */
        this.$socket?.off('widget-load' + this.id)
        this.$socket?.off('msg-input:' + this.id)
    },

```

But how do I stop the original incoming message from being automatically forwarded to the output port? In `ui-template` there is a checkbox for this.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [28 February 2024 19:01 UTC](https://discourse.nodered.org/t/using-tabulator-grids-in-dashboard-v2-0-templates/85068/11 "2024-02-28T19:01:01Z")

</div>

There is also for the Dashboard 2 template node (at the bottom)

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [3 March 2024 10:55 UTC](https://discourse.nodered.org/t/using-tabulator-grids-in-dashboard-v2-0-templates/85068/12 "2024-03-03T10:55:40Z")

</div>

Hi @joepavitt

> [@omrid](#):
>
> But how do I stop the original incoming message from being automatically forwarded to the output port? In `ui-template` there is a checkbox for this.

Can you help here. I looked at the Dashboard 2.0 `template` source code, and tried to set a `passthru` variable in various places, but still cannot eliminate the automatic msg passthrough.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [3 March 2024 11:21 UTC](https://discourse.nodered.org/t/using-tabulator-grids-in-dashboard-v2-0-templates/85068/13 "2024-03-03T11:21:33Z")

</div>

As far as I know there is no automatic passthrough in ui-template. If you don't call `send()` or `emit()` then it will not send anything.

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [3 March 2024 13:17 UTC](https://discourse.nodered.org/t/using-tabulator-grids-in-dashboard-v2-0-templates/85068/14 "2024-03-03T13:17:23Z")

</div>

Thanks @Colin. In Dashboard 2.0 `ui-template` has a checkbox for this (added a few releases ago):  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/7/57b4aca2ca5eb0ebeab79f208baf08d8e5ae3a8e.png)  
So no issues with `ui-template` nodes

Here I am trying to develop a new custom dashboard 2.0 node. The node is working well, but forwards all incoming messages automatically, in addition to any message I emit.  
In the example below, I forward every incoming message, thus it comes out twice:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/1/21a033e30597ea1084e7ca9bb8a5b332007e8790.png)

```auto
        this.$socket.on('msg-input:' + this.id, (msg) => {
		    this.$socket.emit('widget-action', this.id, {payload: "Forwarding: "+msg.payload})
        })

```

---

<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:** [3 March 2024 13:41 UTC](https://discourse.nodered.org/t/using-tabulator-grids-in-dashboard-v2-0-templates/85068/15 "2024-03-03T13:41:31Z")

</div>

> [@omrid](#):
>
> I am trying to develop a new custom dashboard 2.0 node. The node is working well, but forwards all incoming messages automatically, in addition to any message I emit.

Is your source available in a repository that we can look at.

Have you looked at how this is achieved in the template node?

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [3 March 2024 13:47 UTC](https://discourse.nodered.org/t/using-tabulator-grids-in-dashboard-v2-0-templates/85068/16 "2024-03-03T13:47:35Z")

</div>

Oh, I thought you were using ui-template, I see now that you are developing a new contrib node, so my comments are not relevant.

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [3 March 2024 14:33 UTC](https://discourse.nodered.org/t/using-tabulator-grids-in-dashboard-v2-0-templates/85068/17 "2024-03-03T14:33:22Z")

</div>

Thanks @Steve-Mcl

> [@Steve-Mcl](#):
>
> > [@omrid](#):
> >
> > I am trying to develop a new custom dashboard 2.0 node. The node is working well, but forwards all incoming messages automatically, in addition to any message I emit.
> 
> Is your source available in a repository that we can look at.
> 
> Have you looked at how this is achieved in the template node?

I started from an example node [https://github.com/FlowFuse/node-red-dashboard-2-ui-example](https://github.com/FlowFuse/node-red-dashboard-2-ui-example)  
Which does the auto-forwarding.

Following your advice, I looked into how the passthrough is implemented in other Dashboard 2.0 nodes, and figured out that in my custom node, there is a `send(msg)` applied unconditionally upon the `onInput` event. When I comment it out, the passtrough gets disabled. Thanks!  
I will set this as a node configuration option. Just wanted to ensure that I am not impacting any other required behavior when disabling the automatic send

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [3 March 2024 16:01 UTC](https://discourse.nodered.org/t/using-tabulator-grids-in-dashboard-v2-0-templates/85068/18 "2024-03-03T16:01:30Z")

</div>

You got it @omrid - just make sure that passthru is considered within your onInput.

I can't recall from memory if you can just use the in-built `onInput` function, and not provide your own, I think you can, but need to double check when at my desk on Tuesday. You _should_ only need to define your own `onInput` function if you have bespoke behaviour that differs from the default.

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [5 March 2024 13:23 UTC](https://discourse.nodered.org/t/using-tabulator-grids-in-dashboard-v2-0-templates/85068/19 "2024-03-05T13:23:02Z")

</div>

Just to confirm, the definition of `onInput` in is _optional_ in the `evts` object when running `group.register(node, config, evts)

If none is provided, then it will fall back to the default handler which does the following steps:

- Save latest `msg` to server-side datastore
- Append `msg.topic` if `topic` and `topicType` is a defined property on the node
- Check on `passthru` field, forward on `msg` if appropriate

Source code for the default handler can be found: [node-red-dashboard/nodes/config/ui\_base.js at b8ef0be9b4e11a450a7c0c4cd5d2bedab601fd28 · FlowFuse/node-red-dashboard · GitHub](https://github.com/FlowFuse/node-red-dashboard/blob/b8ef0be9b4e11a450a7c0c4cd5d2bedab601fd28/nodes/config/ui_base.js#L918-L937)

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [5 March 2024 15:54 UTC](https://discourse.nodered.org/t/using-tabulator-grids-in-dashboard-v2-0-templates/85068/20 "2024-03-05T15:54:17Z")

</div>

And even better is the documentation where I detail the `.register` function: [Widget Registration | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/contributing/guides/registration.html)

[Next page](https://discourse.nodered.org/t/using-tabulator-grids-in-dashboard-v2-0-templates/85068.md?page=2)