Documentation

Pagination

Pagination helps manage large datasets by dividing the table data into manageable pages. This improves performance, reduces visual clutter, and provides a better user experience for navigating through extensive data collections.

CodeSandbox

Basic Pagination

To enable pagination in Simple Table, you need to add the shouldPaginate prop to your SimpleTable component. This will automatically handle pagination of your data.

Pagination Configuration

Property	Required	Description

`shouldPaginate` boolean	Optional	Enables pagination functionality for the table. When true, the table will display pagination controls and divide data into pages.
`rowsPerPage` number	Optional	Number of rows to display per page. Default is 10.
`onPageChange` (page: number) => void \| Promise<void>	Optional	Callback function triggered when page changes. Useful for server-side pagination to fetch data for the new page.
`serverSidePagination` boolean	Optional	Flag to disable internal pagination slicing. When true, the table expects you to provide pre-paginated data via the rows prop.
`totalRowCount` number	Optional	Total number of rows available on the server (for server-side pagination). Used to calculate total pages.
`onNextPage` () => void	Optional	Callback function triggered when user clicks the next page button.
`isLoading` boolean	Optional	Display skeleton loaders while fetching page data. Particularly useful with server-side pagination to show loading state during page transitions.

Pagination Features

When pagination is enabled, Simple Table provides:

Automatic page navigation controls
Page size selection
Current page indicator
Total pages display

Server-Side Pagination

For large datasets, you can implement server-side pagination where data is fetched from the server one page at a time. This improves performance by only loading the data needed for the current page.

To enable server-side pagination, use these props:

serverSidePagination={true} - Disables internal pagination slicing
totalRowCount={number} - Total rows available on the server
onPageChange=(page) => {...} - Callback to fetch data for the new page

Pro Tip

When using server-side pagination, make sure to update your rows prop with the new page data inside your onPageChange callback. The table will display whatever data you provide in the rows prop.

💡 Loading States with Pagination

Combine pagination with the isLoading prop to show skeleton loaders while fetching new page data. This provides better user feedback during page transitions. See the Loading State documentation for more details.

Overflow Behavior

When pagination is enabled without a specified height, the table will automatically adjust to show all rows on the current page with visible overflow (no internal scrolling). This provides a cleaner user experience for paginated data.

Customizing the Footer

While Simple Table provides a default pagination footer, you can completely customize its appearance and functionality using the footerRenderer prop. This allows you to:

Match your application's design system
Add custom pagination controls and navigation
Display summary statistics or totals
Include action buttons or additional functionality

💡 Advanced Customization

Learn how to create custom pagination footers with complete control over appearance and behavior. Visit the Footer Renderer documentation for detailed examples and API reference.