Using Tabulator grids in Dashboard v2.0 templates

Put some time into my diary and we can screenshare to a solution: Calendly - Joe Pavitt

I'll then be sure to update the thread here with the answer.

1 Like

The last thing I will quickly ask for in advance is to check the Network tab of your browser, take a look at the js files being loaded and see if you're ui-tabulator.umd.js file is there when you load a page in the Dashboard with your widget on it, e.g.

Screenshot 2024-03-21 at 14.00.01

If it's not, then that tells me the problem is with Dashboard not recognising the config/definition in the package.json properly. Worth searching your component's folder for any signs of example and making sure they've all been replaced.

Indeed, the umd file was not received by the dashboard. I searched again and could not find any traces of "example".
I'm working locally. Could it be that it is looking for something in Git?
Below is the package.json file:

{
    "name": "node-red-contrib-tabulator",
    "version": "0.1.0",
    "description": "Wrapper for Tabulator-tables package, for Node-RED Dashboard 2.0",
    "keywords": [
        "node-red",
        "node-red-dashboard-2",
        "tabulator"
    ],
    "repository": {
        "type": "git",
        "url": "https://github.com/flowforge/node-red-dashboard-3rd-party.git"
    },
    "license": "Apache-2.0",
    "author": {
        "name": "Omri Dayan",
        "url": "https://github.com/omrid01"
    },
    "contributors": [
        {
            "name": "Joe Pavitt",
            "url": "https://github.com/joepavitt"
        }
    ],
    "exports": {
        "import": "./resources/ui-tabulator.esm.js",
        "require": "./resources/ui-tabulator.umd.js"
    },
    "files": [
        "dist/*",
        "nodes/*",
        "ui/*",
        "resources/*"
    ],
    "scripts": {
        "build": "vite build",
        "build:dev": "NODE_ENV=development vite build",
        "dev": "NODE_ENV=development vite build --watch",
        "dev:prod": "vite build --watch",
        "lint": "npm run lint:js && npm run lint:package",
        "lint:fix": "npm run lint:js:fix && npm run lint:package:fix",
        "lint:js": "eslint --ext .js,.vue,.cjs,.mjs .",
        "lint:js:fix": "yarn lint:js --fix",
        "lint:package": "sort-package-json --check 'package.json'",
        "lint:package:fix": "sort-package-json 'package.json'"
    },
    "dependencies": {
        "tabulator-tables": "^6.0.0",
        "vue": "^3.3.8",
        "vuex": "^4.1.0"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^4.5.0",
        "eslint": "^8.53.0",
        "eslint-config-standard": "^17.1.0",
        "eslint-plugin-import": "^2.29.0",
        "eslint-plugin-n": "^16.3.1",
        "eslint-plugin-vue": "^9.18.1",
        "vite": "^5.0.12",
        "vite-plugin-css-injected-by-js": "^3.3.0"
    },
    "engines": {
        "node": ">=18"
    },
    "node-red": {
        "version": ">=3.0.0",
        "nodes": {
            "ui-tabulator": "nodes/ui-tabulator.js"
        }
    },
    "node-red-dashboard-2": {
        "version": "1.0.0",
        "widgets": {
            "ui-tabulator": {
                "output": "ui-tabulator.umd.js",
                "component": "UITabulator"
            }
        }
    }
}

Hi Omrid, dont think I have skills to help, but definitely interested in testing your custom tabulator node.

I use tabulator quite a lot already in DB 1, and your node would be a good trigger to try moving some of the flows to DB2.

Cheers

Jerome

1 Like

Fix was linked to the name in the package.json.

For Dashboard 2.0 nodes, we filter by the name of the package, and need to see node-red-dashboard-2-<widget-name>. Also helps users differentiate when they'll be installing by the Node-RED Palette Manager.

1 Like

OK, so with the help of @joepavitt (Thanks Joe!) the issue was resolved.
The name of 3-rd party dashboard-2 nodes (published in the node's package.json must start with:
node-red-dashboard-2-
In this case:

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