Tabel

Untuk data tabular: anggota, bank soal, hasil kuis. Header menempel saat digulir, kolom angka rata kanan dengan angka tabular, dan kolom bisa diurutkan.

Tabel hasil kuis

data-ck-sortable mengaktifkan pengurutan. Kolom yang bisa diurut punya aria-sort.

Siswa	Kelas	Nilai	Waktu	Status
Andi Pratama	X IPA 1	92	38 mnt	Lulus
Rina Wijaya	X IPA 1	78	44 mnt	Lulus
Budi Santoso	X IPA 2	54	51 mnt	Belum lulus
Dewi Lestari	X IPA 2	—	—	Belum mulai

Klik judul kolom Nilai atau Waktu untuk mengurutkan — pengurutan angka otomatis dikenali.

Lihat kode

<div class="ck-table-wrap">
  <table class="ck-table" data-ck-sortable>
    <thead><tr>
      <th style="width:2.5rem"><input type="checkbox" data-ck-check-all="#tbl-hasil" aria-label="Pilih semua"></th>
      <th aria-sort="none">Siswa</th><th aria-sort="none">Kelas</th>
      <th aria-sort="none" class="ck-num">Nilai</th><th aria-sort="none" class="ck-num">Waktu</th><th>Status</th>
    </tr></thead>
    <tbody id="tbl-hasil">
      <tr><td><input type="checkbox" data-ck-row aria-label="Pilih baris"></td>
        <td><div class="ck-row ck-row-2"><span class="ck-avatar ck-avatar--sm" data-ck-avatar="Andi Pratama"><span></span></span> Andi Pratama</div></td>
        <td>X IPA 1</td><td class="ck-num">92</td><td class="ck-num">38 mnt</td><td><span class="ck-badge ck-badge--success">Lulus</span></td></tr>
      <tr><td><input type="checkbox" data-ck-row aria-label="Pilih baris"></td>
        <td><div class="ck-row ck-row-2"><span class="ck-avatar ck-avatar--sm" data-ck-avatar="Rina Wijaya"><span></span></span> Rina Wijaya</div></td>
        <td>X IPA 1</td><td class="ck-num">78</td><td class="ck-num">44 mnt</td><td><span class="ck-badge ck-badge--success">Lulus</span></td></tr>
      <tr><td><input type="checkbox" data-ck-row aria-label="Pilih baris"></td>
        <td><div class="ck-row ck-row-2"><span class="ck-avatar ck-avatar--sm" data-ck-avatar="Budi Santoso"><span></span></span> Budi Santoso</div></td>
        <td>X IPA 2</td><td class="ck-num">54</td><td class="ck-num">51 mnt</td><td><span class="ck-badge ck-badge--destructive">Belum lulus</span></td></tr>
      <tr><td><input type="checkbox" data-ck-row aria-label="Pilih baris"></td>
        <td><div class="ck-row ck-row-2"><span class="ck-avatar ck-avatar--sm" data-ck-avatar="Dewi Lestari"><span></span></span> Dewi Lestari</div></td>
        <td>X IPA 2</td><td class="ck-num">—</td><td class="ck-num">—</td><td><span class="ck-badge ck-badge--warning">Belum mulai</span></td></tr>
    </tbody>
  </table>
</div>

Tabel padat dengan baris kosong

ck-table--compact mengurangi jarak untuk daftar panjang.

Paket soal	Mapel	Jumlah	Dipakai
Aljabar Dasar	Matematika	40	12
Kinematika	Fisika	35	8
Redoks	Kimia	28	5

Lihat kode

<div class="ck-table-wrap">
  <table class="ck-table ck-table--compact ck-table--zebra">
    <thead><tr><th>Paket soal</th><th>Mapel</th><th class="ck-num">Jumlah</th><th class="ck-num">Dipakai</th></tr></thead>
    <tbody>
      <tr><td>Aljabar Dasar</td><td>Matematika</td><td class="ck-num">40</td><td class="ck-num">12</td></tr>
      <tr><td>Kinematika</td><td>Fisika</td><td class="ck-num">35</td><td class="ck-num">8</td></tr>
      <tr><td>Redoks</td><td>Kimia</td><td class="ck-num">28</td><td class="ck-num">5</td></tr>
    </tbody>
  </table>
</div>