Demo / Plugins/ Base / Pagination
npm package:
@omnigrid/pagination-pluginDefault pagination
The PaginationPlugin slices rows into pages client-side through a data processor and renders the navigation block into the bottom slot. This example uses default options: pageSize 50 with first, previous, next, and last controls aligned to the bottom-right.
Page 1 of 1
Blocks
All three blocks — row information, page-size selection, and navigation — can be enabled at once and each targets an independentslot and alignment. Here row information and the page-size selector sit in the top slot while navigation is centered in the bottom slot.
Rows 0–0 of 0
Page Size:
Page 1 of 1
Quick jump
Set quickJump to true to let users jump to a specific page. The navigation block renders a page-number input alongside the prev/next controls: type a number and press Enter. pageInputCharacters caps the input width (default 2).
of 1
Auto page size
Set pageSize to 0 to size pages automatically to the grid's row area. The plugin subtracts the header height from the viewport and shows the largest whole number of rows that fit; the page-size selector always lists Auto as its first option.
Page Size:
Page 1 of 1
Server-side pagination
In server mode the plugin does not slice data; it calls onChange with the requested page and page size so the host can fetch the slice. Provide the total row count with totalRows (here a constant) and feed the requested page back into the data prop.
Rows 1–20 of 1000
Page 1 of 50
Pagination events
In server mode the plugin calls
onChange with the requested page and page size whenever the user navigates. The host can subscribe to those events to trigger a data fetch — each line below is a single event, recording the page and page size the user requested.Rows 1–20 of 1000
Page 1 of 50
No pagination events yet — navigate between pages.