Row Pagination

Introduction

Turn on paging with the pagination option and the grid shows one page of rows at a time with a page bar it renders for you — no separate widget to wire up. Set enabled and you’re done; everything else has a sensible default.

const grid = new Zengrid(el, {
  rowCount: rows.length,
  rowHeight: 44,
  columns,
  pagination: {
    enabled: true,
    pageSize: 25,               // default 100
    pageSizeOptions: [25, 50, 100, 200, 500],
    template: 'material',       // 'simple' | 'material' | 'bootstrap' | 'compact' | 'full'
    position: 'bottom',         // 'top' | 'bottom' | 'both'
  },
  onPageChange: (page, pageSize) => {
    console.log('page', page, 'of size', pageSize); // page is 0-based
  },
});

grid.setData(rows);

Pages are 0-based: the first page is 0. The bar renders at position (bottom by default) and re-styles with the grid theme.

Controlling pages in code

Every button on the bar has an imperative twin, on both grid.pagination.* and as a shorthand on the grid itself.

Method	Shorthand	Effect
grid.pagination.goTo(page)	grid.goToPage(page)	Jump to a page (0-based).
grid.pagination.next()	grid.nextPage()	Advance one page.
grid.pagination.previous()	grid.previousPage()	Back one page.
grid.pagination.first()	grid.firstPage()	Jump to the first page.
grid.pagination.last()	grid.lastPage()	Jump to the last page.
grid.pagination.setPageSize(n)	grid.setPageSize(n)	Change rows per page.
grid.pagination.getCurrentPage()	grid.getCurrentPage()	Read the current page.
grid.pagination.getPageSize()	grid.getPageSize()	Read the page size.
grid.pagination.getTotalPages()	grid.getTotalPages()	Read the page count.

Try it live

Each tab is a different pagination setup. Use the built-in page bar, edit the code, or drive it with the buttons — the grid re-pages instantly.

BasicTemplatesControl in codeLayout & options

CodeDemoSplit

ResetRun ⌘⏎

Set enabled and a pageSize — the grid renders the page bar. Change pageSize or pageSizeOptions and re-run.

Templates and layout

The bar ships in five styles — simple, material (default), bootstrap, compact, and full — set through template. Independently, position places it at the top, bottom, or both, and the showPageInfo, showTotalCount, and showPageSizeSelector flags plus maxPageButtons trim what it renders. The Templates and Layout & options tabs above walk through both.

Next

• Row Sorting — order rows before paging.
• Row Data — the source rows.