Table

Tabel data dashboard dengan pencarian per kolom, sorting, selection, loading, tampilan kosong, dan ruang aksi per baris.

Dasar

Definisikan kolom sekali, lalu berikan daftar objek pada rows. Slot #cell-[key] dapat menampilkan badge, tautan, avatar, atau isi khusus lainnya.

ID	Lokasi	Jadwal	Status
PU-0042	Kantor Bekasi	21 Sep 2026, 09.00	Terjadwal
PU-0043	Gudang Cakung	21 Sep 2026, 13.30	Berjalan
PU-0044	Pabrik Karawang	22 Sep 2026, 10.00	Selesai

Sorting

Kolom sortable berputar dari menaik, menurun, lalu kembali ke urutan asli. Secara default data diurutkan lokal. Aktifkan manual-sort dan tangani @sort-change untuk API server.


Plastik PET	125 kg	Rp 437.500
Kardus	80 kg	Rp 144.000
Aluminium	24 kg	Rp 408.000
Kaca	210 kg	Rp 126.000

Urutan asli digunakan.

Filter dan pencarian

Tambahkan search: true pada kolom untuk pencarian teks. Konfigurasi type: 'select' atau type: 'date' memakai kontrol W4C yang sesuai. Secara default hasil disaring lokal. Untuk API server, aktifkan manual-filter dan tangani @filter-change; event ini sudah memiliki debounce 300 ms.

ID	Lokasi	Status	Tanggal

PU-0042	Kantor Bekasi	Terjadwal	23/9/2026
PU-0043	Gudang Cakung	Berjalan	23/9/2026
PU-0044	Pabrik Karawang	Selesai	24/9/2026

Belum ada filter.

Kolom yang tertahan

freeze menahan sejumlah kolom pertama di tempatnya saat tabelnya digulir ke samping, jadi kolom pengenal barisnya tetap terbaca sejauh apa pun geserannya. freeze-actions melakukan hal yang sama untuk kolom aksi di tepi kanan.

Handle urutan dan kotak pilih ikut tertahan bersama kolom pertama — membiarkan keduanya tergulir sementara kolom pertama tetap akan terbaca sebagai kesalahan, bukan pilihan. Garis pemisahnya hanya muncul ketika memang ada yang lewat di bawahnya, jadi tabel yang belum digulir tidak memakai garis yang tidak berarti apa-apa.

Dua batas yang perlu diketahui. Kolom yang tertahan harus berurutan dari tepi: freeze adalah jumlah, bukan daftar, karena kolom di tengah tidak punya tepi untuk menempel. Dan jangan menahan lebih banyak dari yang muat — kalau kolom tertahan memenuhi wadahnya, tidak ada ruang tersisa untuk digulir.

Kode	Pelanggan	Kota	Armada	Petugas	Jadwal	Berat	Status
PK-1041	Kantor Pusat Sudirman	Jakarta	B 9021 XZ	Dwi Cahyono	02 Okt 2026	1.240 kg	Selesai
PK-1042	Gudang Cakung	Jakarta	B 7744 KM	Rina Puspita	02 Okt 2026	860 kg	Diproses
PK-1043	Pabrik Karawang 2	Karawang	B 1180 QT	Agus Riyanto	03 Okt 2026	2.310 kg	Dijadwalkan
PK-1044	Hotel Kuta Selatan	Badung	DK 4410 AB	Made Sukerta	04 Okt 2026	540 kg	Dijadwalkan

Belum ada aksi yang dipilih.

Pilih baris

Gunakan selectable dan v-model:selected. Checkbox header otomatis menampilkan status sebagian terpilih dan melewati baris yang dinonaktifkan.

ID	Lokasi	Status
PU-0042	Kantor Bekasi	Terjadwal
PU-0043	Gudang Cakung	Berjalan
PU-0044	Pabrik Karawang	Dibatalkan

Terpilih: PU-0042

Ubah urutan baris

Aktifkan draggable dan hubungkan v-model:rows. Handle memakai perilaku W4cDraggable yang sama untuk mouse, sentuhan, dan keyboard. Reorder dinonaktifkan ketika sorting kolom aktif karena urutan visual sedang ditentukan oleh sorting.

Prioritas	Lokasi	Jadwal
1	Kantor Bekasi PU-0042	09.00
2	Gudang Cakung PU-0043	10.30
3	Pabrik Karawang PU-0044	13.00

Prioritas

Lokasi

Jadwal

Kantor Bekasi

PU-0042

09.00

Gudang Cakung

PU-0043

10.30

Pabrik Karawang

PU-0044

13.00

Tarik handle atau gunakan keyboard untuk mengubah prioritas.

Aksi per baris

Slot #actions menambahkan kolom khusus di ujung. Untuk banyak aksi, gunakan W4cDropdownMenu agar tabel tetap ringkas.

ID	Lokasi	Pelanggan	Aksi
PU-0042	Bekasi	PT Sejahtera
PU-0043	Jakarta Timur	CV Bersih

Belum ada aksi yang dipilih.

Loading dan kosong

State loading mempertahankan header dan bentuk tabel melalui skeleton. Ketika data kosong, pesan menggunakan W4cEmptyState dan dapat diganti seluruhnya melalui slot.

Loading

Tampilkan loading

ID	Lokasi	Status
Memuat data

Kosong

ID	Lokasi	Status
Pickup tidak ditemukan Ubah filter atau tambahkan jadwal pickup baru.

API

Props

Prop	Tipe	Default	Keterangan
columns	W4cTableColumn[]	[]	Definisi kolom yang ditampilkan.
rows	Record<string, unknown>[]	[]	Daftar objek data untuk baris tabel.
rowKey	string \| (row, index) => string \| number	'id'	Properti atau fungsi yang menghasilkan kunci stabil tiap baris.
selected	(string \| number)[]	[]	Kunci baris terpilih, mendukung v-model:selected.
sort	W4cTableSort	undefined	Status urutan aktif, mendukung v-model:sort.
defaultSort	W4cTableSort	undefined	Urutan awal untuk penggunaan tanpa v-model.
filters	W4cTableFilters	{}	Nilai filter per key kolom, mendukung v-model:filters.
defaultFilters	W4cTableFilters	{}	Filter awal untuk penggunaan tanpa v-model.
manualFilter	boolean	false	Mengirim perubahan filter tanpa menyaring rows; gunakan untuk data server.
filterDebounce	number	300	Jeda event filterChange setelah pengguna berhenti mengetik.
selectable	boolean	false	Menampilkan checkbox pilihan per baris dan pilih-semua.
draggable	boolean	false	Menampilkan handle untuk mengubah urutan baris.
dragHandleLabel	string	'Ubah urutan baris'	Awalan nama aksesibel tombol drag handle.
dragDisabled	(row, index) => boolean	undefined	Mencegah baris tertentu dipindahkan.
manualSort	boolean	false	Hanya mengirim perubahan sort tanpa mengurutkan rows; gunakan untuk data server.
loading	boolean	false	Mengganti isi tabel dengan skeleton loading.
loadingRows	number	5	Jumlah baris skeleton.
emptyTitle	string	'Belum ada data'	Judul tampilan kosong.
emptyDescription	string	undefined	Penjelasan pada tampilan kosong.
emptyIcon	string \| false	'lucide:inbox'	Ikon Iconify tampilan kosong; false menyembunyikannya.
size	'sm' \| 'md' \| 'lg'	'md'	Kepadatan tinggi header dan baris.
variant	'bordered' \| 'plain'	'bordered'	Tabel berbingkai atau menyatu dengan wadah induk.
striped	boolean	false	Memberi latar bergantian pada baris.
hoverable	boolean	true	Menandai baris yang sedang ditunjuk.
stickyHeader	boolean	false	Menahan header di atas ketika wadah tabel digulir.
freeze	number	0	Jumlah kolom pertama yang tertahan saat tabel digulir ke samping. Handle urutan dan kotak pilih ikut tertahan bersamanya.
freezeActions	boolean	false	Menahan kolom aksi di tepi kanan.
minWidth	number \| string	640	Lebar minimum sebelum wadah tabel menggulir horizontal.
selectionLabel	string	'Pilih baris'	Awalan nama aksesibel checkbox selection.
actionsLabel	string	'Aksi'	Nama aksesibel kolom aksi.
rowDisabled	(row, index) => boolean	undefined	Menonaktifkan pemilihan baris tertentu.
rowLabel	(row, index) => string	row key	Nama baris yang dibacakan pada checkbox selection.

W4cTableColumn

Prop	Tipe	Default	Keterangan
key	string	wajib	Kunci unik kolom dan path nilai bawaan; path bertingkat seperti customer.name didukung.
label	string	wajib	Judul kolom.
sortable	boolean	false	Mengubah header menjadi tombol sorting tiga keadaan.
align	'start' \| 'center' \| 'end'	'start'	Perataan header dan isi kolom.
width	number \| string	undefined	Lebar CSS kolom; angka dianggap piksel.
getValue	(row, index) => unknown	undefined	Mengambil nilai sel secara kustom.
format	(value, row, index) => unknown	undefined	Memformat renderer teks bawaan.
sortValue	(row, index) => unknown	undefined	Nilai pembanding khusus untuk sorting lokal.
search	boolean \| W4cTableSearch	false	Menampilkan pencarian teks, select, atau tanggal di bawah judul kolom.

W4cTableSearch

Prop	Tipe	Default	Keterangan
type	'text' \| 'select' \| 'date'	'text'	Jenis kontrol pada baris filter.
placeholder	string	otomatis dari label	Petunjuk singkat di dalam kontrol.
options	W4cFormSelectItem[]	[]	Pilihan untuk type select.
searchable	boolean	false	Mengaktifkan pencarian di dalam select.
multiple	boolean	false	Mengizinkan beberapa nilai pada select.
range	boolean	false	Mengubah filter tanggal menjadi rentang inklusif.
min / max	string	undefined	Batas tanggal YYYY-MM-DD.
disabled	boolean	false	Menonaktifkan kontrol filter kolom.
match	(cellValue, searchValue, row, index) => boolean	undefined	Pencocokan lokal khusus untuk kebutuhan kolom.

Slots

Slot	Tipe	Default	Keterangan
caption	—	—	Caption tabel yang terlihat.
header	{ column }	—	Isi bawaan semua header.
header-[key]	{ column }	—	Isi header untuk satu kolom.
search	{ column, value, update }	—	Mengganti kontrol pencarian bawaan semua kolom.
search-[key]	{ column, value, update }	—	Mengganti kontrol pencarian pada satu kolom.
cell	{ column, row, value, index }	—	Isi bawaan semua sel.
cell-[key]	{ column, row, value, index }	—	Isi sel untuk satu kolom, misalnya badge status.
actions	{ row, index }	—	Menambahkan kolom aksi di ujung tabel.
loading	—	—	Mengganti baris skeleton bawaan.
empty	—	—	Mengganti W4cEmptyState bawaan.

Events

Event	Tipe	Default	Keterangan
update:filters	(filters: W4cTableFilters) => void	—	Nilai langsung untuk v-model:filters pada setiap perubahan.
filterChange	(filters: W4cTableFilters) => void	—	Perubahan filter setelah filterDebounce, cocok untuk memuat data server.
update:rows	(rows: W4cTableRow[]) => void	—	Array baris baru untuk v-model:rows setelah reorder.
reorder	({ item, oldIndex, newIndex, items }) => void	—	Detail baris yang selesai dipindahkan.
update:selected	(keys: W4cTableKey[]) => void	—	Dipicu ketika pilihan berubah.
selectionChange	(keys: W4cTableKey[]) => void	—	Alias event perubahan pilihan untuk handler biasa.
update:sort	(sort?: W4cTableSort) => void	—	Dipicu ketika urutan berubah.
sortChange	(sort?: W4cTableSort) => void	—	Alias event sorting untuk memuat data server.
rowClick	(row, index, event) => void	—	Dipicu saat area noninteraktif pada baris diklik.