Perspective Table Class Styling Order
B
Brandon Peterson
Style classes don't respect the implied hierarchy of the structure of the table to which they're applied.
In my particular case, the columns[n].style.classes styles override the columns[n].footer.style.classes styles. I don't think this should be the desired behavior.
The hierarchy implied in the table component styles is not preserved in the style.css document. Therefore, any conflicting styles applied to an element in the table will be resolved based on the order of definition of the style classes, completely ignoring the hierarchy in the Ignition Designer.
Because the class "table-header" is defined before "table-number", the styles in "table-header" get overridden by the styles in "table-number".
My suggestion is to revamp the way styles are applied to elements (like those of the table component) with cascading styles.
Log In
B
Brandon Peterson
I'm not sure what the most performant way to do this would be, but here's my attempt at how to add (copy) class styles to specific elements in the table HTML tree:
## HTML Elements to Style:
table
--->body
--->--->emptyMessage
--->--->row
--->--->--->cell
--->header
--->headerGroup
--->footer
--->footerGroup
--->pager
--->filter
## Expected Styling Cascade (myTable.props.*):
style
--->
table
--->filter.style
--->--->
filter
--->headerStyle
--->--->columns[n].style
--->--->--->columns[n].header.style
--->--->--->--->
header
--->headerGroupStyle
--->--->headerGroups[n][m].style
--->--->--->
headerGroup
--->footerStyle
--->--->columns[n].style
--->--->--->columns[n].footer.style
--->--->--->--->
footer
--->footerGroupStyle
--->--->footerGroups[n][m].style
--->--->--->
footerGroup
--->bodyStyle
--->--->
body
--->--->pager.style
--->--->--->
pager
--->--->emptyMessage.style
--->--->--->
emptyMessage
--->--->rows.style
--->--->--->
row
--->--->--->cells.style
--->--->--->--->columns[n].style
--->--->--->--->--->
--->--->--->--->--->--->data[n][m].style
--->--->--->--->--->--->--->
cell
### New Custom Classes:
.table-column-n
.table-header-group-n-m
.table-footer-group-n-m
## CSS:
```css
table#myTableUUID { style }
table#myTableUUID > filter { filter.style }
table#myTableUUID > pager { pager.style }
table#myTableUUID > body { bodyStyle }
table#myTableUUID > body > emptyMessage { emptyMessage.style }
table#myTableUUID > body > header { headerStyle }
table#myTableUUID > body > header.table-column-n { columns[n].style }
table#myTableUUID > body > header.table-column-n { columns[n].header.style }
table#myTableUUID > body > headerGroup { headerGroupStyle }
table#myTableUUID > body > headerGroup.table-header-group-n-m { headerGroups[n][m].style }
table#myTableUUID > body > footer { footerStyle }
table#myTableUUID > body > footer.table-column-n { columns[n].style }
table#myTableUUID > body > footer.table-column-n { columns[n].footer.style }
table#myTableUUID > body > footerGroup { footerGroupStyle }
table#myTableUUID > body > footerGroup.table-footer-group-n-m { footerGroups[n][m].style }
table#myTableUUID > body > row { rows.style }
table#myTableUUID > body > row > cell { cells.style }
table#myTableUUID > body > row > cell.table-column-n { columns[n].style }
table#myTableUUID > body > row > cell.selected { selection.style }
cell { data[n][m].style } /
inline style
/```