# Table with UI-SVG

**URL:** <https://discourse.nodered.org/t/table-with-ui-svg/24083>\
**Category:** Dashboard\
**Created:** [2 April 2020 10:06 UTC](https://discourse.nodered.org/t/table-with-ui-svg/24083 "2020-04-02T10:06:22Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![d0d04m3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/d0d04m3/32/19965_2.png) [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)\
**Post date:** [2 April 2020 10:06 UTC](https://discourse.nodered.org/t/table-with-ui-svg/24083/1 "2020-04-02T10:06:23Z")

</div>

hi I need insert table to dashboard in SVG-graphics node  
for show all event viewed in message field

 ![hmi5](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/1/71459f906aa163e61cbedba41fd2d65c6795cd9e.png)  
but i cant see any tools for than in SVG editor  
any id for that  
thx

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [2 April 2020 11:02 UTC](https://discourse.nodered.org/t/table-with-ui-svg/24083/2 "2020-04-02T11:02:25Z")

</div>

> [@d0d04m3](#):
>
> insert table to dashboard in SVG-graphics node

Hi, do you want to show a table INSIDE your SVG like this?

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/e/4ec8e418770718fb2949790e2e5d907cb458d220.png)

> [@d0d04m3](#):
>
> but i cant see any tools for than in SVG editor

Then you will have do draw rectangles with text inside, and update those text via messages?  
Or am I missing something perhaps?

---

<div class="post-metadata">

**Author:** ![d0d04m3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/d0d04m3/32/19965_2.png) [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)\
**Post date:** [2 April 2020 13:10 UTC](https://discourse.nodered.org/t/table-with-ui-svg/24083/3 "2020-04-02T13:10:41Z")

</div>

thx to reply  
I known this trick but problem for msg length and cell  
but i need more pro tool  
exp : lik this

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/2/22f18c60750a43c341b3c15b851e92a28c488085.png)

---

<div class="post-metadata">

**Author:** ![afelix](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/afelix/32/9743_2.png) [@afelix](https://discourse.nodered.org/u/afelix)\
**Post date:** [2 April 2020 13:17 UTC](https://discourse.nodered.org/t/table-with-ui-svg/24083/4 "2020-04-02T13:17:59Z")

</div>

The screenshot you post uses the ui-table node. Can’t you use that and add it as a separate widget to the dashboard?

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [2 April 2020 13:19 UTC](https://discourse.nodered.org/t/table-with-ui-svg/24083/5 "2020-04-02T13:19:35Z")

</div>

Overall the html can be embedded into svg by using foreginObject but if it is supported by node I don't know. Some browsers don't support this. So not widely used.

---

<div class="post-metadata">

**Author:** ![d0d04m3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/d0d04m3/32/19965_2.png) [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)\
**Post date:** [2 April 2020 13:47 UTC](https://discourse.nodered.org/t/table-with-ui-svg/24083/6 "2020-04-02T13:47:56Z")

</div>

OK thank to all  
if no way to embedded HTML to svg am changed to widget

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [2 April 2020 20:59 UTC](https://discourse.nodered.org/t/table-with-ui-svg/24083/7 "2020-04-02T20:59:10Z")

</div>

@d0d04m3,  
Just got a mail from the author of DrawSvg (which is the SVG editor that we have embedded into our node), that his new version offers tools to draw horizontal and vertical lines in an easy way. See a [showcase](https://www.drawsvg.org/drawsvg.html#showcase:draw-hz-lines) here (at the right bottom there is a "_play_" button). This way it might perhaps be easier for you to draw a table in SVG ...

---

<div class="post-metadata">

**Author:** ![d0d04m3](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/d0d04m3/32/19965_2.png) [@d0d04m3](https://discourse.nodered.org/u/d0d04m3)\
**Post date:** [2 April 2020 21:23 UTC](https://discourse.nodered.org/t/table-with-ui-svg/24083/8 "2020-04-02T21:23:55Z")

</div>

for horizontal and vertical line yes i known this am worked wit him today  
but if used to build my table not server me because  
recived msg its undefined length of size  
so overflowed

---

<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:** [2 May 2020 21:24 UTC](https://discourse.nodered.org/t/table-with-ui-svg/24083/9 "2020-05-02T21:24:02Z")

</div>

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