PaginationBar

The PaginationBar component combines a pagination control with a row selector. It’s designed for data tables, dashboards, and any paginated collection.

Basic PaginationBar

Default layout with circular page buttons and a row selector.

Rows per page

Variants & Colors

Combine color and variant props to fit your design theme.

Rows per page

Rows per page

Rows per page

Shapes & Sizes

Adjust the button shapes and sizes for compact or large interfaces.

Rows per page

Rows per page

Items per Page Selector

Dropdown for dynamically changing the number of displayed rows.

Rows per page

Props

Configuration options available for PaginationBar.

  • currentPage: number — The currently active page number.
  • totalPages: number — Total number of pages.
  • itemsPerPage: number — Number of items per page.
  • onPageChange: (page: number) => void — Callback triggered when the page changes.
  • onItemsPerPageChange: (items: number) => void — Callback triggered when rows per page change.
  • itemsPerPageOptions?: number[] — Custom list of selectable per-page values.
  • color?: 'default' | 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error' — Sets pagination and button color.
  • variant?: 'filled' | 'outlined' | 'soft' | 'ghost' — Sets the visual variant for the pagination.
  • shape?: 'rounded' | 'circular' — Determines the shape of pagination buttons.
  • size?: 'sm' | 'md' | 'lg' — Controls button and spacing size.
  • className?: string — Additional custom classes for layout.