Performance issue with setHeightByRows

[mas4ivv]

Using a simple Grid with a large number of cells leads to extreme performance issues when setHeightByRow is true. Simple example:

@route("")
public class MainView extends VerticalLayout {

public MainView() {
    List<List<String>> items = new ArrayList<>();
    for (int i = 0; i < 5000; i++) {
        items.add(Arrays.asList("A\n" + i, "B" + i, "C" + i));
    }
    Grid<List<String>> grid = new Grid<>();

    grid.addColumn(item -> item.get(0)).setHeader("A");
    grid.addColumn(item -> item.get(1)).setHeader("B");
    grid.addColumn(item -> item.get(2)).setHeader("C");

    grid.setDataProvider(DataProvider.ofCollection(items));

    grid.setHeightByRows(true);
    this.add(grid);
}

}

When increasing the number of cells the rendering time grows exponentially. It took up to 8 minutes in our real app, setting setHeightByRows to false brought us back to 5 seconds.

Chrome gives a hint: it seems that every new cell forces all existing cells to recalculate their size.

[tomivirkki]

setHeightByRows disables Grid's virtual scrolling by rendering all the rows in the DOM. Using the feature makes sense when the Grid has a very limited amount of items, but with 5000 rows and virtual scrolling disabled, performance issues are expected.