Vaadin Flow Grid — эквивалент Grid.setHeightByRows в версии 24

Question

Если строк всего 2-3, Vaadin Grid по какой-то причине отображает пустое пространство под последней (мне всегда было интересно, почему это так). В Vaadin 8 я решил эту проблему следующим образом:

      grid.setHeightByRows(size <= 12 ? size : 12);

Таким образом, если строк не так много, сетка имеет меньший размер без ненужного пустого пространства внизу, но если количество строк больше 12, она ограничивает свою высоту 12 и отображает вертикальную полосу прокрутки.

Не могли бы вы посоветовать, как это реализовать в Vaadin 24? Существует метод Grid.setAllRowsVisible(true), но он действует по-другому. Во-первых, он загружает сразу все элементы, что не обязательно, а также не позволяет ограничивать максимальную высоту в строках (я могу задать высоту в пикселях, но считать пиксели неинтересно).

Answer 1

Поскольку сетка V10+ не имеет фиксированной высоты строк, как это было в версии V8 (т.е. каждая строка теперь может иметь разную высоту), нет способа установить высоту сетки на определенное количество строк. Фактически, в версии 24.0 режим allRowsVisible вообще не работает с максимальной высотой, но это будет исправлено в версии 24.1, когда выйдет это исправление https://github.com/vaadin/web-comComponents/pull/5429.

Как только вы перейдете на версию 24.1, вы можете установить максимальную высоту, которая ограничит сетку этой высотой (и уменьшит ее, если строк меньше). Минимальная высота строк по умолчанию равна, поэтому вы можете добиться того, чего хотите, с помощью чего-то вроде

      vaadin-grid {
  max-height: calc(5 * var(--lumo-size-m));
}

где 5 — количество строк.