Pagination

The pagination component allows the user to move back and forth between pages, showing the number of items on the page and in the rest of the collection.

Usage

import { Pagination, usePaginationState } from '@vtex/admin-ui'

function Example() {
  const state = usePaginationState({ pageSize: 5, total: 35 })

  return <Pagination state={state} />
}

Examples

Loading

Loading...

Query string pagination

You can persist the pagination state within the browser's query params using the useQueryPaginationState hook, instead of usePaginationState. Both hooks are used in the same way. The application should be wrapped by QueryStateProvider.

Watch how your url changes.

Loading...

Actions

Loading...

caution

Be careful when using the setTotal action, because if you set the total to a smaller value it may lead your current page to an invalid one.

Internationalization

Loading...

Props

Name	Type	Description	Required	Default
state	UsePaginationReturn	Component State	✅	-
loading	boolean	Whether the table is loading or not	🚫	false

State

The pagination state object is composed of the currentPage prop and the range prop. The currentPage represents the current page as the name says, and the range is an array that contains two numbers with the first and the last items positions of the current page.

usePaginationState parameters

Name	Type	Description	Required	Default
pageSize	number	Amount of items that will be displayed in a page	✅	-
total	number	Total amount of items in a collection	🚫	pageSize value
stateReducer	(state: PaginationState, action: PaginationAction) => PaginationState	Optional way to provide a function to be used inside usePagination hook useReducer	🚫	usePagination hook default reducer
initialPage	number	The initial state of pagination	🚫	1

useQueryPaginationState parameters

Name	Type	Description	Required	Default
pageSize	number	Amount of items that will be displayed in a page	✅	-
total	number	Total amount of items in a collection	🚫	pageSize value
stateReducer	(state: PaginationState, action: PaginationAction) => PaginationState	Optional way to provide a function to be used inside usePagination hook useReducer	🚫	usePagination hook default reducer

UsePaginationReturn

This represents the type of the props returned by both usePaginationState and useQueryPaginationState.

Name	Type	Description	Required	Default
numberOfPages	number	The total number of pages	✅	-
currentPage	number	The current page state	✅	-
range	[number, number]	It represents the positions of the first and last items in the page	✅	-
total	number	It represents the total number of items	✅	-
prevDisabled	boolean	Whether the navigation to the previous page is disabled or not	✅	-
nextDisabled	boolean	Whether the navigation to the next page is disabled or not	✅	-
paginate	(args: PaginationActionType) => void	The initial state of pagination	✅	-

PaginationActionType

export type PaginationActionType =
  | {
      type: 'next' | 'prev' | 'reset'
    }
  | {
      type: 'setTotal'
      total: number
    }
  | {
      type: 'navigate'
      page: number
    }