Styling TreeGrid hierarchy column

Flow
1

Is there some way of styling a hierarchy column? If I do something like

addHierarchyColumn(TheNode::getName);

I get the hierarchy but can’t add styles(?)

and If I do

		addColumn(new ComponentRenderer<>(...));

I can’t use setHierarchyColumn(String);

I also tried reverse-engineering addHierarchyColumn like

        Column<TheNode> column = addColumn(TemplateRenderer
                .<TheNode> of("<vaadin-grid-tree-toggle "
                        + "leaf='[[item.leaf]
]' expanded='{{expanded}}' type='[[item.type]
]' level='[[level]
]'>[[item.name]
]"
                        + "</vaadin-grid-tree-toggle>")
                .withProperty("type", item -> item.getType())
                .withProperty("leaf",
                        item -> !getDataCommunicator().hasChildren(item))
                .withProperty("name",
                        value -> value.getName()));

but the type never shows up in the DOM

2

If you use css, the web component as you have found is vaadin-grid-tree-toggle. So you need to have theme module like

@CssImport(value=“treegrid.css” themeFor=“vaadin-grid-tree-toggle”)

And in treegrid.css you can target the styles to part “toggle” if you want to style the toggle icon, and the text is in the slot.

3

Actually, I’m not using web components, just trying to copy the code that is in addHierarchyColumn and modify that but I can’t make any changes appear in the DOM

4

Tatu Lund:
If you use css, the web component as you have found is vaadin-grid-tree-toggle. So you need to have theme module like

@CssImport(value=“treegrid.css” themeFor=“vaadin-grid-tree-toggle”)

And in treegrid.css you can target the styles to part “toggle” if you want to style the toggle icon, and the text is in the slot.

Where can I find any working example of this? Thanks