AG Grid Community · Aurivo Dash

AG Grid Community v36 — di-vendor lokal, jadi tetap 100% offline. Berkasnya ada di assets/js/ag-grid-community.min.js (MIT, 2 MB). Grid memakai Theming API (themeQuartz) sehingga warnanya otomatis mengikuti tema & skin yang dipilih di panel kanan — termasuk dark mode dan preset perbankan. Coba ganti tema lewat ikon ⚙ di navbar, grid langsung ikut berubah.

Portofolio Nasabah

Belum ada baris dipilih

Ringkasan per Cabang

2 grid di satu halaman

Fitur yang aktif

Sortir multi-kolom (Shift + klik judul)
Filter per kolom: teks, angka, dan tanggal
Penyaring pilihan Cabang & Status di toolbar (setara set filter, tetap Community)
Floating filter — kotak saring langsung di bawah judul
Paginasi + pemilih jumlah baris
Pilih baris massal (checkbox) + ringkasan saldo
Kolom disematkan kiri (pinned) dan bisa digeser
Ubah lebar kolom, lebar otomatis, dan panel kolom
Ekspor CSV dari dalam grid
Tema mengikuti skin perbankan & dark mode
Semua label ikut bahasa aktif (ID/EN)

Catatan lisensi. AG Grid Community bersifat MIT (gratis). Fitur Enterprise (pengelompokan baris, pivot, ekspor Excel, master/detail, server-side row model, serta filter Set/Multi) tidak termasuk dalam paket ini — karena itu penyaring pilihan di toolbar dibuat dari text filter Community.

Cara memakai di halaman lain

1. Muat dua berkas lokal di halaman (tanpa CDN) — sudah tersedia di folder assets/js/: ag-grid-community.min.js lalu ag-grid-demo.js.
2. Sediakan wadah ber-tinggi tetap, mis. <div id="grid-saya" style="height:420px"></div>.
3. Panggil agGrid.createGrid(...) seperti contoh di bawah.

const { createGrid, themeQuartz, ModuleRegistry, AllCommunityModule } = agGrid;
ModuleRegistry.registerModules([AllCommunityModule]);

const api = createGrid(document.getElementById("grid-saya"), {
  theme: themeQuartz.withParams({ accentColor: "#16385c", fontFamily: "inherit" }),
  columnDefs: [
    { field: "nama",  headerName: "Nama",  sortable: true, filter: true, flex: 1 },
    { field: "saldo", headerName: "Saldo", type: "numericColumn",
      valueFormatter: p => "Rp " + p.value.toLocaleString("id-ID") }
  ],
  rowData: dataAnda,
  defaultColDef: { resizable: true, floatingFilter: true },
  pagination: true,
  paginationPageSize: 10,
  rowSelection: { mode: "multiRow", checkboxes: true },
  localeText: { page: "Halaman", of: "dari", next: "Berikutnya", previous: "Sebelumnya" }
});

// filter "pilih dari daftar" (Community): text filter dengan kondisi equals
api.setFilterModel({ cabang: { filterType: "text", type: "equals", filter: "Jakarta" } });

// contoh operasi umum
api.setGridOption("quickFilterText", "jakarta");   // pencarian cepat
api.exportDataAsCsv({ fileName: "data.csv" });      // unduh CSV

Integrasi tema & bahasa untuk halaman ini ada di assets/js/ag-grid-demo.js — warna dibaca dari CSS variable template, lalu diterapkan ulang setiap kali event theme:changed atau i18n:changed terpicu.