Mini Grid 2 — CRUD & Edit Inline

Mini Grid 2 — CRUD lengkap + edit inline. Tombol + Tambah, Edit, Detail, dan Hapus di toolbar grid membuka formulir modal dengan validasi (required, tipe angka, select, checkbox). Klik ganda sebuah sel untuk mengedit langsung di tempat (Enter simpan, Esc batal). Semua perubahan disimpan di localStorage — tutup lalu buka lagi halaman ini, datanya tetap ada.

Data Karyawan (CRUD)

Tambah/Edit/Detail/Hapus lewat form modal · klik ganda sel untuk edit inline · tersimpan otomatis

0 baris localStorage

MiniGrid siap.

Fitur contoh ini

Formulir modal Tambah / Edit / Detail (crud: true)
Validasi required dan tipe angka pada kolom
Edit inline: klik ganda sel, Enter simpan, Esc batal
Select otomatis untuk kolom ber-options (mis. Status)
Checkbox untuk kolom bool (mis. Aktif)
Hapus massal dari baris terpilih
Callback onSave → menulis ke localStorage
Tombol Reset contoh mengembalikan data awal

Kode inti

MiniGrid({
  el: "#minigrid-2",
  columns: kolom,          // kolom: required, options, bool, type: 'num' | 'date'
  data: muatDariLocalStorage() || rows(12),
  height: 300, pageSize: 10, frozen: 0,
  crud: true,              // + Tambah · Edit · Detail · Hapus (form modal)
  edit: true,              // plus edit inline (klik ganda)
  onAdd: function (r) { /* lengkapi nilai bawaan */ return r; },
  onSave: function (row, isNew) { simpanKeLocalStorage(); },
  onEdit: function (row, col, val, old) { simpanKeLocalStorage(); },
  onRemove: function (rows) { /* return false untuk membatalkan */ return true; }
});

Penyimpanan. Contoh ini memakai kunci template-minigrid-2 di localStorage. Bila peramban memblokir penyimpanan (mis. mode privat), grid tetap berjalan — hanya datanya tidak bertahan setelah halaman ditutup.