# How can I change ui-table's row of color?

**URL:** <https://discourse.nodered.org/t/how-can-i-change-ui-tables-row-of-color/66059>\
**Category:** Dashboard\
**Created:** [5 August 2022 09:30 UTC](https://discourse.nodered.org/t/how-can-i-change-ui-tables-row-of-color/66059 "2022-08-05T09:30:47Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![muzi](https://avatars.discourse-cdn.com/v4/letter/m/49beb7/32.png) [@muzi](https://discourse.nodered.org/u/muzi)\
**Post date:** [5 August 2022 09:30 UTC](https://discourse.nodered.org/t/how-can-i-change-ui-tables-row-of-color/66059/1 "2022-08-05T09:30:47Z")

</div>

Hello everyone,  
I am a newer of Node red and I want to change the ui table color of every row or background of rows?How can i do this ? I use node red version is the newest one (V3.0.1) and ui-table node version is 0.3.12.  
 ![图片](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/b/ebb36b9825a03c3f3760122c7ad1fce7e35c633e.png)  
As you can see above capture from my dashboard,my theme is blue but row is grey ,so it looks incongruous...... 😉

---

<div class="post-metadata">

**Author:** ![zenofmud](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/zenofmud/32/316_2.png) [@zenofmud](https://discourse.nodered.org/u/zenofmud)\
**Post date:** [5 August 2022 09:44 UTC](https://discourse.nodered.org/t/how-can-i-change-ui-tables-row-of-color/66059/2 "2022-08-05T09:44:29Z")

</div>

Did you read thru the 'Details' section of `Help` tab for the node?

 ![Screen Shot 2022-08-05 at 5.42.44 AM](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/d/6d52c7fe1f7b7026b0a246f41c159251c84db4a3.png)

---

<div class="post-metadata">

**Author:** ![aitor](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/aitor/32/97363_2.png) [@aitor](https://discourse.nodered.org/u/aitor)\
**Post date:** [5 August 2022 10:52 UTC](https://discourse.nodered.org/t/how-can-i-change-ui-tables-row-of-color/66059/3 "2022-08-05T10:52:15Z")

</div>

You can custom your table styling with CSS parameters.

Here is an simple example of how to do it.:

```auto
[
    {
        "id": "441137ead67cd1e8",
        "type": "ui_template",
        "z": "389fd0b343f8dded",
        "group": "cc8c1cdb.de0b2",
        "name": "CSS",
        "order": 1,
        "width": 0,
        "height": 0,
        "format": "<style>\n\n.tabulator-table {\n background: transparent !important;*/\n font-size: 28px !important;\n}\n.tabulator-row .tabulator-cell{\n border-right: 1px solid #8880 !important;\n}\n.tabulator-row{\n font-size: 28px !important;\n background-color: #713b3b !important;\n}\n.tabulator-row:nth-child(2n){\n font-size: 28px !important;\n background-color: #8e000000 !important;\n}\n\n.tabulator-header{\n border-bottom: 2px solid #dd0000 !important;\n font-size: 46px !important;\n}\n\n.nr-dashboard-ui_table{\n background-color: transparent !important;\n font-size: 36px !important;\n}\n\n</style>\n",
        "storeOutMessages": true,
        "fwdInMessages": true,
        "resendOnRefresh": false,
        "templateScope": "global",
        "className": "",
        "x": 978,
        "y": 104,
        "wires": [
            []
        ]
    },
    {
        "id": "cc8c1cdb.de0b2",
        "type": "ui_group",
        "name": "CSSConfig",
        "tab": "ef82ea1a.e28be8",
        "order": 2,
        "disp": false,
        "width": "1",
        "collapse": false,
        "className": ""
    },
    {
        "id": "ef82ea1a.e28be8",
        "type": "ui_tab",
        "name": "CSS",
        "icon": "dashboard",
        "order": 23,
        "disabled": false,
        "hidden": true
    }
]

```

There may be further options so check tabulator's documentation for extended info: [Tabulator](http://tabulator.info/docs/4.4/theme)

---

<div class="post-metadata">

**Author:** ![muzi](https://avatars.discourse-cdn.com/v4/letter/m/49beb7/32.png) [@muzi](https://discourse.nodered.org/u/muzi)\
**Post date:** [5 August 2022 13:45 UTC](https://discourse.nodered.org/t/how-can-i-change-ui-tables-row-of-color/66059/4 "2022-08-05T13:45:18Z")

</div>

yeah,I read it and did't find what i want info . 😭,but I think @aitor give me right direction.

---

<div class="post-metadata">

**Author:** ![muzi](https://avatars.discourse-cdn.com/v4/letter/m/49beb7/32.png) [@muzi](https://discourse.nodered.org/u/muzi)\
**Post date:** [5 August 2022 13:47 UTC](https://discourse.nodered.org/t/how-can-i-change-ui-tables-row-of-color/66059/5 "2022-08-05T13:47:01Z")

</div>

haha,thx for your help and give me info and i will continue to deeply learn Tabulator you mentioned. 😉

---

<div class="post-metadata">

**Author:** ![muzi](https://avatars.discourse-cdn.com/v4/letter/m/49beb7/32.png) [@muzi](https://discourse.nodered.org/u/muzi)\
**Post date:** [7 August 2022 11:31 UTC](https://discourse.nodered.org/t/how-can-i-change-ui-tables-row-of-color/66059/6 "2022-08-07T11:31:37Z")

</div>

Thanks for aitor's help,dashboard now seems to be coordinate.

 ![图片](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/7/371acd66c204792429eb6aa0a73fdaea18e23130.png)

---

<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:** [21 August 2022 11:31 UTC](https://discourse.nodered.org/t/how-can-i-change-ui-tables-row-of-color/66059/7 "2022-08-21T11:31:54Z")

</div>

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