Grid hides Icon in the rows.

Good day EveryBody, I have catch next problem.
I have the grid on my page.

public Grid buildGrid() {
Grid grid = new Grid<>();
grid.setHeight(“97em”);

add some columnes
but this 2 latest columns and they are displayed badly.

grid.addColumn(new ComponentRenderer<>(registryData -> {
        Icon checkIcon = new Icon(VaadinIcon.OPEN_BOOK);
        checkIcon.setColor(BLUE_COLOR);
        checkIcon.addClickListener(my logic);
        return checkIcon;
    })).setTextAlign(ColumnTextAlign.CENTER).setHeader("\uD83D\uDCD6");

grid.addColumn(new ComponentRenderer<>(registryData -> {
        Icon checkIcon = new Icon(VaadinIcon.RECYCLE);
        checkIcon.setColor(GREEN_COLOR);
        checkIcon.addClickListener(my logic);
        return checkIcon;
     })).setTextAlign(ColumnTextAlign.CENTER).setHeader("⇶");
}

somehow this columns displayed with interrupted. Some cells contain icons, but some doesn’t

18459879.png

The code looks okay to me. What do you mean with “they are displayed badly” and “displayed with interrupted”?

Here’s what I would try to find out where the error comes from:

  • try a simple string for column headers
  • try a button instead of an icon (new Button(VaadinIcon.RECYCLE.create(), myLogicClickListener);)

Thanks for your answer, I rewritten with Button, but the problem with hidden rows remains.

code fragment

	grid.addColumn(new ComponentRenderer<>(registryData -> {
        return new Button(VaadinIcon.OPEN_BOOK.create(),event -> recheck(registryData));
    })).setTextAlign(ColumnTextAlign.CENTER).setHeader("string");
    grid.addColumn(new ComponentRenderer<>(registryData -> {
        return new Button(VaadinIcon.RECYCLE.create(),event -> recheck(registryData));
    })).setTextAlign(ColumnTextAlign.CENTER).setHeader("string");

    grid.getColumns().forEach(column -> column.setAutoWidth(true));
    grid.getColumns().forEach(column -> column.setResizable(true));
    grid.setColumnReorderingAllowed(true);

18462422.png