Mini Grid 1 — data besar. 50.000 baris tetap ringan karena virtual scroll:
hanya ±20 baris yang ada di DOM pada satu waktu. Kolom ID dan Nama Karyawan
dibekukan (
frozen: 2) sehingga tetap terlihat saat digeser ke samping.
Pustaka MiniGrid (github.com/radianadhic/minigrid) di-vendor lokal di
assets/js/minigrid/, jadi tetap 100% offline.
Data Karyawan
Klik judul kolom untuk sortir · Shift+klik untuk menambah kunci urut · klik ganda sel untuk edit inline
MiniGrid siap.
Fitur contoh ini
- Virtual scroll: 50.000 baris, DOM tetap ringan
- Dua kolom beku (ID & Nama Karyawan)
- Sortir multi-kolom dengan badge urutan
- Filter per kolom beroperator (= ≠ ∋ ^ $ > ≥ < ≤ ada kosong)
- Pencarian global lintas kolom (Enter)
- Pager 100 – 50.000 baris per halaman
- Pilih baris (halaman ini atau seluruh hasil)
- Tarik tepi judul kolom untuk mengubah lebar
- Ekspor CSV, XLSX, dan PDF dari menu grid
Kode inti
<!-- 1) pustaka lokal (vanilla JS, tanpa dependency) -->
<script defer src="assets/js/minigrid/grid.js"></script>
<script defer src="assets/js/minigrid/export.js"></script> <!-- XLSX & PDF -->
<!-- 2) wadah -->
<div id="minigrid-1" class="minigrid-host"></div>
<script>
MiniGrid({
el: "#minigrid-1",
columns: kolom,
data: rows(50000),
frozen: 2, // 2 kolom beku
height: 460,
pageSize: 500,
pageSizes: [100, 500, 1000, 5000, 50000]
});
</script>
Integrasi tema. Grid tidak memakai warnanya sendiri:
src/minigrid.css
memetakan palet Tailwind MiniGrid ke token template (--c-*), sehingga grid
ikut berubah saat skin perbankan atau mode gelap diganti — tanpa menyentuh kode pustakanya.