Table Cell

Table Cell berfungsi menampilkan data atau konten di dalam tabel dengan format yang konsisten dan mudah dibaca. Komponen ini fleksibel dan dapat berisi berbagai elemen UI seperti teks, ikon, status, tombol aksi, atau indikator progres sesuai kebutuhan konteks tabel.

Penggunaan

Gunakan Table Cell untuk menyajikan informasi secara terstruktur dan mudah dipindai. Komponen ini menampilkan data baris per baris agar pengguna bisa memahami isi tabel dengan cepat tanpa kehilangan konteks. Silakan gunakan komponen ini ketika data perlu ditampilkan secara konsisten, setiap baris memiliki tipe konten berbeda, atau dibutuhkan fleksibilitas dalam menambahkan informasi tambahan di dalam tabel.

Kategori

Text Cell

Menampilkan informasi berbasis teks seperti judul, nama pengguna, atau deskripsi singkat. Biasanya terdiri dari title dan subtext

Input Cell

Berisi input field di dalam tabel, memungkinkan pengguna mengedit data langsung di baris tabel. Dapat berisi placeholder atau editable text field.

Dropdown Cell

Berisi elemen dropdown untuk memilih satu opsi dari daftar. Membantu pengguna menetapkan status, kategori, atau jenis data di dalam tabel.

Icon Action Cell

Berisi sekumpulan ikon yang mewakili aksi cepat terhadap suatu data, seperti edit, kirim, hapus. Ikon biasanya menggunakan ukuran 20px dan disusun dengan jarak yang konsisten.

Status Cell

Menampilkan status atau hasil tertentu dalam format label (chip). Biasanya menggunakan warna semantik.

Button Cell

Berisi satu atau lebih tombol aksi. Ukuran tombol mengikuti Button Medium (32px height) agar tetap proporsional dengan tinggi baris tabel.

Value Cell

Digunakan untuk menampilkan nilai numerik, harga, atau jumlah. Nilai umumnya dilengkapi dengan simbol mata uang atau satuan tambahan.

Checkbox Cell

Berfungsi untuk memilih satu atau beberapa baris di dalam tabel. Biasanya ditempatkan di kolom pertama.

Progress Cell

Menampilkan status progres dalam bentuk visual seperti progress bar atau indikator persentase. Cocok digunakan untuk memantau status penyelesaian suatu item.

Menu Cell

Berisi ikon menu (⋮) yang menampilkan opsi lanjutan saat diklik. Biasanya diletakkan di kolom paling kanan tabel.

Cara Penggunaan yang Disarankan

Max Height

•Setiap Table Cell memiliki tinggi maksimum 80px.
•Gunakan tinggi default (40px) untuk satu baris teks.
•Tinggi dapat ditingkatkan hingga max 80px jika konten memiliki subtext, elemen tambahan, atau multi-line text.

Icon Action Cell

•Maksimum 3 ikon aksi dalam satu cell.
•Gunakan ikon 20x20px dengan jarak antar ikon 16px.
•Hindari ikon dengan fungsi serupa; prioritaskan aksi utama seperti Edit dan Delete.
•Gunakan tooltip label untuk menjelaskan fungsi ikon.

Button Cell

•Maksimum 2 tombol per cell
•Gunakan Button Medium (32px height) agar selaras dengan tinggi baris.
•Jika terdapat lebih dari 2 aksi, pindahkan ke ke bab menu (⋮) untuk menjaga kerapian tampilan.

✅ Disarankan

Disarankan Gunakan jarak antar sel yang konsisten agar tampilan tabel tetap rapi dan mudah dibaca.

❌ Dihindari

Hindari rata kiri untuk nilai numerik.

✅ Disarankan

Gunakan varian status di table cell untuk merepresentasikan kondisi data dengan jelas. Ini memudahkan pengguna mengenali status seperti Success, Warning, atau Error melalui warna dan label standar.

❌ Dihindari

Hindari penggunaan warna latar pada seluruh baris tabel untuk menandai status, karena dapat mengurangi keterbacaan dan menciptakan kesan visual yang tidak seimbang.

Contoh Penggunaan

Halaman Pengumuman

Halaman ini berfungsi sebagai pusat pengelolaan semua pengumuman dari admin maupun sistem.

Pengguna dapat dengan mudah mencari, memfilter, dan membuat pengumuman baru melalui elemen interaktif seperti search bar, dropdown filter, dan tombol aksi utama.

Bagian tabel menampilkan detail informasi seperti judul pengumuman, tanggal publikasi, tipe notifikasi, dan status, membantu pengguna memantau seluruh aktivitas komunikasi dengan lebih efisien dalam satu tampilan terpadu.

Spesifikasi