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.

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.

React TSX
1

Pagination Properties

  • shouldPaginate: Enables pagination functionality
  • rowsPerPage: Number of rows per page (default: 10)
  • totalPages: Total number of pages available - required for proper pagination controls
  • onNextPage: Callback function triggered when user clicks the next page button
  • onPreviousPage: Callback function triggered when user clicks the previous page button
  • rowHeight: Sets the height of rows in pixels (number, e.g., 40)

Important Note

The totalPages property is crucial for proper pagination functionality. Without it:

  • The table won't know how many page numbers to display
  • Next/Previous buttons won't disable correctly at boundaries
  • Users may attempt to navigate to non-existent pages

Always calculate and provide totalPages based on your data size and page size (e.g., Math.ceil(totalItems / pageSize)).

Pagination Features

When pagination is enabled, Simple Table provides:

  • Automatic page navigation controls
  • Page size selection
  • Current page indicator
  • Total pages display
Previous: Cell RendererNext: Themes