Components / Navigation

Pagination

பக்க வரிசை

Pagination sits at the end of a table, card list, or search result set. It must feel attached to the content, show the current range, and keep the controls compact.

பக்க வரிசைப்படுத்தல் ஒரு அட்டவணை, அட்டை பட்டியல் அல்லது தேடல் முடிவு தொகுப்பின் முடிவில் அமைகிறது. இது பெரிய தரவு பட்டியல்களை எளிதாக வழிசெலுத்த உதவுகிறது.

Basic pagination

Component preview

Service directory paginationService list page movement

Structure

Anatomy

5 parts documented for implementation and review.

Component map

Range summary

வரம்பு சுருக்கம்required<p>

Short text before the controls. Always show visible range and total count so users know where they are in the dataset.

PaginationPrevious

முந்தைய பக்கம்<a>

Previous page link. Disable or remove the link target on the first page; keep the hit area at least 36px tall.

PaginationLink

பக்க இணைப்புrequired<a>

Individual page link. The active page uses aria-current='page', primary fill, and strong contrast.

PaginationEllipsis

முப்புள்ளி குறியீடு<span>

Non-interactive truncation marker. Use it when page ranges exceed the available width.

PaginationNext

அடுத்த பக்கம்<a>

Next page link. On small screens, the label hides and the icon remains visible.

Usage guidance

Attach pagination to the dataset surface instead of floating it alone on the page.
Show only the first page, last page, current page, and nearby pages.
Use URL pagination such as ?page=2 for indexable public content.
Keep controls in one row on desktop and allow the summary to stack above controls on mobile.

API

Props

3 props

currentPagereq

Type: number
Default: -
Description: Active view index.

totalPagesreq

Type: number
Default: -
Description: Bound index maximum.

onPageChangereq

Type: (page: number) => void
Default: -
Description: Triggered on pagination clicks.

Prop	Type	Default	Description
`currentPage`req	`number`	-	Active view index.
`totalPages`req	`number`	-	Bound index maximum.
`onPageChange`req	`(page: number) => void`	-	Triggered on pagination clicks.

Best practices

Attach pagination to the results it controls

பக்க ஒழுங்கமைப்பை முடிவுகளுடன் இணைக்கவும்

A bordered footer creates a clear relationship between the list, the range summary, and the page controls.

எல்லைக்கோட்டுடன் கூடிய அடிப்பகுதி, பட்டியல், முடிவுச்சுருக்கம் மற்றும் பக்க கட்டுப்பாடுகளுக்கு இடையே ஒரு தெளிவான தொடர்பை உருவாக்குகிறது.

Do not float pagination without context

சூழல் இல்லாமல் பக்க ஒழுங்கமைப்பை மிதக்க விடாதீர்கள்

Page numbers without a range summary or nearby result surface give users no sense of where they are.

முடிவுச்சுருக்கம் அல்லது முடிவுகள் இல்லாத பக்க எண்கள் பயனர்களுக்கு அவர்கள் எங்கு இருக்கிறார்கள் என்ற உணர்வைத் தராது.

Truncate long ranges

நீண்ட பக்க வரம்புகளை சுருக்கவும்

Keep five to seven visible links. Ellipsis keeps the control compact and prevents mobile overflow.

ஐந்து முதல் ஏழு வரையிலான இணைப்புகளை மட்டும் காட்டுங்கள். முப்புள்ளி குறியீடு பக்க கட்டுப்பாட்டை சுருக்கமாக வைத்திருக்கும் மற்றும் மொபைல்களில் வழிந்து உடைவதைத் தடுக்கும்.

Do not list every page number

அனைத்து பக்க எண்களையும் பட்டியலிட வேண்டாம்

Long numeric runs are hard to scan, wrap badly on phones, and make the current page harder to find.

அனைத்து எண்களையும் காட்டுவது மொபைல்களில் பக்க வடிவமைப்பு வழிந்து உடைவதற்கும் தற்போதைய பக்கத்தைக் கண்டறிவதை கடினமாக்குவதற்கும் வழிவகுக்கும்.

Command Palette