Pagination in Apex Grid

The Apex grid supports both local and remote pagination. In local mode, the grid slices the data array internally. In remote mode, the grid emits paging events but does not slice — the consumer supplies the current page in response to pageChanged.

Pagination renders an <apex-grid-paginator> element below the data area with five CSS parts for theming.

Enabling pagination

grid.pagination = {
  enabled: true,
  pageSize: 25,
  pageSizeOptions: [10, 25, 50, 100],
};

Configuration

type PaginationConfiguration = {
  enabled: boolean;
  pageSize?: number;
  pageSizeOptions?: number[];
  mode?: 'local' | 'remote';
};

• pageSize is the rows-per-page count (default 10).
• pageSizeOptions populates the page-size dropdown in the paginator UI.
• mode switches between local slicing (default) and remote mode. In remote mode you are responsible for replacing the data array in response to pageChanged.

Properties

const page       = grid.page;          // current page (1-based)
const pageSize   = grid.pageSize;
const pageCount  = grid.pageCount;
const total      = grid.totalItems;    // for remote mode, set this yourself
const slice      = grid.pageItems;     // rows visible on the current page

Programmatic API

await grid.gotoPage(2);
await grid.setPageSize(50);
await grid.nextPage();
await grid.previousPage();
await grid.firstPage();
await grid.lastPage();

Events

• pageChanging — cancellable; fires before the page changes. In remote mode, this is where you trigger your data fetch and call event.preventDefault() if the fetch fails.
• pageChanged — fires after the page changes.

Remote pagination

In remote mode, the grid does not slice. Instead, set totalItems to the server-reported row count and replace data with the current page's rows when pageChanged fires:

grid.pagination = { enabled: true, pageSize: 25, mode: 'remote' };
grid.totalItems = 1234;

grid.addEventListener('pageChanged', async (e) => {
  const rows = await fetchPage(e.detail.page, e.detail.pageSize);
  grid.data = rows;
});

CSS parts

The paginator element exposes the following parts for theming:

• paginator — the host element
• paginator-info — the "Showing X–Y of Z" label
• paginator-controls — the button group
• paginator-button — each navigation button
• paginator-page-size — the page-size dropdown