Documentation

Footer Renderer

Replace the default pagination footer with your own UI via footerRenderer.

Custom pagination footer

Pass footerRenderer with enablePagination. It replaces the default footer. Use hasPrevPage / hasNextPage to disable controls at the ends.

React TSX

Copy

const FooterBar = ({
  currentPage, totalPages, startRow, endRow, totalRows,
  hasPrevPage, hasNextPage, onPrevPage, onNextPage,
}) => (
  <div style={{ display: "flex", justifyContent: "space-between", padding: 12 }}>
    <span>Showing {startRow}-{endRow} of {totalRows}</span>
    <div>
      <button disabled={!hasPrevPage} onClick={onPrevPage}>Prev</button>
      <span> {currentPage} / {totalPages} </span>
      <button disabled={!hasNextPage} onClick={() => void onNextPage()}>Next</button>
    </div>
  </div>
);

<SimpleTable
  columns={columns}
  rows={rows}
  enablePagination
  rowsPerPage={10}
  footerRenderer={FooterBar}
/>

Footer above the table

Set footerPosition="top" for the default or custom footer. Defaults to "bottom".

React TSX

Copy

<SimpleTable
  columns={columns}
  rows={rows}
  enablePagination
  footerPosition="top"
  footerRenderer={FooterBar}
/>

Notes

Page numbers are 1-based. onNextPage is async. For pagination setup without a custom footer, see Pagination.

Example

Custom footer with page info and navigation. Use Code or StackBlitz for the full example.

StackBlitz

Props

Footer Renderer Configuration

Property	Required	Description	Example
Property	Required	Description	Example
`footerRenderer` (props: FooterRendererProps) => …	Optional	Custom footer that replaces the default. Receives pagination state and navigation handlers.
`footerPosition` "top" \| "bottom"	Optional	Place the footer above ("top") or below ("bottom", default) the table body.
`footerRenderKey` string \| number	Optional	Cache key for custom footers that read external state. Change it when that state changes so the footer refreshes even if pagination inputs are unchanged.

Renderer arguments

FooterRendererProps

Property	Required	Description	Example
Property	Required	Description	Example
`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.
`nextIcon` ReactNode	Optional	Optional custom icon for the next page button.