Node-red-contrib-ui-svg create table by input message

Good Morning.
I need to organize the goals in a table, and mark goals made and goals left to do.
Is there any way to create a table with the goals, without being everything manually?


I get the task by input. Is there any way to put them in an automatically generated table?

Ui-Table is certainly the first you should take a look at

but I need to integrate it inside the Node-red-contrib-ui-svg dashbord

SVG doesn't have a table type.

Read this thread to understand your options....

"Create a table in SVG - Stack Overflow" javascript - Create a table in SVG - Stack Overflow

Have you installed the core dashboard nodes (node-red-dashboard)?

Hi @samuelbras,
So I assume this table is surrounded by other shapes, and is part of a big drawing? Does it contain a lot rows? Because I am not sure how it will behave/look like when you have a larger table, that doesn't fit on the screen (and scrollbars are needed).

I don't think there is anything automatic available in SVG to accomplish this. Some ideas:

  1. The most automatic pure SVG way of working, seems to me that you apply a fill pattern on a shape. Like a grid, but with larger cells. Then you have your lines already out of the box, but of course you still need to position your texts at the correct coordinates. But absolutely not sure whether this is a good way to go...

  2. As @Steve-Mcl already explained, you can embed a standard html table inside an SVG drawing. The values of that foreign table element can be filled via an input msg (see here). And here you can find some of my experiments with foreign objects in the SVG node, although I have never used a table as foreign object myself ...

  3. And if you want to do it in pure SVG, you can also write some Javascript to calculate all the shapes to draw a table. But seems a lot of work to me. If you want to go that way, you might find some examples on the web to get you started (e.g. here).

So I think you first need to decide which way you want to go. Personally I think the html table inside the foreign object might be most automatic way of working. Because the html table component will do a lot of the work for you.

We don't know how the entire SVG drawing will look like, or how the table will be part of it (e.g. scrollbar when the table grows). So I'm afraid you are the only that can determine which will be the best way to go...


Hi @BartButenaers

Yes, the table is integrated in a SVG Group inside a whole SVG.

For the scrollbars I have found a peace of code that add scrollbar in svg.
Now, for this propose I have made in pure SVG by input message. I have some work but I think that is solved for now.

thank you all for the support

Best regards

Samuel Brás

Hi @samuelbras,
You are welcome! Nice to hear that you are managing to get it solved.

If you should afterwards have a small (simplified) example flow to demonstrate it, it would be nice if you would like to share it with us. Only a simple small table that you can update via a simple input message.
To be honest, I am very curious now how something like that would look like.
Never seen something like that before ...