Pagination

Pagination membantu pengguna menavigasi kumpulan data yang dibagi ke dalam beberapa halaman. Komponen ini menjaga tampilan tetap rapi dan ringan dengan hanya menampilkan sebagian data pada satu waktu.

Penggunaan

Gunakan Pagination untuk membagi data dalam jumlah besar menjadi beberapa halaman agar tampilan tetap efisien dan mudah diakses. Komponen ini membantu pengguna fokus pada informasi yang relevan, mempercepat waktu pemuatan halaman, dan memberikan kontrol navigasi yang jelas.

Anatomi

Kategori

Default

Digunakan untuk kebutuhan umum seperti daftar konten, kartu, atau elemen lain di luar tabel.

Berisi kontrol navigasi halaman (awal, sebelumnya, nomor halaman, berikutnya, akhir).
Tidak memiliki dropdown “Baris per halaman.”
Disusun secara horizontal dan ringkas.
Direkomendasikan untuk digunakan pada komponen daftar atau galeri.

Tabel

Digunakan untuk menavigasi data di dalam tabel.

Dilengkapi dengan kontrol tambahan seperti:

Dropdown “Baris per halaman” untuk menentukan jumlah data yang ditampilkan.
Indikator halaman aktif (contoh: Halaman 1 dari 8).

Disusun secara horizontal dan ringkas.
Komponen pagination tetap berada di dalam area tabel dan menyesuaikan lebar kontainer.

Cara Penggunaan yang Disarankan

✅ Disarankan

Gunakan pagination jika terdapat lebih dari 20 item dalam satu daftar.

❌ Dihindari

Jangan tampilkan pagination jika semua data dapat dilihat dalam satu halaman.

Penerapan

Table Survei dan Kuis

Dalam contoh ini, Pagination digunakan untuk mengelola tampilan data dalam tabel survei dan kuis, yang berisi daftar aktivitas survei beserta informasi penting seperti: judul, jenis, instansi penyelenggara, dan tanggal pelaksanaan.

Pagination ditempatkan di bagian bawah tabel untuk membantu pengguna menavigasi antar halaman data sambil mempertahankan konteks.

Spesifikasi