# CSS Styling in Dashboard 2.0: Table Node

**URL:** <https://discourse.nodered.org/t/css-styling-in-dashboard-2-0-table-node/99899>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [9 December 2025 09:43 UTC](https://discourse.nodered.org/t/css-styling-in-dashboard-2-0-table-node/99899 "2025-12-09T09:43:27Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [9 December 2025 09:43 UTC](https://discourse.nodered.org/t/css-styling-in-dashboard-2-0-table-node/99899/1 "2025-12-09T09:43:27Z")

</div>

**Nostalgic for Dashboard 1.0, I'd like to recreate the look of a table in Dashboard 2.0.**

To start, I'd like the rows to change color depending on whether the rows change color to even or odd.

_To begin:_  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/d/6d94e94161f58bff63d2fdf6124c578d412b9208.png)

_I added a Template Node "CSS" to my Flow:_

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/7/97c748daedda08c356571070eb912965e558252a.png)

_And a table :_

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

_I applied a dark theme:_

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/6/a644b1aee6c29f436d9fc73bf957583a2fa0eccc.png)

_And the result isn't like the old DASHBOARD 1.0_

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/c/4ceacc7430715d24f24bbc9c96c201410099659c.png)  
My rows are all black.

Is there anything I've forgotten?

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [9 December 2025 10:01 UTC](https://discourse.nodered.org/t/css-styling-in-dashboard-2-0-table-node/99899/2 "2025-12-09T10:01:46Z")

</div>

Take out the `<style> </style>` lines from the template node. You just need the raw CSS. I don't know if that is the problem though.

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [9 December 2025 10:20 UTC](https://discourse.nodered.org/t/css-styling-in-dashboard-2-0-table-node/99899/3 "2025-12-09T10:20:44Z")

</div>

> [@Colin](#):
>
> Retirez les lignes du nœud modèle. Il suffit de prendre le CSS brut. Je ne sais pas si c’est ça le problème.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/a/8a4b6d1414f7d64af35088f0c88fb7d14e7efbad.png)  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/4/4478d9abc9bd6fdec64c13d42274a8d92fe09cbb.png)

I removed the `<style>` tags and nothing else changed except that I can see my code in the Group.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [9 December 2025 10:33 UTC](https://discourse.nodered.org/t/css-styling-in-dashboard-2-0-table-node/99899/4 "2025-12-09T10:33:55Z")

</div>

Export the table node, the css template and an inject node to feed data to the table and paste the flow here.

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [9 December 2025 11:00 UTC](https://discourse.nodered.org/t/css-styling-in-dashboard-2-0-table-node/99899/5 "2025-12-09T11:00:13Z")

</div>

This is the flow with inject :

```auto
[{"id":"9c3c92985184e811","type":"inject","z":"707595eff9a54cc2","name":"","props":[{"p":"payload"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"[{\"channel\":89,\"name\":\"hoursCell89\",\"description\":\"Heures Cellule (totale)\",\"value\":5836,\"unit\":\"h\",\"type\":\"mesure\",\"category\":\"production\",\"raw\":5836},{\"channel\":16,\"name\":\"voltCell16\",\"description\":\"Tension Cellule\",\"value\":-21,\"unit\":\"V\",\"type\":\"mesure\",\"category\":\"production\",\"raw\":722},{\"channel\":17,\"name\":\"ampCell17\",\"description\":\"Courant Cellule\",\"value\":-3.5,\"unit\":\"A\",\"type\":\"mesure\",\"category\":\"production\",\"raw\":547},{\"channel\":25,\"name\":\"tempTDS25\",\"description\":\"Température TDS\",\"value\":29.9,\"unit\":\"°C\",\"type\":\"mesure\",\"category\":\"temperature\",\"raw\":299},{\"channel\":33,\"name\":\"red33\",\"description\":\"Mesure Sonde Redox\",\"value\":561,\"unit\":\"mV\",\"type\":\"mesure\",\"category\":\"redox\",\"raw\":561}]","payloadType":"json","x":1500,"y":2340,"wires":[["651f5a8e5d7a8225"]]},{"id":"651f5a8e5d7a8225","type":"ui-table","z":"707595eff9a54cc2","group":"85392caa4e7f203f","name":"","label":"sigfoxTable","order":4,"width":0,"height":0,"maxrows":0,"passthru":false,"autocols":false,"showSearch":false,"deselect":false,"selectionType":"none","columns":[{"title":"channel","key":"channel","keyType":"key","type":"text","width":"10","align":"start"},{"title":"name","key":"name","keyType":"key","type":"text","width":"10","align":"start"},{"title":"description","key":"description","keyType":"key","type":"text","width":"10","align":"start"},{"title":"value","key":"value","keyType":"key","type":"text","width":"10","align":"start"},{"title":"unit","key":"unit","keyType":"key","type":"text","width":"10","align":"start"},{"title":"type","key":"type","keyType":"key","type":"text","width":"10","align":"start"},{"title":"category","key":"category","keyType":"key","type":"text","width":"10","align":"start"},{"title":"raw","key":"raw","keyType":"key","type":"text","width":"10","align":"start"}],"mobileBreakpoint":"sm","mobileBreakpointType":"defaults","action":"replace","className":"","x":1750,"y":2340,"wires":[[]]},{"id":"35d4a8e37c4f34a7","type":"ui-template","z":"707595eff9a54cc2","group":"","page":"d86f49ea355a8b97","ui":"","name":"CSS","order":4,"width":0,"height":0,"head":"","format":"\n/*==================== TABLE ==============*/\n\n.custom-table tbody tr:nth-child(odd) {\n background-color: #444444;\n}\n\n.custom-table tbody tr:nth-child(even) {\n background-color: #666666;\n}\n\n","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"widget:page","className":"","x":1730,"y":2380,"wires":[[]]},{"id":"85392caa4e7f203f","type":"ui-group","name":"DECODE trame","page":"d86f49ea355a8b97","width":6,"height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"d86f49ea355a8b97","type":"ui-page","name":"MODUL Local","ui":"0c190d7ab5bc3c4b","path":"/page1","icon":"home","layout":"grid","theme":"8b4760c21512dfc2","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":"true","disabled":"false"},{"id":"0c190d7ab5bc3c4b","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true,"allowInstall":true},{"id":"8b4760c21512dfc2","type":"ui-theme","name":"DARK Theme","colors":{"surface":"#097479","primary":"#097479","bgPage":"#323232","groupBg":"#323232","groupOutline":"#7b9393"},"sizes":{"density":"compact","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"a85eeba67ad56603","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.29.0"}}]

```

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [9 December 2025 11:18 UTC](https://discourse.nodered.org/t/css-styling-in-dashboard-2-0-table-node/99899/6 "2025-12-09T11:18:06Z")

</div>

The first problem is that you have not set the template to Type CSS.  
The second is that you have not specified the class custom-table on the table node.

That is as far as I have got so far, it may need someone with more CSS experience to take it from here.

Experiment with the CSS with more simple selectors and get that working first.

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [9 December 2025 12:05 UTC](https://discourse.nodered.org/t/css-styling-in-dashboard-2-0-table-node/99899/7 "2025-12-09T12:05:33Z")

</div>

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

I tried applying the custom-table class in the Table node parameters, but when I click Done, it doesn't save: I can't deploy the change !?

BUT

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/4/6464316bd99fc4e91ae03b1d4a4f82c321b0a450.png)  
I added the class to the "DECODE Trame" group on the "MODUL Local" page and now it works!

So the Class should not be applied to the Widget but to the Group... how then can a Class be applied only to the Widget? Since it has this property.

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [9 December 2025 12:14 UTC](https://discourse.nodered.org/t/css-styling-in-dashboard-2-0-table-node/99899/8 "2025-12-09T12:14:35Z")

</div>

> [@SuperNinja](#):
>
> but when I click Done, it doesn't save: I can't deploy the change !?

You are right, there seems to be a bug in the table node. The class has disappeared again if the table node is re-opened. Please [submit a bug report](https://github.com/FlowFuse/node-red-dashboard/issues).

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [9 December 2025 13:24 UTC](https://discourse.nodered.org/t/css-styling-in-dashboard-2-0-table-node/99899/9 "2025-12-09T13:24:51Z")

</div>

Does it work if you send in a message with `msg.class` set to 'custom-table`?

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [9 December 2025 13:42 UTC](https://discourse.nodered.org/t/css-styling-in-dashboard-2-0-table-node/99899/10 "2025-12-09T13:42:42Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/2/b2a5cb24367c4494ba2440d4caea9fc1bc5a4f62.png)  
The two tables are identical. I inject `msg.class="custom-table"` into the second table, and it correctly applies the CSS.  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/5/35cc846c0a7fa75dfe5357f290ef00e13f07e682.png)  
Note: I removed the `custom-table` class from the `Class` property of the group.  
The `<style>` tags must be kept in the CSS template.  
The flow:

```auto
[{"id":"86b8d9a5861f5570","type":"inject","z":"707595eff9a54cc2","name":"msg.class=\"custom-table\"","props":[{"p":"class","v":"custom-table","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","x":1530,"y":2470,"wires":[["81e53ad3f5387b6e"]]},{"id":"81e53ad3f5387b6e","type":"ui-table","z":"707595eff9a54cc2","group":"85392caa4e7f203f","name":"","label":"sigfoxTable 2","order":6,"width":0,"height":0,"maxrows":0,"passthru":false,"autocols":true,"showSearch":false,"deselect":false,"selectionType":"none","columns":[],"mobileBreakpoint":"sm","mobileBreakpointType":"defaults","action":"replace","className":"","x":1730,"y":2470,"wires":[[]]},{"id":"35d4a8e37c4f34a7","type":"ui-template","z":"707595eff9a54cc2","group":"","page":"d86f49ea355a8b97","ui":"","name":"CSS","order":5,"width":0,"height":0,"head":"","format":"<style>\n /*==================== TABLE ==============*/\n .custom-table thead {\n background-color: #708090;\n border-collapse: collapse;\n border: 1px solid green;\n }\n\n .custom-table thead tr:{\n\n border: 1px solid green;\n }\n\n\n .custom-table tbody tr:nth-child(odd) {\n background-color: #444444;\n }\n\n .custom-table tbody tr:nth-child(even) {\n background-color: #666666;\n }\n</style>","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"widget:page","className":"","x":1720,"y":2430,"wires":[[]]},{"id":"85392caa4e7f203f","type":"ui-group","name":"DECODE trame","page":"d86f49ea355a8b97","width":6,"height":1,"order":1,"showTitle":true,"className":"","visible":"true","disabled":"false","groupType":"default"},{"id":"d86f49ea355a8b97","type":"ui-page","name":"MODUL Local","ui":"0c190d7ab5bc3c4b","path":"/page1","icon":"home","layout":"grid","theme":"8b4760c21512dfc2","breakpoints":[{"name":"Default","px":"0","cols":"3"},{"name":"Tablet","px":"576","cols":"6"},{"name":"Small Desktop","px":"768","cols":"9"},{"name":"Desktop","px":"1024","cols":"12"}],"order":1,"className":"","visible":true,"disabled":false},{"id":"0c190d7ab5bc3c4b","type":"ui-base","name":"My Dashboard","path":"/dashboard","appIcon":"","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false,"headerContent":"page","navigationStyle":"default","titleBarStyle":"default","showReconnectNotification":true,"notificationDisplayTime":1,"showDisconnectNotification":true,"allowInstall":true},{"id":"8b4760c21512dfc2","type":"ui-theme","name":"DARK Theme","colors":{"surface":"#097479","primary":"#097479","bgPage":"#323232","groupBg":"#323232","groupOutline":"#7b9393"},"sizes":{"density":"compact","pagePadding":"12px","groupGap":"12px","groupBorderRadius":"4px","widgetGap":"12px"}},{"id":"a631751f0266a432","type":"global-config","env":[],"modules":{"@flowfuse/node-red-dashboard":"1.29.0"}}]

```

---

<div class="post-metadata">

**Author:** ![Colin](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/colin/32/17040_2.png) [@Colin](https://discourse.nodered.org/u/Colin)\
**Post date:** [9 December 2025 13:54 UTC](https://discourse.nodered.org/t/css-styling-in-dashboard-2-0-table-node/99899/11 "2025-12-09T13:54:51Z")

</div>

Good, so there is no fundamental problem with class name in the table node, it is just that it is not saved in the config. At least you have a good workaround now until it is fixed.

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [9 December 2025 23:12 UTC](https://discourse.nodered.org/t/css-styling-in-dashboard-2-0-table-node/99899/12 "2025-12-09T23:12:57Z")

</div>

The table node in dashboard-1 is based on the `Tabulator` package, whereas the native table node of dashboard-2 is based on the `v-table` Vuetify class.  
If you are nostalgic for the d-1 table, you can try `@omrid01/node-red-dashboard-2-table-tabulator`, which is based on the latest Tabulator version, and also offers a quantum leap of additional new functionality.

---

<div class="post-metadata">

**Author:** ![SuperNinja](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/superninja/32/5761_2.png) [@SuperNinja](https://discourse.nodered.org/u/SuperNinja)\
**Post date:** [11 December 2025 13:02 UTC](https://discourse.nodered.org/t/css-styling-in-dashboard-2-0-table-node/99899/13 "2025-12-11T13:02:32Z")

</div>

> [@omrid](#):
>
> node-red-dashboard-2-table-tabulator

NICE ! i like it ! it's like "table dashboard 1.0":

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

---

<div class="post-metadata">

**Author:** ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)\
**Post date:** [11 December 2025 13:09 UTC](https://discourse.nodered.org/t/css-styling-in-dashboard-2-0-table-node/99899/14 "2025-12-11T13:09:34Z")

</div>

> [@SuperNinja](#):
>
> NICE ! i like it ! it's like "table dashboard 1.0":

Glad you like it.  
If you read the online help, you can see it gives way way more than in d-1. E.g. custom functions (for dynamic formatters, filters, sorters etc.) event notifications, styling, shared & multi-user modes, cahed image and much more.

---

<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:** [25 December 2025 13:09 UTC](https://discourse.nodered.org/t/css-styling-in-dashboard-2-0-table-node/99899/15 "2025-12-25T13:09:53Z")

</div>

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