COMPONENT / DATA-DISPLAY
Data Table.
Klik judul kolom untuk mengurutkan baris yang sudah ada di browser.
Preview
| Website | 12 |
| API | 3 |
| Dashboard | 24 |
PHP view
<?= component('data-table', ['columns' => ['Project', 'Tasks'], 'rows' => [['Website', 12], ['API', 3], ['Dashboard', 24]], 'caption' => 'Click a column to sort']) ?>Usage
Klik judul kolom untuk mengurutkan baris yang sudah ada di browser. Tidak ada pagination, fetch atau sorting database otomatis.
- Gunakan layout DL yang sudah memuat CSS dan dl.js.
- Letakkan kode berikut di view PHP Anda.
- Ganti data contoh dengan nilai aplikasi. Teks di-escape otomatis.
PHP view
<?= component('data-table', ['columns' => ['Project', 'Tasks'], 'rows' => [['Website', 12], ['API', 3], ['Dashboard', 24]], 'caption' => 'Click a column to sort']) ?>API reference
Props PHP yang didukung implementasi DL. Field di dalam array mengikuti bentuk pada kolom Type. Props yang tidak dicantumkan tidak menjadi bagian API komponen.
| Prop | Type / values | Panduan |
|---|---|---|
columns | string[] | Daftar label header sesuai urutan kolom. |
rows | array<array<string|number>> | Daftar baris; setiap baris berisi nilai sel sesuai columns. |
caption | string | Judul atau penjelasan tabel. |
Behavior & accessibility
Header berupa tombol; aria-sort diperbarui. Tanpa JavaScript urutan awal tetap terbaca.
Uji keyboard, fokus, dan pembaca layar pada halaman aplikasi Anda. Contoh ini tidak menggantikan audit aksesibilitas aplikasi secara menyeluruh.
Source & agent context
Source tersedia di views/components/data-table.php. Edit template ini jika membutuhkan perilaku tambahan. API PHP DL berbeda dari API React sumber rujukan.
Terminal
php dl component data-table