Grid: header row column widths differ from other row column widths when setting width and flex-grow on columns

[homerstone]

Description

When using Column.setWidth and Column.setFlexGrow on Grid columns with headers the resulting Grid headers widths differ from the rest of the rows in the grid. When setFrozenToEnd is used on a column in addition to setting width and flex-grow, there is a gap between the frozen column's header and the end of the grid (in the example screenshot below the 'Date' column is frozen to the end).

(Resulting grid in Vaadin 24.3.0)

Expected outcome

When setting the width and flex-grow of columns in a grid, the resulting grid column cells all have the same width. When additionally using columns frozen to the end of the grid, there is no gap between the frozen column header and the end of the grid.

(expected resulting grid, Vaadin 24.2.12)

Minimal reproducible example

I used a starter with a data grid view for testing. It seems the behavior was introduced in Vaadin 24.3.0, since changing the Version to 24.2.12 results in the expected behavior. I also changed the Java Version to 17 from 21 in the starter project for convenience. I set the width and flex-grow of two columns and set one column as frozen to end to cause the described behavior.

    // [...]

    private void createClientColumn() {
        clientColumn = grid.addColumn(new ComponentRenderer<>(client -> {
            HorizontalLayout hl = new HorizontalLayout();
            hl.setAlignItems(Alignment.CENTER);
            Image img = new Image(client.getImg(), "");
            Span span = new Span();
            span.setClassName("name");
            span.setText(client.getClient());
            hl.add(img, span);
            return hl;
        })).setComparator(client -> client.getClient()).setHeader("Client");

        clientColumn.setWidth("50em");
        clientColumn.setFlexGrow(2);
    }

    private void createAmountColumn() {
        amountColumn = grid
                .addEditColumn(Client::getAmount,
                        new NumberRenderer<>(client -> client.getAmount(), NumberFormat.getCurrencyInstance(Locale.US)))
                .text((item, newValue) -> item.setAmount(Double.parseDouble(newValue)))
                .setComparator(client -> client.getAmount()).setHeader("Amount");

        amountColumn.setWidth("50em");
        amountColumn.setFlexGrow(2);
    }

    // [...]

    private void createDateColumn() {
        dateColumn = grid
                .addColumn(new LocalDateRenderer<>(client -> LocalDate.parse(client.getDate()),
                        () -> DateTimeFormatter.ofPattern("M/d/yyyy")))
                .setComparator(client -> client.getDate()).setHeader("Date").setWidth("180px").setFlexGrow(0);
        dateColumn.setFrozenToEnd(true);
    }

    // [...]

Steps to reproduce

1. Create and download a starter with a Grid Data View
2. Set the width and flex-grow of some columns (see code snippet above)
3. run mvn spring-boot:run

Environment

Vaadin version(s): Bug happends on 24.3.0+
OS: Windows

Browsers

Firefox

[tomivirkki]

Possibly related to vaadin/web-components#6974 (comment)

[homerstone]

@tomivirkki thanks for the heads up! I somehow missed that issue, sorry for that. Switching from "em" to "rem" units fixes the problem in my case.

[rolfsmeds]

We should document this clearly on the docs page related to Grid column width, and could also consider mentioning it in the JavaDoc for Column.setWidth() method.

Also the Grid examples for setting col widths in docs use ems, and should be refactored to use rems.

[DiegoCardoso]

Closed as completed.