A controlled rows-per-page selector for TanStack Table pagination.
Pass the current pageSize and a setPageSize callback. Use options to customize the available sizes.
Rows per page
Showing 10 rows per page
Installation
Copy the Source Code
Copy and paste the following code into your project:
table/page-size-selector/page-size-selector.svelte
table/page-size-selector/index.ts
Folder Structure
Folder Structure
Usage
Keep the TanStack-specific pagination logic in the parent and pass only the current value and setter to the selector.
usage.svelte
Props
Page size selector props
| Name | Type | Default | Description |
|---|---|---|---|
pageSize | number | required | The currently selected number of rows per page. |
options | number[] | [5, 10, 25, 50] | Page sizes displayed in the select menu. |
setPageSize | (pageSize: number) => void | required | Called with the selected page size. Update your table or other pagination state here. |
class | string | "" | Optional classes for the root wrapper. |