Notifications
Mark all as read
Order Completed
Your order #1234 has been completed successfully
5 minutes ago
New Message
You have a new message from John Doe
10 minutes ago
Storage Warning
Your storage is almost full (90% used)
1 hour ago
New User Registered
Sarah Wilson just joined your team
2 hours ago
Payment Failed
Payment for invoice #5678 failed
Yesterday
View all notifications

Basic Table

Contoh tabel dasar dengan styling tema
Struktur tabel
Gunakan header jelas dan urutkan kolom penting di kiri.
Header singkat & konsisten, hindari paragraf panjang.
Gunakan zebra/garis halus untuk memudahkan pemindaian.
Interaksi pengguna
Tampilkan aksi konsisten di area kanan.
  • Kelompokkan aksi sejenis (lihat, edit, hapus).
  • Gunakan ikon + tooltip untuk menghemat ruang.
  • Pertimbangkan mode kompak untuk daftar panjang.
Checklist aksesibilitas
Pastikan tabel nyaman dibaca semua pengguna.
  • Gunakan elemen <th scope="col"> dan scope="row".
  • Sediakan alternatif teks pada ikon aksi.
  • Berikan state fokus yang jelas untuk navigasi keyboard.
Tabel daftar pengguna

Header sticky, zebra row, dan badge status.

#ID User Email Role Status Actions
U-1021 Rizky Pratama rizky@example.com Admin Active
U-1022 Sarah Wibowo sarah@example.com Editor Invited
U-1023 Andi Saputra andi@example.com Viewer Suspended
HTML
<table class="table table-themed align-middle">...</table>
Inventory compact table

Mode ringkas dengan hover highlight dan sticky header opsional.

Product Category Price Stock Actions
Wireless Headset Audio Rp 799.000 In Stock
Running Shoes Sport Rp 589.000 Limited
LED Desk Lamp Home Rp 179.000 Sold Out
Simpan mode kompak untuk data padat; berikan opsi pengguna mengubah densitas.
HTML
<div class="form-check form-switch">...</div>
<table class="table table-themed table-hover table-compact">...</table>