Pagination

<ts-pagination> vv0.6.3

The ts-pagination component.

Open in Storybook for interactive demos.

Preview

<ts-pagination current-page="1" page-size="10" sibling-count="1"></ts-pagination>

Properties

Property	Attribute	Type	Default	Description
currentPage	current-page	number	1	The current active page (1-based).
pageSize	page-size	number	10	Number of items per page.
showFirstLast	show-first-last	boolean	false	Show first/last page buttons.
showInfo	show-info	boolean	false	Show “Showing X-Y of Z” info text.
siblingCount	sibling-count	number	1	Number of sibling pages shown around the current page.
size	size	"lg" | "md" | "sm" | "xl" | "xs"	'md'	The size of the pagination buttons.
total	total	number	—	Total number of items.

Events

Event	Detail	Bubbles	Composed	Description
tsChange	\{ page: number; \}	Yes	Yes	Emitted when the page changes.

CSS Parts

Use ::part() to style internal elements:

Part	Description
button	Each page button.
first	The first page button.
info	The info text element.
last	The last page button.
nav	The nav element.
next	The next button.
prev	The previous button.

ts-pagination::part(button) {
  /* your custom styles */
}

Usage

HTML

<ts-pagination current-page="1" page-size="10" sibling-count="1"></ts-pagination>

React

import { TsPagination } from '@tessera-ui/react';

<TsPagination currentPage="1" pageSize="10"></TsPagination>