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.

Usage

With Known Total Pages

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

//...

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

return (
  <Pagination
    totalPages={10}
    currentPage={currentPage}
    goToPage={setCurrentPage}
    t={t}
  />
)

Without Known Total Pages

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

//...

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

return (
  <Pagination
    currentPage={currentPage}
    nextPage={currentPage + 1}
    previousPage={currentPage - 1}
    goToPage={setCurrentPage}
    t={t}
  />
)

API Reference

The Pagination component controls the navigation through pages. It displays page numbers, and “Previous” and “Next” buttons.

The component can be used either with a known total number of pages or with just the “Next” and “Previous” buttons. If totalPages is provided, it will display the page numbers along with the navigation buttons. If totalPages is not provided, it will only display the “Next” and “Previous” buttons based on the nextPage and previousPage props.

<Pagination
  currentPage={1}              // current page number
  goToPage={(pageNum) => {}}   // function to handle page change
  t={t}                        // translation function
  totalPages={10}              // [OPTIONAL] total number of pages
  nextPage={2}                 // [OPTIONAL] next page number
  previousPage={0}             // [OPTIONAL] previous page number
  className="custom-class"     // [OPTIONAL] custom class name
/>

Prop	Required	Default	Type
totalPages	false		number
currentPage	true		number
goToPage	true		(pageNum: number) => void
nextPage	false		number
previousPage	false		number
t	true		TFunction
className	false		string