Primefaces Tree Table highlight child rows

Question

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

See https://stackoverflow.com/questions/8768317/how-do-i-override-default-primefaces-css-with-custom-styles — Jasper de Vries, May 20 '22 at 07:51
Sorry this link doesn't have solution for my question. I am unable to highlight child rows in different color with CSS. — PriyaN, May 20 '22 at 20:13

score 1 · Answer 1 · answered May 21 '22 at 11:01

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?

answered May 21 '22 at 11:01

Jasper de Vries

19,370
6
64
102

Thank you so much , but parent row color overrides child row color. Basically both parent and child rows are highlighted in yellow. – PriyaN May 21 '22 at 15:24
Nope. I've tested this with the showcase and verified that it is working. – Jasper de Vries May 21 '22 at 16:03

Primefaces Tree Table highlight child rows

1 Answers1