Grid header styling

Flow
1

Hello folks,

I would ask you for help with grid’s header styling. We want to render header label as vertical for several columns in grid but vaadin 14 grid doesn’t support header styling by columns. When I have used component for grid with Html component which contains div with proper style (style=“text-orientation: mixed;writing-mode: vertical-rl;”), I can’t to see sort mark even if I set column to sortable. Can you help me please? I think that best solution should be to style header without add header content as component, but I don’t know how to do it.

Thanks

2

Hi Lubo, you could try using a style module for this https://vaadin.com/docs/v14/flow/theme/theming-crash-course.html

If you only want to target the sorters:
@CssImport(value = "./styles/my-grid-sorter-styles.css", themeFor="vaadin-grid-sorter")
with something like:

[part~="content"]
 {
  text-orientation: mixed;
  writing-mode: vertical-rl;
  overflow: visible;
}

as the content

or if you need to target all the cells in the grid header:
@CssImport(value = "./styles/my-grid-styles.css", themeFor="vaadin-grid")
with:

[part~="header-cell"]
 {
  text-orientation: mixed;
  writing-mode: vertical-rl;	
}
3

Thank you for answer. My problem is that not all headers are going to be sortable and not all headers are going to be with vertical text. I don’t think so that I can use any CSS selector for style it. Or is it possible to add some style class to header of some column? Something like classNameGenerator from column but for header? Thank you

4

Unfortunately the class name generators can’t be used for header cells: https://github.com/vaadin/vaadin-grid/issues/1623

This is a tricky use case…maybe you could try a template renderer (for a normal column) that that adds a <vaadin-grid-sorter style="writing-mode: vertical-rl" path="..." direction="..." > for the columns that should have vertical headers and sorting

5

Sorry but I’m not so experienced in vaadin. Can you please describe your solution more deeper or provide some more detailed example?

Now it seems to be a little bit buggy. Why I can’t to sort when I use component in grid header? Or even better why haven’t you fixed issue 1623 yet?

6

Ah, using template renderer for the header seems to be protected to it’s not an option, but the following works for me at least:

@Route("")
@PWA(name = "Project Base for Vaadin", shortName = "Project Base")
public class MainView extends VerticalLayout {

    public MainView() {
        Grid<Component> grid = new Grid<>(Component.class);
        TextField tf = new TextField();
		tf.setVisible(false);
        Button b = new Button();
        grid.setItems(b, tf);
        grid.getColumnByKey("visible").setHeader(new Html("<div style='text-orientation: mixed;writing-mode: vertical-rl;'>Visible</div>"));
        add(grid);
    }
}
7

It’s seems OK, but I have issue in firefoxe. I’m not able to see text but I can see it in HTML. Do you have the same problem?

8

Looks like Firefox rendering differs from that of Chrome in this case. You can fix it by adding width: 30px; for example to the div styles.

9

Great, it’s working now. So solution is when I define header as component outside chain with addColumn method.

This doesn’t work:

grid.addColumn(...).setKey("key").setHeader(htmlComponent);

This works:

grid.addColumn(...).setKey("key");

grid.getColumnByKey("key").setHeader(htmlComponent);

Thank you very much.