Mini Grid 5 — Data dari API

Mini Grid 5 — data dari API. Grid dibuka dalam keadaan kosong, lalu mengisi dirinya lewat onRefresh(grid) yang mengembalikan Promise: pustaka menampilkan status muat (setLoading) selama permintaan berjalan. Template ini tetap 100% offline, jadi permintaannya disimulasikan dengan latensi 450 ms — mau disambungkan ke endpoint sungguhan? Cukup MiniGridDemo.sumberAPI = "/api/karyawan" lalu klik Ambil ulang dari API.

Data Karyawan (dari sumber eksternal)

Tombol muat ulang di toolbar grid memanggil fungsi yang sama dengan tombol di header halaman ini.

0 baris belum diambil

MiniGrid siap.

Fitur contoh ini

Grid mulai kosong, data diisi oleh onRefresh (Promise)
Status muat otomatis (setLoading) selama permintaan berjalan
Tombol muat ulang di toolbar + tombol di header halaman & navbar
Data segar tiap panggilan (seed baru) — jumlah baris berubah acak di sekitar 500
Status sumber + jam di sebelah chip, ikut bahasa aktif
Formulir filter, pilih kolom, ekspor CSV/XLSX/PDF tetap jalan

Kode inti

MiniGrid({
  el: "#minigrid-5",
  columns: kolom,
  data: [],                 // kosong dulu
  filterForm: true,
  onRefresh: async function (grid) {
    const r = await fetch("/api/karyawan");     // template: simulasi 450 ms
    const list = await r.json();
    grid.data = grid.o.data = list;             // ganti isi
    grid.s.page = 1; grid.render();
    return list;                                // Promise → status muat otomatis
  }
});

Kait cepat. Setel MiniGridDemo.sumberAPI = "/api/karyawan" dari konsol peramban untuk memakai endpoint sungguhan. Tanpa itu (atau bila server tidak terjangkau) grid otomatis kembali ke simulasi lokal — halaman tidak pernah macet.