Skip to content

Пейджинг и виртуализация

paging выбирает способ отображения уже переданной локальной коллекции:

РежимПоведение
pagesДелит строки на страницы и показывает навигацию
virtualПоказывает единый прокручиваемый список с виртуальным окном

Локальные страницы

pages используется по умолчанию.

vue
<Table
  id="orders"
  :rows="rows"
  row-key="id"
  paging="pages"
  page-size="25"
  page-sizes="10,25,50,100"
>
  <Column key="number" title="Номер" sortable />
  <Column key="createdAt" title="Создан" sortable sort="date" />
</Table>

Runtime сначала сортирует полную коллекцию, затем выбирает строки текущей страницы. Смена размера возвращает пользователя на первую страницу. При сокращении rows номер страницы автоматически ограничивается существующим диапазоном.

pageChanged содержит:

ts
{
  tableId: string
  pageIndex: number // начинается с 0
  pageSize: number
  pageCount: number
}

Начальная гидратация сохранённого состояния событие не публикует.

Единый виртуальный список

vue
<Table
  id="orders"
  :rows="rows"
  row-key="id"
  paging="virtual"
  row-size="40"
>
  <Column key="number" title="Номер" />
  <Column key="status" title="Статус" />
</Table>

В режиме virtual:

  • отсутствуют страницы и footer навигации;
  • сортировка применяется ко всей коллекции;
  • одновременно материализуется только видимое окно и overscan;
  • page-size и page-sizes не влияют на отображение;
  • rowIndex остаётся индексом полной отсортированной коллекции.

row-size задаёт расчётную высоту строки. Сильно отличающаяся фактическая высота может ухудшить точность прокрутки конкретного адаптера.

lazy

Текущее ограничение

lazy пока не отправляет запросы, не передаёт limit/offset, не принимает общее количество строк и не переводит Table в manual pagination.

Даже при lazy коллекция rows считается полной локальной выборкой. Серверный paging должен быть отдельным контрактом Query/DataView и не может считаться реализованным только из-за наличия этого атрибута.