Mini Grid 6 — mode server-side. Tidak ada 10.000 baris di dalam grid: setiap kali
pengguna berpindah halaman, menyortir, atau memfilter, grid memanggil
server(params) → Promise { rows, total } dan hanya merender
satu halaman. Paging, sortir, dan filter dihitung di "server" (di sini disimulasikan
di peramban dengan latensi 300 ms; kontraknya sama persis dengan endpoint sungguhan
GET /api/halaman?page=1&size=10&sort=…&filters=…).
Data Karyawan (server-side)
Sortir, filter, dan pindah halaman memicu permintaan baru ke "server" — bukan penyaringan di peramban.
MiniGrid siap.
Fitur contoh ini
- Opsi
server(params): satu halaman per permintaan - Paging & jumlah baris per halaman dikerjakan "server" (
{ rows, total }) - Sortir multi-kolom dan filter beroperator ikut dikirim sebagai parameter
- Baris data tidak pernah menumpuk di peramban — total 10.000 baris
- Status sumber menampilkan rentang yang sedang tampil + latensi + jam
- Kait API sungguhan:
MiniGridDemo.sumberServer = "/api/halaman"
Kode inti
MiniGrid({
el: "#minigrid-6",
columns: kolom,
data: [], // hanya satu halaman yang ditahan
pageSize: 10,
server: async function (p) {
// p = { page, size, q, join, sort, filters, rules }
const qs = new URLSearchParams({
page: p.page, size: p.size, q: p.q,
sort: JSON.stringify(p.sort),
filters: JSON.stringify(p.filters)
});
const r = await fetch("/api/halaman?" + qs);
return await r.json(); // { rows: [...], total: 10000 }
},
onRefresh: (grid) => grid.render()
});
Kenapa penting? Untuk data besar, mode server-side membuat peramban hanya
menyimpan satu halaman. Kontrak
{ rows, total } sama dengan
server.mjs di repo MiniGrid, jadi pindah dari simulasi ke API asli
tidak mengubah kode halaman.