Tahukah Anda bahwa HTML Table juga punya API?

 (christianheilmann.com)
13 poin oleh GN⁺ 2025-11-02 | 2 komentar | Bagikan ke WhatsApp
  • API HTMLTableElement sudah ada sejak lama, tetapi hampir tidak pernah digunakan sebagai antarmuka bawaan untuk memanipulasi tabel HTML
  • Dengan API ini, Anda dapat langsung membuat dan mengakses tbody, thead, tfoot, caption, row, cell, dan lainnya, tanpa perlu me-render ulang seluruh tabel saat ada perubahan
  • Contoh kode menunjukkan cara mengubah data array bertingkat menjadi tabel dan menambahkan baris serta sel melalui insertRow() dan insertCell()
  • Berbagai manipulasi dimungkinkan, seperti mengakses sel berdasarkan indeks seperti t.rows[1].cells[1], atau menambahkan baris terakhir dengan insertRow(-1)
  • Penulis menyebut API ini memiliki potensi perluasan fungsi tabel sebagai struktur data, dan ada ruang untuk menambahkan event atau fitur ekstra seperti pada form

Ikhtisar API tabel HTML

  • Kebanyakan developer membuat tabel dengan metode DOM (createElement dan sejenisnya) atau menyisipkan string innerHTML, tetapi cara kedua memiliki risiko keamanan
  • HTML memiliki API HTMLTableElement lama yang memungkinkan penanganan body, row, cell, header, footer, caption, summary dari tabel
  • API ini memungkinkan manipulasi elemen individual tanpa me-render ulang seluruh tabel

Contoh kode: membuat tabel dari array

  • Contoh ini mengubah array bertingkat berikut menjadi tabel
    • [['one','two','three'], ['four','five','six']]
  • Tabel dibuat dengan document.createElement('table'), lalu setiap baris (insertRow) dan sel (insertCell) ditambahkan melalui perulangan
  • Isi tiap sel ditetapkan dengan innerText

Mengakses dan mengubah sel

  • Sel pada tabel yang sudah dibuat dapat diakses berdasarkan indeks
    • Contoh: t.rows[1].cells[1] → <td>five</td>
    Iklan
  • Baris dan sel juga bisa dihapus atau ditambahkan
    • Contoh: t.insertRow(-1) untuk menambahkan baris di akhir
    • Buat sel baru dengan t.rows[2].insertCell(0), lalu isi nilainya dengan innerText = 'foo'

Keterbatasan API

  • Ada aturan indeks yang tidak intuitif, seperti insertRow(-1)
  • Tidak ada cara untuk langsung membuat elemen TH, sehingga semua sel diperlakukan sebagai TD

Potensi pengembangan ke depan

  • Penulis menyoroti kenyataan bahwa membuat tabel masih terasa merepotkan, dan mengusulkan peninjauan ulang API ini untuk memperluas fungsinya
  • Seperti HTML form yang mendapat tambahan formData atau event change, tabel juga bisa diberi event atau fitur tingkat lanjut
  • Dengan begitu, tabel dapat memiliki posisi bukan sekadar alat layout, tetapi sebagai struktur data

Bacaan terkait

2 komentar

 
sonnet 2025-11-04

Sebagai pengembang yang pengalamannya relatif masih sedikit, saya merasa heran melihat tulisan yang membicarakan API yang sudah digunakan sejak awal seolah-olah baru saja "ditemukan".
 
GN⁺ 2025-11-02
Komentar Hacker News

  • Sepertinya banyak orang tidak membaca artikelnya dengan benar Inti tulisan ini bukan tag `` itu sendiri, melainkan antarmuka DOM khusus untuk table Misalnya, metode seperti HTMLTableElement.prototype.insertRow() atau HTMLTableRowElement.prototype.insertCell() lebih intuitif daripada createElement() atau appendChild() Namun, di UI berbasis library seperti React, Svelte, dan Vue, metode seperti ini hampir tidak lagi digunakan Menarik bahwa seperti sintaks HTML, thead, tbody, dan tfoot bisa dihilangkan dan tetap ditangani secara otomatis Dalam 5 tahun terakhir, saya pernah langsung memakai .insertRow, .insertCell, .createTHead, .rows, dan .cells di skrip demo Dari sisi gaya kode, saya rasa memakai for alih-alih forEach, dan menghilangkan argumen indeks, terlihat lebih rapi

    • Sekarang framework terlalu banyak menggantikan manipulasi DOM dasar, jadi rasanya makin jarang orang yang memahami dasar-dasar seperti ini Saya jadi teringat saat membaca artikel C|net ketika tag `` pertama kali ditambahkan. Sepertinya saya memang sudah cukup tua sekarang

  • Saya ingat pernah memakai API ini sekitar setengah tahun lalu, entah setelah melihat dokumentasi MDN atau karena direkomendasikan AI Properti rows dan cells sangat praktis untuk mengimplementasikan navigasi keyboard Contoh terkait bisa dilihat di kode ClickHouse

    • Hal yang paling disayangkan di web modern adalah orang yang membuat tabel dengan div Tidak bisa diurutkan, dan terutama ada banyak contoh implementasi tabel yang berantakan seperti M365 Admin

  • Ini mirip dengan pembahasan tentang tombol (thread sebelumnya) Sejak sekitar 10~15 tahun lalu, semuanya berubah menjadi ``, sehingga HTML dipakai seperti kotak peralatan UI alih-alih markup semantik

    • Itu karena DOM pada dasarnya dipakai bukan sebagai dokumen semantik, melainkan sebagai target rendering HTML semantik adalah konsep yang bagus, tetapi secara realistis sulit diharapkan Selain itu, elemen semantik punya gaya bawaan, jadi para developer cenderung memilih yang netral Sebenarnya saya juga menganggap memisahkan dan `` sebagai kesalahan desain
    • Saya sudah memakai HTML lebih dari 20 tahun, tetapi menurut pengalaman saya, kebanyakan orang masih cukup baik dalam menggunakan tag yang bermakna Memang ada yang mengerjakan semuanya dengan div, tetapi untuk hal seperti tombol, umumnya tetap ditulis dengan benar
    • Saya rasa perubahan seperti ini memang tak terelakkan Sebagian besar konten web itu berorientasi pemasaran, jadi perusahaan ingin tampil sesuai bentuk yang mereka inginkan Kalau ada web DocBook terpisah untuk dokumentasi teknis, akan menarik jika pengguna bisa menerapkan gaya mereka sendiri

  • Saya pernah memakai API ini saat membuat alat untuk membandingkan gambar Stable Diffusion Karena baris dan kolomnya banyak, tabel harus sering dibuat ulang, tetapi pembaruan DOM lebih lambat dibanding cara membangunnya sekaligus sebagai string Mungkin karena setiap pemanggilan API langsung memperbarui DOM

  • Ada penjelasan bahwa “seluruh tabel tidak perlu dirender ulang”, tetapi sebenarnya metode DOM standar juga sudah bekerja seperti itu Meski begitu, tetap keren karena bisa mengurangi penelusuran DOM yang membosankan

    • Setelah melihat kode WebKit, secara internal logika yang sama tetap berjalan, jadi hampir tidak ada perbedaan performa

  • API form HTML juga perlu ditemukan kembali

  • Masalah tabel bukan mengisi datanya, melainkan tidak adanya fitur pencarian, pengurutan, dan pemfilteran

    • Saya penasaran dibandingkan dengan apa sampai bisa dibilang begitu Menurut saya tidak ada alasan kenapa fitur seperti itu tidak bisa diimplementasikan pada tabel juga

  • Saya tidak paham dengan pernyataan bahwa “API ini sudah ditinggalkan” Saya masih cukup sering memakainya saat membuat tabel HTML

    • Istilah ‘Abandonware’ aslinya dipakai dalam konteks lisensi, jadi judulnya agak berlebihan jika dipakai di sini Sepertinya penulis ingin mengatakan bahwa API ini adalah area lama yang masih punya ruang untuk dikembangkan Seperti API form, saya rasa tabel juga bisa ditambahkan fitur seperti pengurutan dan pemfilteran
    • Sekarang kebanyakan orang memakai framework UI deklaratif seperti React atau Svelte, jadi API DOM imperatif seperti ini makin menjadi area niche
    • Singkatnya, sekarang ini adalah era React

  • Kode contohnya menarik, tetapi nama variabelnya terlalu disingkat sehingga sulit dibaca Lebih baik memakai nama yang bermakna daripada b, t, r, c

    • Diskusi seperti ini pada akhirnya terasa seperti perdebatan bike-shedding, terlalu fokus pada hal-hal sepele
    • Dalam scope yang pendek, memakai nama variabel pendek itu wajar
    • Tetap saja, menurut saya nama variabel satu huruf adalah optimasi yang keliru Sebagai pengguna Haskell, saya sangat setuju dengan itu
    • Daripada nama pendek itu sendiri, pencampuran indeks seperti (ri, i) justru lebih membingungkan Kalau variabelnya punya peran mirip, panjang namanya juga sebaiknya konsisten
    • Baris seperti let b = document.body; sangat sulit dibaca Demi menghemat beberapa byte, malah beban kognitif yang bertambah