TreeTableView with different size of nodes in javaFX

Question

I have a question based around TreeTableViews and its rows. I have created a treetableview of objects I named Component, and I have 3 classes of component, that I will name A, B, and C. In my project, B objects are contained on A, and C objects are contained on B objects. I was able to show the TreeTableView with those 3 levels of Components, but now I would like to add some CSS in this table to be able to have certain caracteristics:

-First of all i would like A objects' size to be bigger than B objects and same for C, for this T tried stuffs like this based on what I've seen on the internet:

.tree-table-cell {
     -fx-font-size: 11pt;
}

.tree-table-cell:sub-tree-item {
    -fx-font-size: 9pt;
}

But it seems like it's not working...

-Then I would like to be able to had like a separator between each A component, just for the visibility of the table

-And finally I would like the selected item and all his tree node (if C is selected it means, the C element + its parent B + its parent A) to be bold or something to identifiate it directly. For this I tried to apply some simple CSS on this class:

.tree-item:selected {
     -fx-font-weight: bold;
}

without any success...

In fact i'm not able to manipulate my TreeItems as i would like (adding some StyleSheets Class in TreeItem is not possible).

I hope i was enough clear. Thanks for your help

Answer 1

I have used TreeTableView and successfully applied styles based on different criteria. My approach was to apply styles to the TreeTableRow (but I think the cell would work too). The row is not easy to get a reference to (at least, I didn't see an easy way). One way I accessed it was to add a row factory. In the factory, I added my drag and drop handlers. However, for styling, I used custom cells (since I needed them for editing). In the updateItem method of those custom cells, I would get the row and modify the style. This was necessary because the rows are virtualized and reused. I found I had to check for "empty" rows during the updateItem call and remove the styling (which, in my case, included a red border for "invalid" items).

As for the pseudo classes in CSS, I'd recommend making sure you are using the right ones. If you are not using a built-in pseudo class, you'll have to make one in the code and then register it with the class you're trying to style. I found one website with some information, but if you search I'm sure there's more info out there.

I do not think the item itself supports styling (as you noted). I see that more as a model/data class (versus UI).