Grid column width match content

Flow
1

I have a grid which width is bigger than its parent so I have to have horizontal scroller.

I want to have few columns with fixed size and one which has width calculated based on its content (so it grows automatically).

I have something like this:

Grid<RowType> grid = new Grid<>();
grid.setItems(rows);

grid.addColumn(RowType::getId)
        .setHeader("Id")
        .setFlexGrow(0)
        .setWidth("100px");

...

grid.addColumn(RowType::getName)
        .setHeader("Name")
        .setFlexGrow(1);

The column with getName should grow automatically.
When I set setFlexGrow(1) then this column (without fixed size) occupies just the rest from parent component width.

How it can be achieved that this column will grow to display whole content and the whole grid will have width bigger than 100%?

2

This is a missing feature at the moment: https://github.com/vaadin/vaadin-grid/issues/1233

I suppose a workaround could be to go through the first few dozen rows in the data set and get the longest string value from there and then set the column width based on that as ems.

That’s probably close to how it’ll work eventually when implemented. The grid will only accound the items in the initial render for the column width. So when you scroll, another item might still overflow the column.