Pagination

The Pagination component allows navigation through pages of content. It supports displaying a range of page numbers, as well as “Previous” and “Next” buttons.

There are two types of pagination:

• Determinate
• Indeterminate

The totalItems and pageSize props are used to determine the total number of items and the number of items per page in the pagination. If totalItems and pageSize are provided, the component will display the page numbers along with the navigation buttons. If totalItems and pageSize are not provided, the component will only display the “Next” and “Previous” buttons.

Determinate Pagination (Button)

Determinate Pagination with Hidden Page Numbers

Determinate Pagination with Links

Indeterminate Pagination with Links

Indeterminate Pagination with Callbacks

Usage

Determinate Pagination

import { Pagination } from '@harnessio/ui/components'

//...

const [currentPage, setCurrentPage] = useState(1)
const { t } = useTranslationStore()

return (
  <Pagination
    totalItems={100}
    pageSize={10}
    currentPage={currentPage}
    goToPage={setCurrentPage}
    t={t}
  />
)

Indeterminate Pagination

import { Pagination } from '@harnessio/ui/components'

//...

const [currentPage, setCurrentPage] = useState(1)
const { t } = useTranslationStore()

return (
  <Pagination
    indeterminate
    hasPrevious={currentPage > 1}
    hasNext={currentPage < 100}

    // if need to use links
    getPrevPageLink={() => currentPage - 1}
    getNextPageLink={() => currentPage + 1}

    // if need to use buttons
    onPrevious={() => setCurrentPage(currentPage - 1)}
    onNext={() => setCurrentPage(currentPage + 1)}
    t={t}
  />
)

Prop	Required	Default	Type
t	true		TFunction
className	false		string
indeterminate	false	false	boolean
totalItems	false		number
pageSize	false		number
currentPage	false		number
hidePageNumbers	false	false	boolean
goToPage	false		(page: number) => void
getPageLink	false		(page: number) => string
hasPrevious	false		boolean
hasNext	false		boolean
onPrevious	false		() => void
onNext	false		() => void
getPrevPageLink	false		() => string
getNextPageLink	false		() => string