# New table node for Dashboard 2.0

**URL:** <https://discourse.nodered.org/t/new-table-node-for-dashboard-2-0/88672>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [13 June 2024 12:20 UTC](https://discourse.nodered.org/t/new-table-node-for-dashboard-2-0/88672 "2024-06-13T12:20:30Z")\
**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:** [13 June 2024 12:20 UTC](https://discourse.nodered.org/t/new-table-node-for-dashboard-2-0/88672/1 "2024-06-13T12:20:30Z")

</div>

# Table node (using Tabulator) for Node-RED Dashboard 2.0

I have just published the node on NPM and Node-RED library.  
[@omrid/node-red-dashboard-2-table-tabulator](https://flows.nodered.org/node/@omrid01/node-red-dashboard-2-table-tabulator)  
GitHub repo: [https://github.com/omrid01/node-red-dashboard-2-table-tabulator](https://github.com/omrid01/node-red-dashboard-2-table-tabulator)

The node uses the popular [Tabulator](https://www.tabulator.info) JavaScript package, and enables presentation, styling/formatting, updating, editing and querying tables on the dashboard UI, in both _ **Shared** _ and _ **Multi-user** _ modes.

> **Note:** the node comes in addition to, not replacing, dashboard V2.0's native vue-based **table** node.

You are welcome to test & play with the node - it has comprehensive on-line help. Please let me know of any issues, and I am open to ideas & suggestions.

# ui-tabulator

 ![example-pic](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/1/5/156f6472e88ec5b1da3b0bbd64eff9252d34ff5e.png)

#### General Overview

- The node serves as a smart wrapper containing a Tabulator (table) object. For the most part, it calls the Tabulator API as-is (as defined in the [Tabulator Documentation](https://tabulator.info/docs/6.2)).
- The node enables automatic instantiation of the table (with user-defined configuration & initial data), as well as to dynamically create/destroy tables in runtime.
- Interface to the node is through messages (regular Node-red **msg** objects). The msg specifies a command (and arguments), and returns the table's response
- The node accepts data-setting commands (e.g. setData, addData, updateData, deleteData etc.) as well as data-query commands (getData, searchData etc.)
- In addition, the node can send unsolicited event messages for selected table events (cell & row click/double-click, cell edit etc.)
- By default, the table operates in **_shared_** mode, i.e. a common table image (data + styling) in all concurrent dashboard clients. The table image is also cached in the Node-RED datastore, and reloaded upon browser open, refresh etc.  
The node also supports a **_Multi-User_** mode, which maintains independent, client-specific table data.

#### Message Examples

- Data-setting command example

```auto
msg.tbCmd = "addData";
msg.tbArgs = [
   [
      {id:1, name:"bob", gender:"male"},
      {id:2, name:"Jenny", gender:"female"}
   ],
   true
];

```

- Data-retrieval command example

```auto
msg.tbCmd = "searchData";
msg.tbArgs = ["age", ">", 12];

```

- Data response example:  

- Event example

```auto
{
    topic: "tbNotification",
    event: "cellEdited",
    payload: {
        id: 2,
        field: "name",
        newValue: "Jack Brown",
        oldValue: "John Doe"
    },
    _client: {
        socketId: "uXRxjY9yO-Hya1vtAAAB"
    },
    _msgid:"6d9d7a97666f2783"
}

```

#### Node Configuration

The node configuration (editor properties):

- **Name, Group, Size** : - same as in all dashboard 2.0 nodes
- **Initial Table Configuration** : JSON object with all table & column definitions, and (optional) initial data
- **Notifications** : selection of table events which trigger notification messages
- **Multi-user** mode: (Y/N)
- **CSS theme** : selection of an optional tabulator CSS Stylesheet (e.g. **_Midnight_** , **_Modern_** etc.)
- **Pass through message from input** : if checked, forwards the incoming message as-is to the output port, **_in addition_** to the node'e response

#### Node Dependencies

- Node-JS version \>= 18
- Node-red version \>= 3.10
- Node-red dashboard 2.0, version \>= 1.11.1
- Tabulator version \>= 6.2 (comes bundled in the node installation)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [13 June 2024 12:46 UTC](https://discourse.nodered.org/t/new-table-node-for-dashboard-2-0/88672/2 "2024-06-13T12:46:04Z")

</div>

Hi, seems to be missing the link back to your source repo?

---

<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:** [13 June 2024 13:14 UTC](https://discourse.nodered.org/t/new-table-node-for-dashboard-2-0/88672/3 "2024-06-13T13:14:20Z")

</div>

To clarify that, you need to add into package.json something like

```auto

    "repository": {
        "type": "git",
        "url": "https://github.com/omrid/node-red-dashboard-2-table-tabulator.git"
    },

```

so that, for example, users can submit issues or checkout the code without having to install it.

---

<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:** [14 June 2024 08:41 UTC](https://discourse.nodered.org/t/new-table-node-for-dashboard-2-0/88672/4 "2024-06-14T08:41:43Z")

</div>

Added the repo info.  
Thanks Colin.

---

<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:** [15 June 2024 14:25 UTC](https://discourse.nodered.org/t/new-table-node-for-dashboard-2-0/88672/5 "2024-06-15T14:25:09Z")

</div>

I have posted a couple of issues I found on the github repo.

---

<div class="post-metadata">

**Author:** ![JeromeVISUALS](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jeromevisuals/32/40103_2.png) [@JeromeVISUALS](https://discourse.nodered.org/u/JeromeVISUALS)\
**Post date:** [16 June 2024 16:56 UTC](https://discourse.nodered.org/t/new-table-node-for-dashboard-2-0/88672/6 "2024-06-16T16:56:37Z")

</div>

Very happy to see this release.

Will test soon.

---

<div class="post-metadata">

**Author:** ![arturv2000](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arturv2000/32/88724_2.png) [@arturv2000](https://discourse.nodered.org/u/arturv2000)\
**Post date:** [16 June 2024 18:57 UTC](https://discourse.nodered.org/t/new-table-node-for-dashboard-2-0/88672/7 "2024-06-16T18:57:54Z")

</div>

Just tried to install but getting error. Install via pallete in Node-Red

```auto
16 Jun 19:50:25 - [info] Installing module: @omrid01/node-red-dashboard-2-table-tabulator, version: 0.2.8
16 Jun 19:50:27 - [warn] Installation of module @omrid01/node-red-dashboard-2-table-tabulator failed:
16 Jun 19:50:27 - [warn] ------------------------------------------
16 Jun 19:50:27 - [warn] npm ERR! code ETARGET
npm ERR! notarget No matching version found for @omrid01/node-red-dashboard-2-table-tabulator@0.2.8.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! A complete log of this run can be found in: C:\Users\artur\AppData\Local\npm-cache\_logs\2024-06-16T18_50_26_505Z-debug-0.log

16 Jun 19:50:27 - [warn] ------------------------------------------
Error: Install failed
    at C:\Users\artur\AppData\Roaming\npm\node_modules\node-red\node_modules\@node-red\registry\lib\installer.js:290:25
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
16 Jun 19:50:27 - [error] Error: Install failed

```

Using Node-Red v4.0.0-beta.4, NodeJs: 20.11.1 and Dashboard 1.11.1

It seems the version publish in Node-Red catalogue is 0.2.8 but the version that exists in npm is 0.2.93

Node Red Catalogue

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/7/d715c53f53865053c0f269ad8c5d26f33058e4d8.png)

Version in NPM

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

Maybe NodeRed catalogue is not updated... but should npm store the previous released versions?

---

<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:** [16 June 2024 19:15 UTC](https://discourse.nodered.org/t/new-table-node-for-dashboard-2-0/88672/8 "2024-06-16T19:15:41Z")

</div>

> [@arturv2000](#):
>
> Maybe NodeRed catalogue is not updated

Is now updated. Might take ~30mins to appear in palette manager.

---

<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:** [16 June 2024 19:24 UTC](https://discourse.nodered.org/t/new-table-node-for-dashboard-2-0/88672/9 "2024-06-16T19:24:14Z")

</div>

> [@arturv2000](#):
>
> Dashboard 1.11.1

I believe you need dashboard 2 for this node.

---

<div class="post-metadata">

**Author:** ![arturv2000](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/arturv2000/32/88724_2.png) [@arturv2000](https://discourse.nodered.org/u/arturv2000)\
**Post date:** [16 June 2024 19:34 UTC](https://discourse.nodered.org/t/new-table-node-for-dashboard-2-0/88672/10 "2024-06-16T19:34:49Z")

</div>

> [@zenofmud](#):
>
> I believe you need dashboard 2 for this node.

V1.11.1 is the latest version of Dashboard 2

> [@Steve-Mcl](#):
>
> Is now updated. Might take ~30mins to appear in palette manager.

Can see that in Nodered catalogue is updated, now is even more strange, in the GitHub repo the latest version is suppose to be 0.2.94 as in the node red catalogue, but on npm still shows only version 0.2.93 as the latest and only one available.

Probably sync "issues" and timings.

Seems that the module is being updated by the author, and is also "deleting" the previous versions from the npm catalogue.

Will give it a try another day.

---

<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:** [16 June 2024 20:29 UTC](https://discourse.nodered.org/t/new-table-node-for-dashboard-2-0/88672/11 "2024-06-16T20:29:16Z")

</div>

@omrid, please don't delete old versions from npmjs, if that is what you have done. It causes problems as you can see.

---

<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:** [16 June 2024 21:07 UTC](https://discourse.nodered.org/t/new-table-node-for-dashboard-2-0/88672/12 "2024-06-16T21:07:26Z")

</div>

It seems to have disappeared entirely from npmjs now.

---

<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:** [16 June 2024 21:15 UTC](https://discourse.nodered.org/t/new-table-node-for-dashboard-2-0/88672/13 "2024-06-16T21:15:11Z")

</div>

Hi, every time I publish a new version, NPM removes the previous one. I use the command "npm install @omrid... --access public".  
Is there some other command or switch I should use?

In any case, we should be all aligned now on v0.2.94, across GitHub, NPM and the Node-red library.

---

<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:** [17 June 2024 06:31 UTC](https://discourse.nodered.org/t/new-table-node-for-dashboard-2-0/88672/14 "2024-06-17T06:31:29Z")

</div>

> [@omrid](#):
>
> I use the command "npm install @omrid... --access public".

What full exact command are you using? I don't think it is `npm install`.  
You should only need to specify --access public the first time you publish, but I would not have expected that to have deleted previous versions.

Strangely, searching [npmjs.com](http://npmjs.com) for @omrid01/node-red-dashboard-2-table-tabulator doesn't find it, though it does in fact exist.

By the way, the convention after getting to version 1.1.9 is to go to 1.1.10, not 1.1.91.  
Also you don't have to up the version every time you push to github. Only when you want to do a release.

---

<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:** [17 June 2024 07:41 UTC](https://discourse.nodered.org/t/new-table-node-for-dashboard-2-0/88672/15 "2024-06-17T07:41:55Z")

</div>

Thanks, Colin! I meant of course `npm publish`, (too much beer...), and I'm noting your recommendation on version numbering.  
To make sure - upon publish, NPM always grabs the latest GitHub release, and determines the version number from the tag - correct?

> [@Colin](#):
>
> Strangely, searching [npmjs.com](http://npmjs.com) for @omrid01/node-red-dashboard-2-table-tabulator doesn't find it, though it does in fact exist.

Strange indeed, I can see the package on **[npmjs.com](http://npmjs.com)**, as you can see below. The page shows the latest package, and `npm view ... versions` shows 0.2.93 & 0.2.94 (but not any previous versions).

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/7/47823096257f3324fdb78b2e753d84ed291429f2.png)

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [17 June 2024 08:16 UTC](https://discourse.nodered.org/t/new-table-node-for-dashboard-2-0/88672/16 "2024-06-17T08:16:59Z")

</div>

> [@omrid](#):
>
> To make sure - upon publish, NPM always grabs the latest GitHub release, and determines the version number from the tag - correct?

Not if you are doing the publish from your dev PC. It takes it from whatever is the current branch/version in the folder where you are doing the `npm publish`

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [17 June 2024 08:17 UTC](https://discourse.nodered.org/t/new-table-node-for-dashboard-2-0/88672/17 "2024-06-17T08:17:32Z")

</div>

v0.29.4 installed perfectly via the palette for me, no problems.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [17 June 2024 08:20 UTC](https://discourse.nodered.org/t/new-table-node-for-dashboard-2-0/88672/18 "2024-06-17T08:20:38Z")

</div>

Here is the workflow I use for publishing.

- First I create a new branch on GitHub and work on that locally until ready.
- When ready, I do a final push and then create a PR to merge back to the `main` branch.
- On the local dev PC, I switch branches to `main`.
- Create a new tag with the new release version as the name, e.g. `v1.2.3` and then create a GitHub new release from the tag.
- Now to `npm publish`

Typically, I have this largely automated using Gulp.

---

<div class="post-metadata">

**Author:** ![Paul-Reed](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/paul-reed/32/66906_2.png) [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)\
**Post date:** [17 June 2024 08:33 UTC](https://discourse.nodered.org/t/new-table-node-for-dashboard-2-0/88672/19 "2024-06-17T08:33:56Z")

</div>

> [@TotallyInformation](#):
>
> Here is the workflow I use for publishing.

That's also what I do (except I do it manually - no gulp)

---

<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:** [17 June 2024 08:51 UTC](https://discourse.nodered.org/t/new-table-node-for-dashboard-2-0/88672/20 "2024-06-17T08:51:23Z")

</div>

Prettty much the same here, though I don't bother with PRs, I just merge the branch into main on my PC. For small changes I may not even bother pushing the branch to github. For very small changes I don't bother with creating a branch.

[Next page](https://discourse.nodered.org/t/new-table-node-for-dashboard-2-0/88672.md?page=2)