vaadinvaadin-flowvaadin-grid

How to get around of joining multiple columns on first footer row is not possible in Grid?

I get this exception when I try to define footer row and join all columns on it:

Cells cannot be joined on the top-most footer row. This row is used as the default row for setting column footers, so each cell in it should have maximum one related column

What I am trying to achieve is to have a footer that is full-width visible for grid width. Usually information that I am trying to show in footer is longer than the small columns that are present in my Grid.

Thus, I must add another footer row first, that is reserved to be for column footers (single cell), however that creates visually unappealing thing you can see in the example picture (empty footer row).

One might say that I can assign long text to widest column footer, however I need the text to be at the left start of the grid and that it will not change position on column reorder.

How to get around this limitation?

Example grid

Code:

grid.appendFooterRow();
val fr = grid.appendFooterRow();
val cell = fr.join(grid.getColumns().toArray(Grid.Column[]::new)); // joining multiple columns will throw exception here if there would be no footer row added before this one
cell.setText("TESITNG EVERY LOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOONG TEXT");

Using Vaadin 24.

Solution

  • You can add a div below the grid and style it to appear "connected", similar to a footer. Below is a mock-footer element which appears as part of the grid.

    To easily use styles from the default Vaadin theme, I suggest you ensure you have imported the Vaadin LumoUtility CSS classes into your project.

    Grid<String> grid = new Grid<>();
grid.setWidthFull();
// .. setup grid

// create footer element
HorizontalLayout footer = new HorizontalLayout();
footer.setWidthFull();
footer.addClassNames(
        LumoUtility.Border.LEFT, LumoUtility.Border.BOTTOM, LumoUtility.Border.RIGHT,
        LumoUtility.BorderColor.CONTRAST_10, LumoUtility.Padding.MEDIUM);
footer.add(new Span("LOOOOOOOOOOOOOOOOONG FOOTER TEXT"));

// wrap grid and footer in container
VerticalLayout container = new VerticalLayout(grid, footer);
container.setWidthFull();
container.setPadding(false);
container.setSpacing(false);

add(container);