# Using a local installation of Tabulator in a dashboard template

**URL:** <https://discourse.nodered.org/t/using-a-local-installation-of-tabulator-in-a-dashboard-template/79140>\
**Category:** Dashboard\
**Created:** [12 June 2023 08:29 UTC](https://discourse.nodered.org/t/using-a-local-installation-of-tabulator-in-a-dashboard-template/79140 "2023-06-12T08:29:25Z")\
**Posts on this page:** 9\
**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:** [12 June 2023 08:29 UTC](https://discourse.nodered.org/t/using-a-local-installation-of-tabulator-in-a-dashboard-template/79140/1 "2023-06-12T08:29:25Z")

</div>

Hi all,  
Following great advice from @madhouse, I am instantiating tabulator directly in a template node, and it works perfectly, allowing me functionality that is not available in the 'table' wrapper node..  
In order to instantiate and interact with tabulator, I need to set an external reference to the package as follows:

```auto
<link href="https://unpkg.com/tabulator-tables/dist/css/tabulator_midnight.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables/dist/js/tabulator.min.js"></script>

```

Now I need to run my system on a stand-alone, disconnected system, which cannot access [unpkg.com](http://unpkg.com). Any advice on how to install tabulator locally, and set the reference to this local installation?  
Thanks

---

<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:** [12 June 2023 09:21 UTC](https://discourse.nodered.org/t/using-a-local-installation-of-tabulator-in-a-dashboard-template/79140/2 "2023-06-12T09:21:57Z")

</div>

Did you try copying the files to your device and changing the references to point at where you put the files on your device?r

---

<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:** [12 June 2023 09:37 UTC](https://discourse.nodered.org/t/using-a-local-installation-of-tabulator-in-a-dashboard-template/79140/3 "2023-06-12T09:37:22Z")

</div>

Yes, first thing I tried. However, the ref is looking for a web site, not file location. I could run a local web server for this but it would complicate my deployment. Maybe there is a way to piggyback Node-red itself for this?

---

<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:** [12 June 2023 10:34 UTC](https://discourse.nodered.org/t/using-a-local-installation-of-tabulator-in-a-dashboard-template/79140/4 "2023-06-12T10:34:23Z")

</div>

Have you edited `.node-red/settings.js` and set up `httpStatic` and put the files there and reference them there?

```auto
    //httpStatic: '/home/nol/node-red-static/', //single static source
    /* OR multiple static sources can be created using an array of objects... */
    //httpStatic: [
    // {path: '/home/nol/pics/', root: "/img/"}, 
    // {path: '/home/nol/reports/', root: "/doc/"}, 
    //],

```

---

<div class="post-metadata">

**Author:** ![madhouse](https://avatars.discourse-cdn.com/v4/letter/m/b77776/32.png) [@madhouse](https://discourse.nodered.org/u/madhouse)\
**Post date:** [12 June 2023 14:27 UTC](https://discourse.nodered.org/t/using-a-local-installation-of-tabulator-in-a-dashboard-template/79140/5 "2023-06-12T14:27:23Z")

</div>

Depending on the OS you're using (Linux or Windows), you can simply navigate to your .node-red folder and install the tabulator-tables module.

```auto
npm i tabulator-tables -g

```

This installs Tabulator into the same area as all the other Node-Red packages and allows Node-Red to reference it for use.

There is a caveat to that though. You can't reference it directly from the ui-template. In order to do that, you'll have to navigate to

`.node-red\node-modules\node-red-dashboard\dist`  
(apply directory slashes based on OS used)

Then run the NPM command above in there. It will create a node-modules directory in there with everything related to Tabulator installed. Then you have the ability to reference it directly from within the ui-template as if you were referencing it from the web source. Your new reference will simply become:

```auto
<link href="node-modules/tabulator-tables/dist/css/tabulator_midnight.min.css" rel="stylesheet">
<script type="text/javascript" src="node-modules/tabulator-tables/dist/js/tabulator.min.js"></script>

```

In fact, anything you put into the node-red-dashboard\dist directory can be referenced from within your ui-template in the same way (documents, images, videos...).

Enjoy.

---

<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 2023 12:51 UTC](https://discourse.nodered.org/t/using-a-local-installation-of-tabulator-in-a-dashboard-template/79140/6 "2023-06-13T12:51:36Z")

</div>

Thank you @zenofmud and @madhouse for your help.  
So now I know that **node-red-dashboard\dist** can be my base repository for all dashboard web resources... it helps me so much!

Regarding the local installation of tabulator, I'm still struggling. I followed @madhouse instructions (installed tabulator twice - under the general Node-red directory and then again under **node-red-dashboard\dist** ), but the grid won't instantiate.  
I tried to install tabulator globally (-g) and then locally, and also uninstalled the table-ui stock node - but still no go.  
I noticed that the tabulator installation under **dist** did not create a "node\_modules" directory - such directory (with tabulator in it) was actually created at one level higher. So I tried referencing the files as follows:

```auto
<link href="../node-modules/tabulator-tables/dist/css/tabulator_midnight.min.css" rel="stylesheet">
<script type="text/javascript" src="../node-modules/tabulator-tables/dist/js/tabulator.min.js"></script>

```

I even tried to manually copy the node\_modules directory to dist - but still no success.  
Am I doing something wrong?  
Below is the sample code I am using in the ui temple (which works perfectly with [Unpkg.com](http://Unpkg.com):

```auto
<div id="table1"></div>
<script>
var tabledata = [
 	{id:1, text:"text-1"},
 	{id:2, text:"text-2"},
];
var table = new Tabulator("#table1",
  {
 	height:205,
 	data:tabledata,
    columns: [
        {title:"ID", field:"id", hozAlign:"center", width:80},
    	{title:"Text", field:"text", hozAlign:"left", width:180}
    ]
  }
);
</script>

```

One more thing - for some reason, when I refresh the browser (F5) the table disappears (but when I go to another page and return, it reloads correctly. Have you ever encountered this?  
Thanks

---

<div class="post-metadata">

**Author:** ![madhouse](https://avatars.discourse-cdn.com/v4/letter/m/b77776/32.png) [@madhouse](https://discourse.nodered.org/u/madhouse)\
**Post date:** [13 June 2023 14:21 UTC](https://discourse.nodered.org/t/using-a-local-installation-of-tabulator-in-a-dashboard-template/79140/7 "2023-06-13T14:21:23Z")

</div>

> [@omrid](#):
>
> Regarding the local installation of tabulator, I'm still struggling.

Oops. That's my fault. It's been a while since I worked with Node-Red as I've since moved on to coding directly into Javascript for all my dashboard needs. Node-Red Dashboard has the unique requirement that everything resides in the ui web folder. So follow my directions as above and simply change your ui-template references to this:

```auto
<link href="ui/node-modules/tabulator-tables/dist/css/tabulator_midnight.min.css" rel="stylesheet">
<script type="text/javascript" src="ui/node-modules/tabulator-tables/dist/js/tabulator.min.js"></script>

```

That should give you what you're looking for. Anytime you reference a file in the dist directory, it will be through that ui web folder.

```auto
ui/some-image.png
ui/some_web_page.html
ui/pages/this_is_my_data.txt

```

Make sense?

---

<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 2023 17:39 UTC](https://discourse.nodered.org/t/using-a-local-installation-of-tabulator-in-a-dashboard-template/79140/8 "2023-06-13T17:39:23Z")

</div>

Thanks for the quick reply, Matt!

I finally figured it all out:

When installing Node-red's dashboard nodes, Node-red configures a web site which serves all the dashboard clients. The web site's home is referenced by "/ui", (i.e. **\<host\>:1880/ui** ).  
You can access a Node-red dashboard tab directly from a web browser using **#!/** followed by the tab's serial number (0 = first tab), e.g. **\<host\>:1880/ui/#!/2** will open the third tab in the dashboard menu.

The Web site's home directory maps to **\<Node-red home\>/node\_modules/node-red-dashboard/dist**. You can place web resources in this directory, and call them from a browser, e.g.

- **\<host\>:1880/ui/my\_page.html**
- **\<host\>:1880/ui/my\_image.png** etc.

However, when calling from within a dashboard **template** node, you don't need to specify the **/ui** prefix, and can load the resources from the home directory directly, e.g.:

```auto
  <img src="my_image.png" width="50" height="60">

```

Finally, with regards to **Tabulator** , it seems that the simplest & easiest way is to avoid the NPM installation altogether, and just do the following:

- Download the full Tabulator package from the Tabulator site ( **tabulator-master.zip** ), and extract it under the dashboard home directory **\<Node-red home\>/node\_modules/node-red-dashboard/dist**
- Include the following reference in your dashboard (with the css of your choice):

```auto
<link href="tabulator-master/dist/css/tabulator_midnight.min.css" rel="stylesheet">
<script type="text/javascript" src="tabulator-master/dist/js/tabulator.min.js"></script>

```

---

<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:** [13 July 2023 17:39 UTC](https://discourse.nodered.org/t/using-a-local-installation-of-tabulator-in-a-dashboard-template/79140/9 "2023-07-13T17:39:31Z")

</div>

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