Table

Anatomi

Jenis dan variasi

Plain (Optimizing interaction) or Stripes (Optimizing read-only feature)

Gunakan Table plain ketika ada interaksi spesifik yang dilakukan pada Table tersebut dan berimbas pada perubahan interface Table karena sifat datanya yang dinamis (contoh: Table dengan fungsi checklist untuk melakukan perubahan). Gunakan Table striped ketika tidak ada interaksi spesifik yang merubah interface Table, dan sifat datanya cenderung banyak dan statis (contoh: Table tanpa checklist).

Selection

Beberapa Table memungkinkan pengguna untuk memilih baris, yang kemudian dapat digunakan untuk mengambil tindakan. Jika sebuah Table memiliki baris yang dapat dipilih, maka Table tersebut harus memiliki checkboxes di sebelah kiri Table.

Semua Table memiliki status hover, terlepas dari apakah tindakan atau pemilihan dapat dilakukan. Hal ini membantu pengguna dalam melihat konten pada satu baris secara lebih jelas.

Behaviors

Text overflow

Di setiap cell, maksimal baris kalimat yang dapat diperlihatkan adalah 2 baris di perangkat desktop dan 3 baris untuk perangkat mobile untuk memastikan kemudahan keterbacaan. Melebihi itu, gunakan truncate atau scrollable table (hanya untuk mobile).

Panduan penggunaan

Selain sifatnya yang statis dan interaktif, Table adalah elemen yang dinamis dalam tampilannya baik di dalam aplikasi mobile maupun desktop.

Table di perangkat mobile/App (Fit dan Scrollable)

Dalam desain untuk perangkat mobile, komponen Table dapat dibagi menjadi dua jenis utama berdasarkan cara Table ditampilkan di layar: Fit dan Scrollable.

• Fit
  
  Table jenis fit dirancang agar seluruh isi Table dapat ditampilkan secara utuh dalam lebar layar perangkat tanpa perlu digeser (scroll). Fit cocok untuk Table dengan jumlah kolom yang sedikit atau data yang sederhana sehingga dapat dengan mudah terbaca tanpa kehilangan konteks.

  • Keunggulan:

    • Memastikan semua data langsung terlihat tanpa interaksi tambahan.
    • Menawarkan pengalaman yang lebih intuitif, terutama untuk informasi yang bersifat ringkas.

  • Batasan:
    Tidak cocok untuk data kompleks atau Table dengan banyak kolom karena akan memaksa teks atau elemen menjadi terlalu kecil dan sulit dibaca.

  • Variasi:
    Terdapat 3 variasi Table Fit sesuai dengan ukuran penggunaannya, yaitu: Small, Medium, dan Large.

• Scrollable
  Table jenis scrollable memungkinkan pengguna menggulir secara horizontal untuk melihat data pada kolom yang tidak cukup dimuat di layar. Scrollable ideal untuk Table dengan banyak kolom atau data kompleks yang memerlukan lebih banyak ruang daripada lebar layar perangkat.

  • Keunggulan:
    • Menjaga ukuran teks dan elemen tetap proporsional sehingga lebih mudah dibaca.
    • Fleksibilitas untuk menampilkan data yang lebih kaya tanpa mempengaruhi tata letak.
  • Batasan:
    • Membutuhkan interaksi tambahan untuk mengakses semua data, yang dapat memperlambat pengalaman pengguna.
    • Potensi kehilangan konteks jika tidak ada penanda atau "sticky column" sebagai referensi.

Rata kiri untuk data teks

Seperti halnya paragraf teks, data teks dalam Table selalu di rata kiri. Jangan pernah menggunakan perataan tengah.

Perhatikan perataan vertikal

Semua konten dalam Table harus rata secara vertikal di tengah baris/row untuk memastikan keseimbangan visual yang tepat.

Gunakan en dash (–) untuk values yang hilang

Saat terdapat celah dalam data, gunakan en dash (–) untuk mewakili nilai yang kosong atau tidak berlaku.

Hindari varian Stripe untuk Table yang interaktif

Banyaknya variasi warna karena interaction states dalam Table interaktif dapat membingungkan pengguna di dalam Table Stripe.

Panduan penulisan

Gunakan title case untuk judul dan isi column

Maksimal 2-3 kata untuk memudahkan pemahaman pengguna terhadap data set dalam kolom yang dimaksud. Serta hindari tanda titik “.” di akhir kalimat.

Singkat dan jelas

Maksimal 2-3 kata untuk memudahkan pemahaman pengguna terhadap data set dalam kolom yang dimaksud.