Daftar & filter

Contoh

Pencarian, saringan cepat, filter lanjutan di dalam Popover, tabel, dan pagination — semuanya dengan state milik halaman. Contoh ini menyaring di sisi klien; untuk data dari server, lihat bagian di bawah.

Susunannya

• Pencarian di kiri, saringan cepat di tengah, jumlah hasil di kanan. Jumlah hasil ditulis di role="status" supaya perubahannya ikut dibacakan.
• Saringan yang paling sering dipakai terlihat langsung sebagai SegmentedControl. Sisanya masuk Popover, supaya baris filter tidak melebar melebihi tabelnya.
• Kolom pertama adalah tautan ke detail. Tautan sungguhan, jadi klik tengah dan “buka di tab baru” bekerja — jangan memakai @click pada barisnya saja.
• Pagination hanya muncul kalau perlu. Dengan hasil yang lebih sedikit dari satu halaman, barisnya tidak digambar.
• Halaman kembali ke 1 setiap kali filternya berubah. Tanpa itu, orang berhenti di halaman 4 yang sudah tidak ada isinya dan menyimpulkan datanya hilang.

Dua macam kosong

Tabel kosong karena belum ada data berbeda dari kosong karena filternya terlalu sempit. Yang pertama menawarkan cara membuat data pertama; yang kedua menawarkan membersihkan filter. Slot #empty pada Table dipakai untuk kasus kedua, dan emptyTitle bawaannya untuk yang pertama.

Kalau datanya dari server

Semua komponen di sini bisa dipakai tanpa menyaring apa pun sendiri:

• manualFilter dan manualSort pada Table membuatnya mengirim event saja dan mempertahankan urutan baris yang diberikan.
• Pagination punya mode cursor untuk API yang memberi token next/previous, selain mode nomor halaman dengan total.
• loading pada Table menggambar baris placeholder dengan jumlah yang sama seperti halaman sebelumnya, jadi tinggi halaman tidak melompat saat data berganti.