Tabel pintar tanpa plugin. Pencarian, sortir kolom, paginasi, dan pilih-baris semua berjalan dari
assets/js/app.js (fungsi DataTable) — cukup tambahkan atribut data-datatable,
data-sort, dan data-dt-search.
Daftar Pelanggan
| Nama pelanggan | Kota | Belanja | Order | Status | Aksi | ||
|---|---|---|---|---|---|---|---|
RSRani Setiawati |
rani@toko.id | Bandung | Rp 48.200.000 | 128 | Aktif | ||
BPBudi Prakoso |
budi@klien.id | Surabaya | Rp 31.500.000 | 94 | Aktif | ||
NMNadia Maharani |
nadia@retail.id | Depok | Rp 27.400.000 | 76 | Menunggu verifikasi | ||
ADAndi Dermawan |
andi@umkm.id | Makassar | Rp 19.850.000 | 61 | Nonaktif | ||
LSLina Susanti |
lina@korporat.id | Jakarta | Rp 88.500.000 | 212 | Pelanggan VIP | ||
HWHendra Wijaya |
hendra@distributor.id | Semarang | Rp 15.320.000 | 48 | Aktif | ||
MKMaya Kirana |
maya@toko.id | Yogyakarta | Rp 12.980.000 | 39 | Aktif | ||
RZRizky Saputra |
rizky@klien.id | Medan | Rp 9.740.000 | 27 | Aktif | ||
TWTirta Wibawa |
tirta@bisnis.id | Denpasar | Rp 7.860.000 | 19 | Nonaktif | ||
SASri Anggraeni |
sri@toko.id | Malang | Rp 6.150.000 | 14 | Menunggu verifikasi | ||
GPGita Puspita |
gita@umkm.id | Palembang | Rp 5.230.000 | 11 | Aktif | ||
BSBayu Setiadi |
bayu@bisnis.id | Bekasi | Rp 4.210.000 | 9 | Aktif |
Tabel sederhana (hover)
| # | Produk | Harga | Stok |
|---|---|---|---|
| 1 | Kopi Arabika 1kg | Rp 185.000 | 142 |
| 2 | Kopi Robusta 1kg | Rp 145.000 | 88 |
| 3 | Teh Melati 500g | Rp 65.000 | 12 |
| 4 | Susu Kental 370g | Rp 24.500 | 310 |
Tabel bergaris + kepala gelap
| Kode | Gudang | Kapasitas | Status |
|---|---|---|---|
| GD-01 | Jakarta Utara | 12.400 m³ | Normal |
| GD-02 | Surabaya Barat | 8.900 m³ | Normal |
| GD-03 | Medan Kota | 5.100 m³ | Hampir penuh |
| GD-04 | Makassar | 3.400 m³ | Perawatan |
Tabel kepala tetap (sticky head)
Geser ke bawah untuk melihat efeknya
Kepala tabel menempel di bawah header halaman
Gulir halaman — kepala tabel berhenti tepat di bawah header
| ID | Pelanggan | Kota | Nilai | Status |
|---|---|---|---|---|
| TRX-9000 | Pelanggan 1 | Kota 3 | Rp 1.200.000 | Lunas |
| TRX-9001 | Pelanggan 2 | Kota 4 | Rp 1.337.000 | Lunas |
| TRX-9002 | Pelanggan 3 | Kota 5 | Rp 1.474.000 | Lunas |
| TRX-9003 | Pelanggan 4 | Kota 6 | Rp 1.611.000 | Lunas |
| TRX-9004 | Pelanggan 5 | Kota 7 | Rp 1.748.000 | Lunas |
| TRX-9005 | Pelanggan 6 | Kota 8 | Rp 1.885.000 | Lunas |
| TRX-9006 | Pelanggan 7 | Kota 9 | Rp 2.022.000 | Lunas |
| TRX-9007 | Pelanggan 8 | Kota 10 | Rp 2.159.000 | Lunas |
| TRX-9008 | Pelanggan 9 | Kota 11 | Rp 2.296.000 | Lunas |
| TRX-9009 | Pelanggan 10 | Kota 12 | Rp 2.433.000 | Lunas |
| TRX-9010 | Pelanggan 11 | Kota 13 | Rp 2.570.000 | Lunas |
| TRX-9011 | Pelanggan 12 | Kota 14 | Rp 2.707.000 | Lunas |
| TRX-9012 | Pelanggan 13 | Kota 15 | Rp 2.844.000 | Lunas |
| TRX-9013 | Pelanggan 14 | Kota 16 | Rp 2.981.000 | Lunas |
| TRX-9014 | Pelanggan 15 | Kota 17 | Rp 3.118.000 | Lunas |
| TRX-9015 | Pelanggan 16 | Kota 18 | Rp 3.255.000 | Lunas |
| TRX-9016 | Pelanggan 17 | Kota 19 | Rp 3.392.000 | Lunas |
| TRX-9017 | Pelanggan 18 | Kota 20 | Rp 3.529.000 | Lunas |
| TRX-9018 | Pelanggan 19 | Kota 21 | Rp 3.666.000 | Lunas |
| TRX-9019 | Pelanggan 20 | Kota 22 | Rp 3.803.000 | Lunas |
| TRX-9020 | Pelanggan 21 | Kota 23 | Rp 3.940.000 | Lunas |
| TRX-9021 | Pelanggan 22 | Kota 24 | Rp 4.077.000 | Lunas |