¶Paging & virtual scrolling

Two paging modes: classic paged (default) and virtual scrolling. Both fetch only a viewport window from the server, so the grid never holds more than a screenful of rows.

¶Paged mode

A footer pager (first / prev / numbered pages with ellipses / next / last), a page-size selector, and a range display (X–Y of Z).

const options = {
  paging: {
    mode: 'paged',              // default
    pageSize: 20,              // default 20
    pageSizeOptions: [20, 50, 100, 200],
    allowAll: true,            // adds an "All" choice (capped, see below)
    maxAll: 1000,              // cap for "All" (protocol also clamps take to 1000)
  },
};

Livewire exposes these as properties: $perPage, $pageSizeOptions, $allowAll, $allCap.

Programmatic (client core):

grid.goToPage(0);        // 0-based
grid.setPageSize(50);
grid.setPageSize('all');
grid.pageCount();

Why take is a viewport, not a page size: the protocol's view.take is the number of visible rows. In virtual mode it is computed from the scroll position; in paged mode it equals the page size.

¶Virtual scrolling

Render a constant number of rows regardless of dataset size, translating the scroll position into a [skip, take] window.

const options = {
  paging: { mode: 'virtual', rowHeight: 37, overscan: 8 },
};

<DataGrid :options="options" :height="560" />   <!-- viewport height in px -->

The grid renders spacer rows above and below the fetched window so the scrollbar is sized for the full dataset, and refetches as you scroll. rowHeight must match your actual row height.

¶Livewire

Virtual scrolling is also available in the Livewire client (server-driven): the component renders a fixed-height scroll viewport with spacer rows sized for the full dataset, and fetches the visible window over the wire as you scroll.

public bool $virtualScroll = true;
public int $rowHeight = 37;
public int $overscan = 8;
public int $viewportHeight = 520;   // px

The pager is hidden in virtual mode; the footer shows the current row range. Each scroll settles (debounced) into one Livewire request for that window, so the DOM and the query stay bounded even over millions of rows.

See also column virtualization for very wide grids (all three clients).

¶The cost model

Paging only pays for the viewport query. The total row count (needed to size the pager/scrollbar) is requested via meta: ['total'] and cached per filter — changing page or sort does not recompute it. See Performance.