Lompat ke isi
CirccaHIG

Komponen / Tampilan data

DataTable

Tabel ERP untuk daftar dokumen (PO, invoice) dan tabel item dokumen: angka rata kanan, urut, seleksi baris, sel editable, pohon, baris total, keadaan kosong & memuat, dan paginasi.
React · BetaFigma · siapFigmaSumber

Kapan dipakai

Gunakan

  • Rata kanankan angka dan nominal (type: "number") agar digit sejajar dan mudah dibandingkan; sebut mata uang di judul kolom.
  • Jadikan kolom pengenal (No. PO, No. invoice) tautan ke detail — itu jalan utama pengguna keyboard.
  • Batasi daftar ±7 kolom yang dipakai untuk memindai dan memutuskan; rincian lain di halaman detail.
  • Satu aksi baris paling sering (atau menu "Aksi lain") di kolom actions; aksi massal di bar seleksi di atas tabel.
  • Pakai baris total untuk tabel item dokumen; ringkasan pajak/diskon memakai TotalsSummary di bawahnya.

Hindari

  • Jangan menaruh banyak tombol di setiap baris — tabel jadi berisik dan sulit dipindai.
  • Jangan memformat uang rata kiri atau dengan jumlah desimal berbeda per baris.
  • Jangan menyingkat isi sel dengan elipsis untuk nilai penting (nomor dokumen, nominal) — beri kolom lebar yang cukup.
  • Jangan mengandalkan klik baris saja tanpa tautan/tombol yang bisa dicapai keyboard.
  • Jangan menampilkan "0" atau tabel kosong tanpa penjelasan — pakai EmptyState dengan jalan keluar.

Contoh benar & salah

No. PONilai (Rp)
PO-0148285.000.000
PO-014796.500.000
PO-014645.000.000
GunakanNominal rata kanan dengan tabular-nums sehingga digit sejajar.
No. PONilai (Rp)
PO-0148285.000.000
PO-014796.500.000
PO-014645.000.000
HindariNominal rata kiri — besaran sulit dibandingkan.
No. POStatusAksi
PO-0148Diproses
PO-0147Terbit
GunakanSatu menu "Aksi lain" per baris; status sebagai StateLabel.
No. POAksi
PO-0148
PO-0147
HindariTiga tombol bertulisan di setiap baris.

Penulisan

  • Judul kolom singkat, kapitalisasi kalimat, tanpa huruf kapital semua: "No. PO", "Nilai (Rp)", "Jatuh tempo".
  • Nominal di sel ditulis penuh tanpa simbol bila mata uang sudah di judul kolom ("Nilai (Rp)" → 45.000.000); baris total memakai formatMoney ("Rp 45.000.000").
  • Tanggal memakai formatDate gaya short: "13 Sep 2026".
  • Sel kosong ditulis "—", bukan dibiarkan kosong atau "0".
  • Label tambah baris berupa kata kerja + objek: "Tambah item", "Tambah termin".

Komponen terkait

Esc
↑↓ pilih↵ buka12 hasil