Pagination

The Pagination component is used to navigate through large datasets by splitting content into discrete pages. It supports two layout types: default (full layout with a display options dropdown) and compact (minimal controls).

Import

React

// with @dhl-official/react-library:
import { DhlPagination } from "@dhl-official/react-library"

// with @dhl-official/ui-libraries/react-library:
import { DhlPagination } from "@dhl-official/ui-libraries/react-library"

Angular

If the DUIL has been installed, you can use the web component directly:

<dhl-pagination></dhl-pagination>

Vue.js

// with @dhl-official/vue-library:
import { DhlPagination } from "@dhl-official/vue-library"

// with @dhl-official/ui-libraries/vue-library:
import { DhlPagination } from "@dhl-official/ui-libraries/vue-library"

Code

React

<DhlPagination
  totalItems={200}
  itemsPerPage={10}
  currentPage={1}
  counterLabel="shipments"
/>

Angular

<dhl-pagination
  total-items="200"
  items-per-page="10"
  current-page="1"
  counter-label="shipments"
></dhl-pagination>

Vue.js

<dhl-pagination
  total-items="200"
  items-per-page="10"
  current-page="1"
  counter-label="shipments"
></dhl-pagination>

Examples

Default

Full layout with display options dropdown, counter text, and page navigation.

Code example

<DhlPagination
  totalItems={200}
  itemsPerPage={10}
  currentPage={1}
  counterLabel="shipments"
/>

Compact

Minimal pagination control with counter and page navigation.

Code example

<DhlPagination
  type="compact"
  totalItems={200}
  itemsPerPage={10}
  currentPage={1}
  counterLabel="shipments"
/>

Without counter

Code example

<DhlPagination
  totalItems={200}
  itemsPerPage={10}
  currentPage={1}
  counter={false}
  counterLabel="shipments"
/>

Without display options

Code example

<DhlPagination
  totalItems={200}
  itemsPerPage={10}
  currentPage={1}
  displayOptions={false}
  counterLabel="shipments"
/>

Interactive Demo

Readme

Properties

Property	Attribute	Description	Type	Default
counter	counter	An optional prop to show/hide the counter text ("Showing X-Y of Z").	boolean	true
counterLabel	counter-label	An optional prop for the counter label suffix (e.g. "shipments").	string	"shipments"
currentPage	current-page	An optional prop for the current active page (1-based).	number	1
dataClassName	data-class-name	An optional class name prop for the component.	string	undefined
dataId	data-id	An optional prop. Gives a valid HTML ID attribute value for the component.	string	`dhl-pagination-${getRandomString()}`
dataTestid	data-testid	An optional prop. The test id attached to the component as a data-testid attribute.	string	undefined
displayLabel	display-label	An optional prop for the label text shown next to the display dropdown.	string	"Display"
displayOptions	display-options	An optional prop to show/hide the items-per-page dropdown menu.	boolean	true
itemsPerPage	items-per-page	An optional prop for items displayed per page.	number	10
itemsPerPageOptions	items-per-page-options	An optional prop for the available items-per-page options.	number[]	[10, 12, 24, 48]
totalItems	total-items	A REQUIRED prop for the total number of items.	number	undefined
type	type	An optional prop to select the pagination type. "default" shows the full layout with display options dropdown. "compact" shows a minimal pagination control.	"compact" | "default"	DHL_PAGINATION.TYPE.DEFAULT

Events

Event	Description	Type
dhlItemsPerPageChange	Emitted when items per page changes.	CustomEvent<{ itemsPerPage: number; }>
dhlPageChange	Emitted when the page changes.	CustomEvent<{ page: number; }>

Dependencies

Depends on

• dhl-icon-wrapper
• dhl-icon

Graph

---

Built by DHL User Interface Library Team!