Tolong Buat Judul Tabel Anda Tetap

Tolong buat judul tabel Anda tetap

• Di web, kita sering berhadapan dengan set data besar atau tata letak tabel.
• Masalah muncul saat mulai menggulir tabel yang memiliki ratusan baris.
• Ketika header tabel menghilang, pengguna sulit mengingat tiap kolom terkait dengan apa.

Header tetap

• Header tetap terlihat seperti sihir, tetapi implementasinya sangat mudah.
• Cukup tambahkan dua properti CSS ke thead:
  • position: sticky;
  • top: 0;
• Dengan tingkat dukungan global sekitar 96%, sticky didukung secara stabil di banyak browser.
• Ini juga membantu meningkatkan pengalaman pengguna.

Pendapat GN⁺

• Saat menangani tabel besar di situs web, memastikan pengguna tetap dapat melihat judul tabel dengan mudah saat mereka menggulir ke bawah sangat meningkatkan pengalaman pengguna.
• Fakta bahwa header tabel bisa dibuat tetap dengan mudah menggunakan properti CSS position: sticky; adalah informasi yang berguna bagi para pengembang web.
• Karena fitur ini didukung secara luas, pengembang web dapat mengetahui bahwa mereka bisa mengimplementasikannya secara stabil di berbagai browser.

[GN⁺]

Komentar Hacker News

• Header lengket (sticky headers) pada satu sumbu memang memungkinkan, tetapi masih menunggu hari ketika CSS mendukungnya pada kedua sumbu: tautan issue GitHub
• Saya sudah membuat web app yang fungsional meski hampir tidak punya pengetahuan CSS. Baru-baru ini saya mencoba membuat header tetap pada tabel dengan lebih dari 20.000 baris, tetapi anehnya selalu muncul efek samping meski sudah mencoba saran dari kelas Bootstrap, Stack Overflow, GPT, dan CodePen. Namun dengan menggunakan CodePen dari tulisan ini, saya menyelesaikannya dalam 2 menit dan langsung menerapkannya ke produksi. Terima kasih.
• Mengunci header tabel dengan position: sticky; kelihatannya mudah, tetapi masalah muncul ketika melakukan sesuatu pada isi tabel. Misalnya, saya menambahkan fitur untuk memulihkan posisi scroll saat pengguna menggulir tabel, meninggalkan halaman, lalu kembali lagi, tetapi posisi yang dipulihkan selalu bergeser satu baris ke bawah. Jika dilihat melalui header tabel yang transparan, baris yang diinginkan memang ada di paling atas, tetapi karena tertutup header, baris berikutnya yang terlihat sebagai baris pertama. Jika posisi scroll disesuaikan dengan memperhitungkan tinggi header, awalnya memang berfungsi, tetapi kadang meleset beberapa piksel. Ini terjadi karena tabelnya besar sehingga ada lazy loading berdasarkan event scroll, dan karena menggunakan automatic table layout, terkadang sel header menjadi terlalu sempit sehingga kata terbungkus ke baris berikutnya dan tinggi total header bertambah. Solusi akhirnya adalah membuat ResizeObserver pada elemen header agar posisi scroll bisa disesuaikan secara dinamis saat tinggi berubah. Dokumentasi ResizeObserver
• Jika Anda juga ingin membekukan border header tabel, Anda bisa menggunakan kode CSS berikut:

  table thead:before {
    content: '';
    position: absolute;
    width: 100%;
    top: 0;
    border-top: 2px solid;
  }
  
  table thead:after {
    content: '';
    position: absolute;
    width: 100%;
    bottom: 0;
    border-bottom: 1px solid;
  }
  

• Akan bagus jika header tabel otomatis menjadi sticky. Jika para developer sudah melakukan pekerjaan tambahan dengan menggunakan tag <th>, kemungkinan besar memang itulah perilaku yang mereka inginkan.
• Di command line, sebaiknya kirim header ke standard error (stderr) dan isi ke standard output (stdout). Kalau tidak, saat diurutkan header bisa tercampur ke dalam hasil.
• Chrome dulu pernah tidak mengizinkan properti position: sticky dipakai pada elemen <thead> dan <tr>: tautan issue Chromium
• Ada saran untuk menggunakan tinggi viewport yang dibatasi alih-alih header sticky, agar header selalu terlihat. Misalnya DataGridXL melakukan itu: tautan DataGridXL (diungkapkan bahwa ini buatan penulis)
• Pada contoh CodePen, jika top diatur dengan memperhitungkan border (misalnya 0 alih-alih -1px), isi tabel bisa dicegah mengalir ke atas header. Dibandingkan dua contoh CodePen: CodePen lama dan CodePen yang diperbaiki
• Beberapa orang ingin mengatakan, "tolong jangan lakukan ini": tautan diskusi Hacker News