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

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.
图片
As you can see above capture from my dashboard,my theme is blue but row is grey ,so it looks incongruous...... :wink:

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

You can custom your table styling with CSS parameters.

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

[
    {
        "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

1 Like

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

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

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

1 Like

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