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

PropertyRequiredDescriptionExample
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.
onNextPage
() => void
Optional
Callback function triggered when user clicks the next page button.

Pagination Features

When pagination is enabled, Simple Table provides:

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

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.