# Row pagination Pagination is opt-in. Register the feature, register the row model, then either turn it on with `showPagination` or drive its state from outside. > Live demo: Sort, filter, paginate - https://svgrid.com/demos/02-sort-filter-paginate/ The examples on this page run against these rows: ```svelte ``` ```svelte ``` The wrapper renders a footer with page nav and a page-size selector. ## Set the initial page size ```svelte ``` The wrapper's footer renders 10 / 25 / 50 / 100 in the size selector and lets the user change it at runtime. Jumping to a page from outside is best done by hiding the built-in footer (`showPagination={false}`) and rendering your own controls - see the [`09-server-side` demo](https://svgrid.com/demos/09-server-side/) for the canonical pattern. A server-side fetcher keeps the footer: hand `createServerDataSource` to the grid as `rowModel` and the pager reads the server's count and drives the controller's `setPage` - see [Server paging](https://svgrid.com/docs/help/server/server-paging/). ## Page size The default is 10 unless you pass `pageSize`. The footer's size selector picks 10 / 25 / 50 / 100; pass a different `pageSize` to seed a different initial value. ## Pagination + virtualization These two **work together** but they solve different problems. Use virtualization when the page itself is large (>200 rows); use pagination when you want explicit pages, when the user prints/exports, or when server-side fetch returns pages. For 100k-row + virtualized examples, pagination is off and the whole filtered set is scrollable - see [demos/06-large-dataset.svelte](https://svgrid.com/demos/06-large-dataset/). ## Try it `pageable` turns the footer on and `pageSize` sets the slice. Sorting and filtering run before pagination, so page 1 is always the first rows of the result rather than the first rows of your array. ```svelte ``` ## See also - [Server-side guide](https://svgrid.com/docs/getting-started/#11-server-side-data) - [Accessing rows](https://svgrid.com/docs/help/rows/accessing-rows/) --- SvGrid is the Svelte 5 data grid (`npm install @svgrid/grid`, MIT). This page: https://svgrid.com/docs/help/rows/row-pagination/ . All docs: https://svgrid.com/llms.txt