Dokumentasi Modal.js

<Modal
  title="Form Add"
  form="formAdd"
  id="formAdd">
  <TextInput 
      label="Last Name"
      name="nama"
      iconLeft="fas fa-user"
      placeholder="Masukkan username"
  />
  <FileInput
    label="Drag & Drop Files"
    dragDrop="true"
    multiple="true"
    preview="true"
    name="attachment"
    accept="image/*,application/pdf"
  />
  <footer>
    <button title="Batalkan" class="nx-btn-secondary" close="formAdd" />
    <button title="Simpan" class="nx-btn-primary" id="sendAdd" />
  </footer>
</Modal>

<Modal
  title="Deleted Data"
  form="setDelete"
  class="nx-modal-sm"
  id="formDelet">
  <div extractorVar="row" id="content">
    <h1 class="#087ea4 fs-50px"></h1>
  </div>
  <footer>
    <button title="Batalkan" class="nx-btn-secondary" close="formDelet" />
    <button title="Hapus" class="nx-btn-danger" id="sendDelete" />
  </footer>
</Modal>

<input
  type="search"
  id="searchInput"
  class="form-control"
  placeholder="Search..."
/>

<div id="item" extractor="set">
  <h3>NO:{set.no}</h3>
  <h3>ID:{set.id}</h3>
  <h3></h3>
  <p>{set.images}</p>
  <button
    title="Update"
    class="nx-btn-dark is-small"
    modal="formUpdate"
    key="{row.id}"
  />
  <button
    title="Deleted"
    class="nx-btn-dark is-small"
    modal="formDelet"
    key="{row.id}"
  />
</div>

constructor() {
  this.nexaUi = new NexaUI();
  this.modal = this.nexaUi.Modal();
  this.Storage = this.nexaUi.Client();
  this.modal.init();
  this.domInstance = this.initializeDom();
  this.setupModalListeners();
  this.loadData();
}

initializeDom() {
  return this.nexaUi.NexaDom({
    elementById: "item",        // Container untuk data
    search: "searchInput",      // Input pencarian
    virtualScroll: true,        // Aktifkan virtual scrolling
    chunkSize: 1000,           // Jumlah item per chunk
    pagination: "pagination",   // Element pagination
    order: 2,                  // Urutan default
    searchableFields: ["nama", "id"] // Field yang dapat dicari
  });
}

loadData() {
  this.Storage.Buckets({
    type: "nexa",
    action: "data",
    credensial: "BC948-67AB6-EA185-1001B",
    data: true
  })
  .then(response => {
    this.domInstance.setData(response);
  });
}

handleFormSubmit(action, data, modalId) {
  this.Storage.Buckets({
    type: "nexa",
    action: action,      // formUploads/formRemove/formUpdate
    credensial: "BC948-67AB6-EA185-1001B",
    data: data
  })
  .then(response => {
    this.domInstance.Reload(response, {
      append: false,
      resetPage: true
    });
    this.modal.close(modalId);
  });
}