Documentation

Footer Renderer

CodeSandbox

Footer renderers allow you to completely customize the appearance and functionality of the table footer. Create custom pagination controls, add summary statistics, or build any footer UI that fits your application's design while maintaining full control over navigation and display logic.

Basic Usage

The footerRenderer prop accepts a function that receives pagination state and navigation handlers, returning a custom ReactNode to display in the footer area. This completely replaces the default footer.

Footer Renderer Configuration

PropertyRequiredDescriptionExample
footerRenderer
(params: FooterRendererProps) => ReactNode
Optional
Custom function to render the table footer. Receives footer information including pagination state and returns a ReactNode for display. Completely replaces the default footer.

FooterRendererProps Interface

PropertyRequiredDescriptionExample
currentPage
number
Required
The current page number (1-based index).
startRow
number
Required
The starting row number for the current page (1-based index).
endRow
number
Required
The ending row number for the current page (1-based index).
totalRows
number
Required
The total number of rows in the table.
totalPages
number
Required
The total number of pages based on rowsPerPage.
rowsPerPage
number
Required
The number of rows displayed per page.
hasPrevPage
boolean
Required
Boolean indicating if there is a previous page available.
hasNextPage
boolean
Required
Boolean indicating if there is a next page available.
onPrevPage
() => void
Required
Function to navigate to the previous page.
onNextPage
() => Promise<void>
Required
Async function to navigate to the next page.
onPageChange
(page: number) => void
Required
Function to navigate to a specific page number.
prevIcon
ReactNode
Optional
Optional custom icon for the previous page button (if using default footer).
nextIcon
ReactNode
Optional
Optional custom icon for the next page button (if using default footer).

💡 Pro Tip

Use the hasPrevPage and hasNextPage properties to properly disable navigation buttons when users reach the first or last page. This provides better UX feedback and prevents unnecessary navigation attempts.

Common Use Cases

Footer renderers are ideal for various scenarios:

  • Custom pagination styles - Match your application's design system with branded pagination controls
  • Summary statistics - Display totals, averages, or other aggregated metrics alongside pagination
  • Row info display - Show detailed information about visible rows and total dataset size
  • Action buttons - Add export, refresh, or other bulk action buttons in the footer area
  • Advanced navigation - Implement jump-to-page inputs, page size selectors, or other custom navigation controls

Important Notes

  • The footer renderer completely replaces the default footer when provided
  • Page numbers are 1-based (first page is 1, not 0)
  • The onNextPage function is async and returns a Promise
  • Make sure to handle the hasPrevPage and hasNextPage flags to disable navigation when appropriate