Pagination - React

Pagination

ReactVueJS + CSS

Impor

Copy

import { Pagination } from '@idds/react';

Contoh Penggunaan

Contoh 1 - Basic Pagination

PreviewCode

Halamandari 10

123

Baris per halaman102050100

Contoh 2 - Disabled State

PreviewCode

Disable Pagination

Halamandari 10

123

Baris per halaman102050100

Props

Name	Type	Default	Required	Description
currentPage	number	—	Yes	Halaman saat ini (1-indexed).
totalPages	number	—	Yes	Total halaman (dihitung dari total data / pageSize).
pageSize	number	—	Yes	Jumlah baris per halaman saat ini.
pageSizeOptions	number[]	—	Yes	Opsi-opsi jumlah baris per halaman (misal: [10, 20, 50, 100]).
onPageChange	(page: number) => void	—	Yes	Callback ketika user mengganti halaman (klik nomor, Prev, Next, dll).
onPageSizeChange	(newPageSize: number) => void	—	Yes	Callback ketika user mengganti pageSize (dropdown "Baris per halaman").
disabled?	boolean	false	No	Jika true, pagination akan men-disable semua kontrol navigasi. Misalnya: saat sedang loading data atau tidak ada data sama sekali.
fullWidth?	boolean	false	No	Jika true, layout akan menjadi full width dengan justify-between. Cocok untuk digunakan di dalam Table component.

Di halaman ini

• Impor
• Contoh Penggunaan
• Props