Fitur Aplikasi

Fitur-Fitur Aplikasi Tabel

✅ Tabel Sticky

Tabel mendukung fitur sticky, yaitu baris header (<thead>) dan kolom pertama akan tetap terlihat (statis) meskipun pengguna melakukan scroll. Ini dicapai dengan menggunakan plugin DataTables FixedHeader untuk membuat header selalu sinkron dan lengket di atas, serta DataTables FixedColumns agar kolom pertama tetap berada di kiri meskipun tabel di-scroll ke kanan. Kombinasi FixedHeader dan FixedColumns membuat tampilan tabel tetap rapi, mudah dibaca, dan sinkron.

✅ Scrollable: Horizontal & Vertikal

Aplikasi mendukung scroll horizontal (scrollX) dan vertikal (scrollY) menggunakan DataTables. CSS tambahan disiapkan agar overflow muncul dengan benar, menjamin sinkronisasi scroll horizontal dan vertikal tetap berjalan lancar. Untuk memaksa scroll vertikal aktif, parameter scrollY bisa diatur lebih kecil, misalnya scrollY: 300px.

Contoh scrollX aktif jika tabel memiliki lebar lebih besar dari viewport.

📌 Penyebab Umum Scroll Tidak Muncul

1. Tabel tidak cukup lebar secara horizontal
   Jika isi tabel hanya sedikit atau kolomnya sempit, scrollX tidak akan aktif karena lebar tabel masih muat di layar.
   Solusi: Tambahkan min-width pada tabel atau atur width pada <th> agar overflow horizontal selalu muncul.
2. Tinggi tabel tidak melebihi scrollY
   Jika jumlah baris sedikit, scrollY tidak aktif karena tabel lebih pendek dari tinggi area scroll.
   Solusi: Tambahkan data dummy lebih banyak atau kecilkan nilai scrollY agar scroll vertikal tetap terlihat.
3. CSS overflow bentrok
   Kadang ada <div> di luar DataTables yang menimpa overflow internal.
   Solusi: Pastikan tidak ada CSS global lain yang memengaruhi div.dataTables_scrollBody.

✅ Pagination & Dropdown “Show Entries”

Aplikasi mendukung fitur pagination untuk menampilkan jumlah baris tertentu per halaman. Misalnya, pageLength: 5 akan menampilkan 5 baris per halaman. Fitur Show entries per page (dengan DataTables jQuery) memungkinkan pengguna memilih berapa baris yang ingin ditampilkan.

Catatan: “Show entries” bawaan DataTables hanya muncul jika paging diaktifkan. Jika paging dimatikan (paging: false), maka dropdown bawaan tidak muncul. Sebagai alternatif, Anda bisa membuat dropdown <select> kustom di atas tabel. Fungsi updateVisibleRows() mengatur baris di <tbody> agar tampil atau tersembunyi sesuai jumlah yang dipilih.

Jika Anda ingin menampilkan semua baris sekaligus tanpa pagination, Anda dapat mengatur paging: false. Dengan begitu, tombol “Previous” dan “Next” DataTables juga otomatis hilang.

Jika ingin tetap menampilkan Show entries tapi tanpa membagi halaman, Anda bisa set paging: true lalu atur pageLength sama dengan jumlah total baris, atau gunakan lengthChange: false untuk menyembunyikan dropdown bawaan.

✅ Implementasi Sederhana

Aplikasi cukup menggunakan kombinasi HTML + CSS + jQuery + DataTables CDN, tanpa perlu server-side script tambahan. Namun jika ingin, Anda bisa mengembangkan ke versi server-side seperti Python Flask, Django, Streamlit, atau Node.js.

✅ Fitur Tambahan yang Bisa Ditambahkan

• Filter pencarian global.
• Export data ke format Excel atau PDF.
• Versi responsif untuk perangkat mobile.
• Kolom aksi (misalnya tombol edit atau delete).

✅ Contoh Pengaturan Lebar Tabel

min-width pada <table> akan memaksa lebar tabel melebihi viewport. Contoh:
<table style="min-width: 800px;">

width pada <th> memaksa kolom memiliki lebar tetap. Contoh:
<th style="width: 300px;">Bursa Efek</th>

nowrap akan mencegah teks di sel tabel terpotong ke baris baru. Contoh:
<td style="white-space: nowrap;">Mandiri Sekuritas, Mirae Asset Sekuritas</td>

✅ Semua Resource CDN Gratis

Semua plugin dan pustaka pendukung diambil dari CDN resmi DataTables, jQuery, dan ekstensi terkait, sehingga tidak memerlukan instalasi manual.