Pagination

Navigasi data dengan nomor halaman atau cursor, ringkasan rentang, dan pilihan jumlah data per halaman.

Nomor halaman

Hubungkan v-model:page ke parameter query aplikasi. Berikan total agar jumlah halaman dan ringkasan rentang dihitung otomatis. Jika API sudah mengirim jumlah halaman, gunakan total-pages.

Setiap tombol nomor dan panah punya garis tepinya sendiri, dan halaman aktif menjadi kotak penuh. Nomor yang tidak masuk jangkauan siblingCount diringkas menjadi … — bahkan bila yang disembunyikan hanya satu halaman, supaya barisnya tetap pendek dan lebarnya tidak berubah setiap kali pembaca berpindah halaman.

Memuat halaman 6 dengan 10 data per halaman.

Dengan Table

Pagination sengaja berdiri sendiri agar dapat dipakai untuk data lokal maupun server. Letakkan setelah W4cTable, lalu kirim potongan baris yang sesuai dengan halaman aktif.

Pickup	Lokasi	Berat
PU-0042	Bekasi	120 kg
PU-0043	Bandung	127 kg
PU-0044	Karawang	134 kg
PU-0045	Jakarta	141 kg
PU-0046	Bekasi	148 kg

Cursor

Mode cursor cocok untuk endpoint yang hanya memberikan token sebelum dan berikutnya. Event membawa token secara utuh, sehingga nilainya tidak perlu dibaca atau diubah oleh komponen.

API

Props

Prop	Tipe	Default	Keterangan
mode	'page' \| 'cursor'	'page'	Pola navigasi berdasarkan nomor halaman atau cursor API.
page	number	undefined	Halaman aktif, dimulai dari 1 dan mendukung v-model:page.
defaultPage	number	1	Halaman awal untuk penggunaan tanpa v-model.
total	number	undefined	Jumlah seluruh data untuk menghitung halaman dan ringkasan.
totalPages	number	dihitung dari total	Jumlah halaman dari API bila sudah tersedia.
pageSize	number	undefined	Jumlah data per halaman, mendukung v-model:page-size.
defaultPageSize	number	10	Jumlah data awal untuk penggunaan tanpa v-model.
pageSizeOptions	number[]	[10, 25, 50, 100]	Pilihan jumlah data per halaman.
showPageSize	boolean	false	Menampilkan W4cFormSelect untuk memilih jumlah data.
showSummary	boolean	true	Menampilkan rentang data aktif dan jumlah keseluruhan.
showFirstLast	boolean	true	Menampilkan tombol menuju halaman pertama dan terakhir.
siblingCount	number	1	Jumlah nomor di tiap sisi halaman aktif. Nomor di luar jangkauan itu selalu diringkas menjadi "…", termasuk ketika yang disembunyikan hanya satu halaman — jadi di halaman 4 dari 4, barisnya "1 … 3 4".
size	'sm' \| 'md'	'md'	Ukuran tombol, teks, dan pilihan jumlah data.
disabled	boolean	false	Menonaktifkan seluruh navigasi.
loading	boolean	false	Menonaktifkan navigasi dan menandai nav sebagai sibuk.
label	string	'Pagination'	Nama aksesibel elemen navigasi.
previousCursor / nextCursor	string \| number \| null	undefined	Token cursor yang dikirim lewat event previous atau next.
hasPrevious / hasNext	boolean	ditentukan dari cursor	Ketersediaan arah cursor ketika API tidak memberi token.
cursorLabel	string	undefined	Konteks singkat di antara tombol cursor.

Slots

Slot	Tipe	Default	Keterangan
summary	{ page, pageSize, from, to, total }	—	Mengganti ringkasan rentang pada mode page.
page	{ page, active }	—	Mengganti isi tombol nomor halaman.
cursor	—	—	Mengganti konteks di antara tombol cursor.

Events

Event	Tipe	Default	Keterangan
update:page	(page: number) => void	—	Dipicu untuk sinkronisasi v-model:page.
pageChange	(page: number) => void	—	Alias perubahan halaman untuk memuat data server.
update:pageSize	(pageSize: number) => void	—	Dipicu untuk sinkronisasi v-model:page-size.
pageSizeChange	(pageSize: number) => void	—	Alias perubahan jumlah data untuk memuat ulang server.
previous / next	(cursor?: string \| number) => void	—	Meminta kumpulan data cursor sebelum atau sesudahnya.