Primefaces Tree Table highlight child rows

Question

I want to highlight child rows in different color using CSS to differentiate parent/child rows.

Answer 1

When you use your browser's DOM inspector, you'll notice that table rows (tr) of a p:treeTable are classed with ui-node-level-n. N is the level, starting at 1. So root items are level 1, children of level 1 are level 2 and so on. To have white root nodes and yellow child nodes, you can use the following CSS rules:

html body .ui-treetable .ui-treetable-data>tr {
    background: yellow;
}
body .ui-treetable .ui-treetable-data>tr.ui-node-level-1 {
    background: white;
}

See also:

• How do I override default PrimeFaces CSS with custom styles?