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

[muzi]

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......

[zenofmud]

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

[aitor]

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

[muzi]

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

[muzi]

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

[muzi]

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