'Primefaces Tree Table highlight child rows

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

cssprimefacestreetable


Solution 1:[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:

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jasper de Vries

Related Questions