ClayClay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • Drop Down
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • Pagination
    • Pagination Bar
    • Panel
    • Popover
    • Progress Bar
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • Upper Toolbar
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Autofit
      • C Focus Inset
      • C Inner
      • C Spacing Utilities
      • Inline Item
    • Playground
  • Examples
  • Docs
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

Pagination Bar

yarn add @clayui/pagination-bar

Pagination bar provides navigation through datasets

  • Examples
  • Markup
  • API

Stable3.2.4View in LexiconCHANGELOGstorybook demos

  • PaginationBar
  • PaginationBar.DropDown
  • PaginationBar.Results
  • PaginationBarWithBasicItems

PaginationBar

PropertyTypeRequiredDefaultDescription
size
'sm' | 'lg'falseThe size of pagination element.

PaginationBar.DropDown

None.

PaginationBar.Results

None.

PaginationBarWithBasicItems

PropertyTypeRequiredDefaultDescription
activeDelta
numberfalseThe value of delta that is currently selected
activePage
numberfalse1Initialize the page that is currently active. The first page is `1`.
deltas
Array<IDelta>false[ { label: 10, }, { label: 20, }, { label: 30, }, { label: 50, }, ]Possible values of items per page.
disabledPages
Array<number>falseThe page numbers that should be disabled. For example, `[2,5,6]`.
ellipsisBuffer
numberfalseThe number of pages to show on each side of the active page before using an ellipsis dropdown.
hrefConstructor
(page?: number) => stringfalseFunction used to create the href provided for each page link.
labels
{ paginationResults: string; perPageItems: string; selectPerPageItems: string; }false{ paginationResults: 'Showing {0} to {1} of {2}', perPageItems: '{0} items', selectPerPageItems: '{0} items', }Labels for changing some texts inside the component. Use this property for i18n.
onDeltaChange
(page: number) => voidfalseCallback for when the number of elements per page changes. This is only used if an href is not provided.
onPageChange
(page: number) => voidfalseCallback for when the active page changes. This is only used if an href is not provided.
spritemap
stringtruePath to spritemap from clay-css.
totalItems
numbertrueThe total number of items in the pagination list.

How can this be improved? Create an issue!