Perspective: Set background colour of Table?

v8.1.0

How do I set the background / row colour of a Table?
I have a table that has a single column defined that uses a viewPath for display, and I don’t want a background (transparent).


I don’t want the white/light grey background colour behind each embedded view row
I’ve tried setting all the styles I can find, setting the backgroundColor style to transparent but no change…
For now I’ve set the cells.styles.backgroundColor to the same colour as the View that it’s embedded into. Not ideal though

Ignore the row height, that’s a separate issue.

While I’m here, can I change the row padding/margin that surrounds the embedded view rows? I haven’t set any up you can see that either side the embedded view bounds don’t line up with the heading bounds at the top. Again, i’ve changed all of the margin and padding in all the styles I could find…

@nminchin, those styles can’t be reached with the styling that we expose through component properties, but it’s still doable. You’ll need to get into custom theming for that level of control. These style overrides should get you there:

.ia_table .ia_table__cell .content {
    padding: 0px;
}

.ia_table_body {
    background-color: transparent;
}

.ia_table.ia_container--secondary {
    background-color: transparent;
}

Because these are the internals of the component, they are subject to change between releases (just the standard warning with custom theming).

1 Like

Where do these style overrides go? On the table component itself? Example would be great.

Well technically yes, but they're not applied via the designer, but through the theme css files. You could simply add these to the variable.css from the theme you're using e.g. Light, but these get overwritten on igntion install. The proper way, as Josh said, is to create a new custom theme which is fairly easy to do. Have a read of the readme.md within the igntion theme directory.

Windows theme path:
c:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\themes

Appreciate the input Nick. I’ll try it out.