This library is still in development and is available only for internal usage at VTEX.
Skip to main content

Pagination

Version: 0.133.0

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.

Import

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

Code example

Loading...

Variation

Pagination only has one variation which is loading

Loading

Loading...

Props

NameTypeDescriptionRequiredDefault
prepositionstringString displayed in between the end of the range and the total amount of items-
subjectstringString displayed in the end of the component-
prevLabelstringLabel used in previous button tooltip-
nextLabelstringLabel used in next button tooltip-
stateUsePaginationReturnComponent State-
loadingbooleanWhether the table is loading or not🚫-

State objects

The pagination state object is composed of the currentPage prop and the range prop. The currentPage is a number and its value is the current page. range is an array that contains two numbers with the beginning and the end item index of the current page.

usePaginationState

For convenience, we also provide a hook that already implements the state logic for you. You should pass the hook's return to the state property.

Parameters

NameTypeDescriptionRequiredDefault
pageSizenumberAmount of items that will be displayed in a page-
totalnumberTotal amount of items in a collection🚫pageSize
stateReducer(state: PaginationState, action: PaginationAction) => PaginationStateOptional way to provide a function to be used inside usePagination hook useReducer🚫usePagination hook default reducer
initialPagenumberThe initial state of pagination🚫1

useQueryPaginationState

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

Parameters

NameTypeDescriptionRequiredDefault
pageSizenumberAmount of items that will be displayed in a page-
totalnumberTotal amount of items in a collection🚫pageSize
stateReducer(state: PaginationState, action: PaginationAction) => PaginationStateOptional way to provide a function to be used inside usePagination hook useReducer🚫usePagination hook default reducer

Code example

watch how your url changes

Loading...