Using a local installation of Tabulator in a dashboard template

Dashboard
1

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:

<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. Any advice on how to install tabulator locally, and set the reference to this local installation?
Thanks

2

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

3

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?

4

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

    //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/"}, 
    //],
5

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.

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:

<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.

1 Like
6

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:

<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:

<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

7

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:

<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.

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

Make sense?

8

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.:

  <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):
<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>
9

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