htmlcssjavascripttabeldataMenengah11 mnt baca

Tabel yang Bisa Di-sortir

Tabel data dengan header yang bisa diklik untuk mengurutkan naik/turun.

Kenapa Tabel Sortable?

Tabel statis hanya menampilkan data. Tabel sortable membuat data bisa dijelajahi: klik "Harga" untuk melihat termurah, klik lagi untuk termahal. Ini fitur standar di dashboard admin, laporan, dan spreadsheet web.

Langkah Membangun

HTML: <table> semantik: <thead> berisi <th> yang bisa diklik (tambah panah ↕ sebagai petunjuk), <tbody> akan diisi JS.

CSS: Tabel rapi: border-collapse: collapse, baris belang-belang (tr:nth-child(even)), header dengan background ungu dan cursor pointer, hover baris memberi highlight.

JS: Kuncinya: data disimpan sebagai array of object di JS, tabel hanya "tampilan" dari data itu.

  1. Fungsi render() membangun baris <tr> dari array data.
  2. Klik header: urutkan array dengan sort() berdasarkan kolom itu. Klik kedua membalik arah (toggle asc/desc).
  3. Update panah di header (↑/↓) dan render ulang.

array.sort((a, b) => a.harga - b.harga) untuk angka, a.nama.localeCompare(b.nama) untuk teks (mendukung huruf Indonesia dengan benar).

Prinsip Penting: Data vs Tampilan

Pemula sering mengurutkan elemen DOM langsung (memindahkan <tr>). Itu rapuh. Pola profesional: ubah DATANYA, lalu gambar ulang tampilannya. Prinsip ini dipakai di semua framework modern (React, Vue).

Kesalahan Umum

  • Mengurutkan angka sebagai teks sehingga 100 muncul sebelum 20 ("100" < "20" sebagai string).
  • Lupa mereset panah kolom lain saat kolom baru diklik.
  • Sort tidak stabil untuk data campuran (pisahkan logika angka vs teks).
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Pencarian + Sortir

Tambahkan input pencarian di atas tabel yang memfilter baris berdasarkan nama produk, dan tetap bisa dikombinasikan dengan sortir kolom.