# Node-red-contrib-ui-svg create table by input message
**URL:** https://discourse.nodered.org/t/node-red-contrib-ui-svg-create-table-by-input-message/51004
**Category:** General
**Created:** [14 September 2021 10:04 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg-create-table-by-input-message/51004 "2021-09-14T10:04:29Z")
**Posts on this page:** 1
**Showing post:** 11
### Author:  [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)
#### Post date: [6 October 2021 21:39 UTC](https://discourse.nodered.org/t/node-red-contrib-ui-svg-create-table-by-input-message/51004/11 "2021-10-06T21:39:12Z")
@samuelbras,
I was wondering whether it would have been easier to add a HTML table as a _ **foreign element** _ inside the SVG drawing. So I am now talking about option 2 mentioned above.
Seemed tonight that this was _ **not** _ possible, because the `add_element` command only allowed to create SVG elements (which have their own namespace). I have added a _ **fix** _ on Github to allow non-SVG elements to be created, by adding a `foreignElement=true` to the input message. That allows to create standard HTML elements, like e.g. a `
` element for a table row.
The example flow contains [this](https://www.svgrepo.com/svg/134455/board) SVG drawing of a board, and I have added a standard HTML table as a foreign object to that SVG drawing:
```auto
```
Now we can add dynamically a table row, by injecting a message that creates a `tr` HTML element as a child of the table body (with id _"mytable"_). The table row (tr) contains two table cells (td):
```auto
{
"command": "add_element",
"elementType": "tr",
"textContent": "
Bathroom
22
",
"parentElementId": "mytable",
"foreignElement": true
}
```
Which results in this:
Here is the entire flow:
```auto
[{"id":"ac37cc973bbb46fe","type":"ui_svg_graphics","z":"3f01ab2a1bf97f25","group":"3ce32370.c60f1c","order":11,"width":"18","height":"10","svgString":"","clickableShapes":[],"javascriptHandlers":[],"smilAnimations":[],"bindings":[],"showCoordinates":false,"autoFormatAfterEdit":false,"showBrowserErrors":true,"showBrowserEvents":true,"enableJsDebugging":false,"sendMsgWhenLoaded":false,"noClickWhenDblClick":false,"outputField":"payload","editorUrl":"//drawsvg.org/drawsvg.html","directory":"","panning":"disabled","zooming":"disabled","panOnlyWhenZoomed":false,"doubleClickZoomEnabled":false,"mouseWheelZoomEnabled":false,"dblClickZoomPercentage":150,"name":"","x":660,"y":80,"wires":[[]]},{"id":"41fc31c058631fe9","type":"inject","z":"3f01ab2a1bf97f25","name":"Add table row","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"{\"command\":\"add_element\",\"elementType\":\"tr\",\"textContent\":\"
Bathroom
22
\",\"parentElementId\":\"mytable\",\"foreignElement\":true}","payloadType":"json","x":430,"y":80,"wires":[["ac37cc973bbb46fe"]]},{"id":"3ce32370.c60f1c","type":"ui_group","name":"Demo","tab":"d74bbed4.c2cfb","order":2,"disp":false,"width":"18","collapse":false},{"id":"d74bbed4.c2cfb","type":"ui_tab","name":"Demo","icon":"dashboard","order":1,"disabled":false,"hidden":false}]
```
Note that I quickly created this example flow, and I can improved a lot: scrollbars, fixed headers during scrolling, fixed number of visible rows ... So if anybody wants to improve the example flow and share it here, that would be nice!
P.S. The fix is not available on NPM yet. So if you want to test this, you need to install the fixed svg node directly from Github using this command (from within your .node-red folder):
```auto
npm install bartbutenaers/node-red-contrib-ui-svg
```
---
_[View the full topic](https://discourse.nodered.org/t/node-red-contrib-ui-svg-create-table-by-input-message/51004)._