@idds/js 1.0.85 → 1.0.87

package/dist/index.js

@@ -2989,331 +2989,572 @@ function initTabHorizontal() {
 }
 
 // src/js/components/stateful/table.js
-function initTable(selectorOrElement, options = {}) {
-  const elements = typeof selectorOrElement === "string" ? document.querySelectorAll(selectorOrElement) : selectorOrElement ? selectorOrElement.length ? selectorOrElement : [selectorOrElement] : document.querySelectorAll(`.${PREFIX}-table`);
-  elements.forEach((container) => {
-    if (container.dataset.initialized === "true") return;
-    container.dataset.initialized = "true";
-    const {
-      columns = [],
-      fetchData = null,
-      data = [],
-      initialPageSize = 10,
-      pageSizeOptions = [10, 20, 50],
-      initialSortField = null,
-      initialSortOrder = null,
-      searchContainer = null,
-      // External search input element or selector
-      searchButton = null,
-      // External search button element or selector
-      onSearch = null
-      // External search handler
-    } = options;
-    let currentPage = 1;
-    let pageSize = initialPageSize;
-    let totalPages = 1;
-    let total = data.length;
-    let sortField = initialSortField;
-    let sortOrder = initialSortOrder;
-    let searchTerm = "";
-    let loading = false;
-    let currentData = [...data];
-    let tableEl = container.querySelector(`.${PREFIX}-table__container`);
-    let theadEl = container.querySelector(`.${PREFIX}-table__header`);
-    let tbodyEl = container.querySelector(`.${PREFIX}-table__body`);
-    let paginationEl = container.querySelector(`.${PREFIX}-table__pagination`);
-    let progressBarEl = container.querySelector(
-      `.${PREFIX}-table__progress-bar`
-    );
-    let progressFillEl = container.querySelector(
-      `.${PREFIX}-progress-bar__fill`
-    );
-    const searchInputEl = typeof searchContainer === "string" ? document.querySelector(searchContainer) : searchContainer;
-    const searchBtnEl = typeof searchButton === "string" ? document.querySelector(searchButton) : searchButton;
-    if (!tableEl) {
-      container.innerHTML = `
-        <div class="${PREFIX}-table__progress-bar" style="display: none;">
-          <div class="${PREFIX}-progress-bar ${PREFIX}-progress-bar--variant-primary ${PREFIX}-progress-bar--height-sm">
-            <div class="${PREFIX}-progress-bar__track">
-              <div class="${PREFIX}-progress-bar__fill" style="width: 0%;"></div>
+var Table = class {
+  constructor(selectorOrElement, options = {}) {
+    this.container = typeof selectorOrElement === "string" ? document.querySelector(selectorOrElement) : selectorOrElement;
+    if (!this.container) {
+      console.warn("[IDDS Table] Container not found:", selectorOrElement);
+      return;
+    }
+    if (this.container.dataset.initialized === "true") {
+      return;
+    }
+    this.container.dataset.initialized = "true";
+    this.options = {
+      columns: [],
+      fetchData: null,
+      data: [],
+      initialPage: 1,
+      initialPageSize: 10,
+      pageSizeOptions: [10, 20, 50],
+      initialSortField: null,
+      initialSortOrder: null,
+      searchPlaceholder: "Input pencarian",
+      buttonSearchLabel: "Cari",
+      selectable: false,
+      onSelectionChange: null,
+      rowKey: "id",
+      showSearch: false,
+      rowClickable: false,
+      onRowClick: null,
+      emptyState: "No data found",
+      showPagination: true,
+      searchContainer: null,
+      searchButton: null,
+      onSearch: null,
+      ...options
+    };
+    this.state = {
+      currentPage: this.options.initialPage,
+      pageSize: this.options.initialPageSize,
+      totalPages: 1,
+      total: this.options.data.length,
+      sortField: this.options.initialSortField,
+      sortOrder: this.options.initialSortOrder,
+      searchTerm: "",
+      loading: false,
+      currentData: [...this.options.data],
+      selectedKeys: /* @__PURE__ */ new Set(),
+      selectedRows: /* @__PURE__ */ new Map()
+    };
+    this.elements = {};
+    this.initDOM();
+    this.bindEvents();
+    this.loadData();
+  }
+  initDOM() {
+    this.container.innerHTML = "";
+    this.container.classList.add(`${PREFIX}-table-wrapper`);
+    if (this.options.showSearch && !this.options.searchContainer) {
+      const searchWrap = document.createElement("div");
+      searchWrap.className = "flex items-center gap-2 mb-4";
+      searchWrap.style.display = "flex";
+      searchWrap.style.alignItems = "center";
+      searchWrap.style.gap = "8px";
+      searchWrap.style.marginBottom = "16px";
+      searchWrap.innerHTML = `
+        <div style="flex: 1;">
+          <div class="${PREFIX}-text-field">
+            <div class="${PREFIX}-text-field__wrapper ${PREFIX}-text-field__wrapper--size-md">
+              <input type="text" class="${PREFIX}-text-field__input" placeholder="${this.options.searchPlaceholder}">
             </div>
           </div>
         </div>
-        <table class="${PREFIX}-table__container">
-          <thead class="${PREFIX}-table__header"><tr></tr></thead>
-          <tbody class="${PREFIX}-table__body"></tbody>
-        </table>
-        <div class="${PREFIX}-table__pagination"></div>
+        <button type="button" class="${PREFIX}-button ${PREFIX}-button--primary ${PREFIX}-button--md">
+          ${this.options.buttonSearchLabel}
+        </button>
+      `;
+      this.container.appendChild(searchWrap);
+      this.elements.searchInput = searchWrap.querySelector("input");
+      this.elements.searchButton = searchWrap.querySelector("button");
+    } else {
+      this.elements.searchInput = typeof this.options.searchContainer === "string" ? document.querySelector(this.options.searchContainer) : this.options.searchContainer;
+      this.elements.searchButton = typeof this.options.searchButton === "string" ? document.querySelector(this.options.searchButton) : this.options.searchButton;
+    }
+    const tableDiv = document.createElement("div");
+    tableDiv.className = `${PREFIX}-table`;
+    const progressDiv = document.createElement("div");
+    progressDiv.className = `${PREFIX}-table__progress-bar`;
+    progressDiv.style.display = "none";
+    progressDiv.innerHTML = `
+      <div class="${PREFIX}-progress-bar ${PREFIX}-progress-bar--variant-primary ${PREFIX}-progress-bar--height-sm">
+        <div class="${PREFIX}-progress-bar__track">
+          <div class="${PREFIX}-progress-bar__fill" style="width: 0%;"></div>
+        </div>
+      </div>
+    `;
+    tableDiv.appendChild(progressDiv);
+    const tableEl = document.createElement("table");
+    tableEl.className = `${PREFIX}-table__container`;
+    const theadEl = document.createElement("thead");
+    theadEl.className = `${PREFIX}-table__header`;
+    const trHeader = document.createElement("tr");
+    theadEl.appendChild(trHeader);
+    tableEl.appendChild(theadEl);
+    const tbodyEl = document.createElement("tbody");
+    tbodyEl.className = `${PREFIX}-table__body`;
+    tableEl.appendChild(tbodyEl);
+    tableDiv.appendChild(tableEl);
+    const paginationEl = document.createElement("div");
+    paginationEl.className = `${PREFIX}-table__pagination`;
+    if (!this.options.showPagination) {
+      paginationEl.style.display = "none";
+    }
+    tableDiv.appendChild(paginationEl);
+    this.container.appendChild(tableDiv);
+    this.elements.progressEl = progressDiv;
+    this.elements.progressFillEl = progressDiv.querySelector(
+      `.${PREFIX}-progress-bar__fill`
+    );
+    this.elements.theadTr = trHeader;
+    this.elements.tbody = tbodyEl;
+    this.elements.pagination = paginationEl;
+    this.buildHeader();
+  }
+  buildHeader() {
+    this.elements.theadTr.innerHTML = "";
+    if (this.options.selectable) {
+      const th = document.createElement("th");
+      th.className = `${PREFIX}-table__header-cell`;
+      th.style.width = "48px";
+      const checkboxWrap = document.createElement("div");
+      checkboxWrap.className = `${PREFIX}-checkbox`;
+      checkboxWrap.innerHTML = `
+        <label class="${PREFIX}-checkbox__label-wrapper">
+          <input type="checkbox" class="${PREFIX}-checkbox__input" id="selectAll">
+          <div class="${PREFIX}-checkbox__box ${PREFIX}-checkbox__box--unchecked"></div>
+        </label>
       `;
-      tableEl = container.querySelector(`.${PREFIX}-table__container`);
-      theadEl = container.querySelector(`.${PREFIX}-table__header`);
-      tbodyEl = container.querySelector(`.${PREFIX}-table__body`);
-      paginationEl = container.querySelector(`.${PREFIX}-table__pagination`);
-      progressBarEl = container.querySelector(`.${PREFIX}-table__progress-bar`);
-      progressFillEl = container.querySelector(`.${PREFIX}-progress-bar__fill`);
-    }
-    const trHeader = theadEl.querySelector("tr") || document.createElement("tr");
-    if (!theadEl.contains(trHeader)) theadEl.appendChild(trHeader);
-    if (columns.length > 0) {
-      trHeader.innerHTML = "";
-      columns.forEach((col) => {
-        const th = document.createElement("th");
-        th.className = `${PREFIX}-table__header-cell`;
-        if (col.sortable && col.accessor) {
-          th.classList.add(`${PREFIX}-table__header-cell--sortable`);
-          th.setAttribute("data-sort", col.accessor);
-          th.innerHTML = `
-            <div class="${PREFIX}-table__sort-controls">
-              ${col.header}
-              <div class="${PREFIX}-table__sort-icon">
-                <div class="${PREFIX}-table__sort-button" data-order="asc">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9L12 15L18 9"></path></svg>
-                </div>
-                <div class="${PREFIX}-table__sort-button ${PREFIX}-table__sort-button-right" data-order="desc">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15L12 9L6 15"></path></svg>
-                </div>
+      th.appendChild(checkboxWrap);
+      this.elements.theadTr.appendChild(th);
+      this.elements.selectAllInput = checkboxWrap.querySelector("input");
+      this.elements.selectAllBox = checkboxWrap.querySelector(
+        `.${PREFIX}-checkbox__box`
+      );
+      this.elements.selectAllInput.addEventListener("change", (e) => {
+        this.toggleAllSelection(e.target.checked);
+      });
+    }
+    this.options.columns.forEach((col) => {
+      const th = document.createElement("th");
+      th.className = `${PREFIX}-table__header-cell`;
+      if (col.sortable && col.accessor) {
+        th.classList.add(`${PREFIX}-table__header-cell--sortable`);
+        th.setAttribute("data-sort", col.accessor);
+        let sortControlsHtml = `
+          <div class="${PREFIX}-table__sort-controls">
+            ${col.header}
+            <div class="${PREFIX}-table__sort-icon">
+              <div class="${PREFIX}-table__sort-button" data-order="asc">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9L12 15L18 9"></path></svg>
+              </div>
+              <div class="${PREFIX}-table__sort-button ${PREFIX}-table__sort-button-right" data-order="desc">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 15L12 9L6 15"></path></svg>
               </div>
             </div>
-          `;
-          th.addEventListener("click", () => {
-            const field = col.accessor;
-            if (sortField === field) {
-              if (sortOrder === "asc") sortOrder = "desc";
-              else if (sortOrder === "desc") {
-                sortField = null;
-                sortOrder = null;
-              }
-            } else {
-              sortField = field;
-              sortOrder = "asc";
+          </div>
+        `;
+        th.innerHTML = sortControlsHtml;
+        th.addEventListener("click", () => {
+          const field = col.accessor;
+          if (this.state.sortField === field) {
+            if (this.state.sortOrder === "asc") this.state.sortOrder = "desc";
+            else {
+              this.state.sortField = null;
+              this.state.sortOrder = null;
             }
-            currentPage = 1;
-            loadData();
-          });
-        } else {
-          th.textContent = col.header;
+          } else {
+            this.state.sortField = field;
+            this.state.sortOrder = "asc";
+          }
+          this.state.currentPage = 1;
+          this.loadData();
+        });
+      } else {
+        th.textContent = col.header;
+      }
+      this.elements.theadTr.appendChild(th);
+    });
+  }
+  bindEvents() {
+    if (this.elements.searchInput && this.elements.searchButton) {
+      const handleSearch = () => {
+        this.state.searchTerm = this.elements.searchInput.value.trim();
+        this.state.currentPage = 1;
+        this.loadData();
+        if (typeof this.options.onSearch === "function") {
+          this.options.onSearch(this.state.searchTerm);
         }
-        trHeader.appendChild(th);
+      };
+      this.elements.searchButton.addEventListener("click", handleSearch);
+      this.elements.searchInput.addEventListener("keydown", (e) => {
+        if (e.key === "Enter") handleSearch();
       });
     }
-    const sortButtons = theadEl.querySelectorAll(
-      `.${PREFIX}-table__sort-button`
-    );
-    let loadingInterval;
-    function setLoading(isLoading) {
-      loading = isLoading;
-      if (!progressBarEl || !progressFillEl) return;
-      if (isLoading) {
-        progressBarEl.style.display = "block";
-        let progress = 0;
-        clearInterval(loadingInterval);
-        loadingInterval = setInterval(() => {
-          if (progress >= 90 || !loading) {
-            clearInterval(loadingInterval);
-            if (!loading) {
-              progress = 100;
-              progressFillEl.style.width = "100%";
-              setTimeout(() => {
-                progressBarEl.style.display = "none";
-                progressFillEl.style.width = "0%";
-              }, 300);
-            }
+  }
+  setLoading(isLoading) {
+    this.state.loading = isLoading;
+    if (!this.elements.progressEl || !this.elements.progressFillEl) return;
+    if (isLoading) {
+      this.elements.progressEl.style.display = "block";
+      let progress = 0;
+      clearInterval(this.loadingInterval);
+      this.loadingInterval = setInterval(() => {
+        if (progress >= 90 || !this.state.loading) {
+          clearInterval(this.loadingInterval);
+          if (!this.state.loading) {
+            progress = 100;
+            this.elements.progressFillEl.style.width = "100%";
+            setTimeout(() => {
+              this.elements.progressEl.style.display = "none";
+              this.elements.progressFillEl.style.width = "0%";
+            }, 300);
+          }
+          return;
+        }
+        progress += Math.random() * 15;
+        this.elements.progressFillEl.style.width = progress + "%";
+      }, 200);
+    }
+  }
+  renderRows(rowData) {
+    this.elements.tbody.innerHTML = "";
+    if (rowData.length === 0) {
+      const tr = document.createElement("tr");
+      const colspan = this.options.columns.length + (this.options.selectable ? 1 : 0);
+      tr.innerHTML = `<td colspan="${colspan}" class="${PREFIX}-table__empty-cell">${this.options.emptyState}</td>`;
+      this.elements.tbody.appendChild(tr);
+      this.updateSelectAllState();
+      return;
+    }
+    rowData.forEach((row, index) => {
+      const tr = document.createElement("tr");
+      tr.className = `${PREFIX}-table__row`;
+      if (this.options.rowClickable) {
+        tr.style.cursor = "pointer";
+        tr.classList.add(`${PREFIX}-table__row--clickable`);
+        tr.addEventListener("click", (e) => {
+          if (e.target.closest(`.${PREFIX}-checkbox`) && this.options.selectable) {
             return;
           }
-          progress += Math.random() * 15;
-          progressFillEl.style.width = progress + "%";
-        }, 200);
+          if (typeof this.options.onRowClick === "function") {
+            this.options.onRowClick(row, index);
+          }
+        });
       }
-    }
-    function renderRows(rowData) {
-      tbodyEl.innerHTML = "";
-      if (rowData.length === 0) {
-        const tr = document.createElement("tr");
-        tr.innerHTML = `<td colspan="${columns.length || 1}" class="${PREFIX}-table__empty-cell">No data found</td>`;
-        tbodyEl.appendChild(tr);
-        return;
+      const rowKeyStr = String(row[this.options.rowKey] || index);
+      if (this.options.selectable) {
+        const td = document.createElement("td");
+        td.className = `${PREFIX}-table__cell`;
+        const isChecked = this.state.selectedKeys.has(rowKeyStr);
+        const checkboxWrap = document.createElement("div");
+        checkboxWrap.className = `${PREFIX}-checkbox`;
+        checkboxWrap.innerHTML = `
+          <label class="${PREFIX}-checkbox__label-wrapper">
+            <input type="checkbox" class="${PREFIX}-checkbox__input" ${isChecked ? "checked" : ""}>
+            <div class="${PREFIX}-checkbox__box ${isChecked ? `${PREFIX}-checkbox__box--checked` : `${PREFIX}-checkbox__box--unchecked`}">
+              ${isChecked ? '<svg class="ina-checkbox__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10"></path></svg>' : ""}
+            </div>
+          </label>
+        `;
+        td.appendChild(checkboxWrap);
+        tr.appendChild(td);
+        const rowInput = checkboxWrap.querySelector("input");
+        rowInput.addEventListener("change", (e) => {
+          this.toggleRowSelection(rowKeyStr, row, e.target.checked);
+        });
       }
-      rowData.forEach((row, index) => {
-        const tr = document.createElement("tr");
-        tr.className = `${PREFIX}-table__row`;
-        columns.forEach((col) => {
-          const td = document.createElement("td");
-          td.className = `${PREFIX}-table__cell`;
-          if (typeof col.render === "function") {
-            const content = col.render(row, index);
-            if (typeof content === "string") {
-              td.innerHTML = content;
-            } else if (content instanceof HTMLElement) {
-              td.appendChild(content);
-            } else {
-              td.textContent = content;
-            }
+      this.options.columns.forEach((col) => {
+        const td = document.createElement("td");
+        td.className = `${PREFIX}-table__cell`;
+        if (typeof col.render === "function") {
+          const content = col.render(row, index);
+          if (typeof content === "string") {
+            td.innerHTML = content;
+          } else if (content instanceof HTMLElement) {
+            td.appendChild(content);
           } else {
-            td.textContent = row[col.accessor] !== void 0 ? row[col.accessor] : "";
+            td.textContent = content;
           }
-          tr.appendChild(td);
-        });
-        tbodyEl.appendChild(tr);
+        } else {
+          td.textContent = row[col.accessor] !== void 0 && row[col.accessor] !== null ? row[col.accessor] : "";
+        }
+        tr.appendChild(td);
       });
-    }
-    function renderPagination() {
-      if (!paginationEl) return;
-      totalPages = Math.ceil(total / pageSize);
-      if (totalPages < 1) totalPages = 1;
-      paginationEl.innerHTML = `
-        <div class="${PREFIX}-pagination">
-          <div class="${PREFIX}-pagination__nav-container">
-            <div class="${PREFIX}-pagination__page-info">Halaman ${currentPage} dari ${totalPages}</div>
-            <div class="${PREFIX}-pagination__nav-buttons"></div>
-          </div>
-          <div class="${PREFIX}-pagination__page-size-container">
-            <span class="${PREFIX}-pagination__page-size-label">Baris per halaman</span>
-            <select class="${PREFIX}-pagination__page-size-select">
-              ${pageSizeOptions.map((opt) => `<option value="${opt}" ${pageSize === opt ? "selected" : ""}>${opt}</option>`).join("")}
-            </select>
-          </div>
+      this.elements.tbody.appendChild(tr);
+    });
+    this.updateSelectAllState();
+  }
+  renderPagination() {
+    if (!this.elements.pagination || !this.options.showPagination) return;
+    this.state.totalPages = Math.ceil(this.state.total / this.state.pageSize);
+    if (this.state.totalPages < 1) this.state.totalPages = 1;
+    this.elements.pagination.innerHTML = `
+      <div class="${PREFIX}-pagination">
+        <div class="${PREFIX}-pagination__nav-container">
+          <div class="${PREFIX}-pagination__page-info">Halaman ${this.state.currentPage} dari ${this.state.totalPages}</div>
+          <div class="${PREFIX}-pagination__nav-buttons"></div>
         </div>
-      `;
-      const navButtonsContainer = paginationEl.querySelector(
-        `.${PREFIX}-pagination__nav-buttons`
-      );
-      const pageSizeSelect = paginationEl.querySelector(
-        `.${PREFIX}-pagination__page-size-select`
-      );
-      pageSizeSelect.addEventListener("change", (e) => {
-        pageSize = parseInt(e.target.value);
-        currentPage = 1;
-        loadData();
-      });
-      const createButton = (isNav, enabled, content, onClick) => {
-        const btn = document.createElement("button");
-        btn.type = "button";
-        const baseClass = isNav ? `${PREFIX}-pagination__nav-button` : `${PREFIX}-pagination__page-button`;
-        const stateClass = isNav ? enabled ? `${baseClass}--enabled` : `${baseClass}--disabled` : enabled ? `${baseClass}--enabled` : `${baseClass}--active`;
-        btn.className = `${baseClass} ${stateClass}`;
-        btn.disabled = !enabled;
-        if (typeof content === "string") btn.innerHTML = content;
-        else btn.appendChild(content);
-        btn.onclick = onClick;
-        navButtonsContainer.appendChild(btn);
-      };
-      const iconPaths = {
-        first: '<path d="M11 7l-5 5l5 5"></path><path d="M17 7l-5 5l5 5"></path>',
-        prev: '<path d="M15 6l-6 6l6 6"></path>',
-        next: '<path d="M9 6l6 6l-6 6"></path>',
-        last: '<path d="M7 7l5 5l-5 5"></path><path d="M13 7l5 5l-5 5"></path>'
-      };
-      const getIcon = (type) => `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="${PREFIX}-pagination__nav-icon">${iconPaths[type]}</svg>`;
-      createButton(true, currentPage > 1, getIcon("first"), () => {
-        currentPage = 1;
-        loadData();
-      });
-      createButton(true, currentPage > 1, getIcon("prev"), () => {
-        currentPage--;
-        loadData();
-      });
-      const maxVisible = 5;
-      let startPage = Math.max(1, currentPage - Math.floor(maxVisible / 2));
-      let endPage = Math.min(totalPages, startPage + maxVisible - 1);
-      if (endPage - startPage < maxVisible - 1) {
-        startPage = Math.max(1, endPage - maxVisible + 1);
-      }
-      for (let i = startPage; i <= endPage; i++) {
-        createButton(false, i !== currentPage, String(i), () => {
-          currentPage = i;
-          loadData();
-        });
-      }
-      createButton(true, currentPage < totalPages, getIcon("next"), () => {
-        currentPage++;
-        loadData();
-      });
-      createButton(true, currentPage < totalPages, getIcon("last"), () => {
-        currentPage = totalPages;
-        loadData();
-      });
-    }
-    function updateSortIndicators() {
-      sortButtons.forEach((btn) => {
-        const headerCell = btn.closest("th");
-        if (!headerCell) return;
-        const field = headerCell.getAttribute("data-sort");
-        const order = btn.getAttribute("data-order");
-        const isActive = sortField === field && sortOrder === order;
-        btn.classList.toggle(`${PREFIX}-table__sort-button--active`, isActive);
+        <div class="${PREFIX}-pagination__page-size-container">
+          <span class="${PREFIX}-pagination__page-size-label">Baris per halaman</span>
+          <select class="${PREFIX}-pagination__page-size-select">
+            ${this.options.pageSizeOptions.map(
+      (opt) => `<option value="${opt}" ${this.state.pageSize === opt ? "selected" : ""}>${opt}</option>`
+    ).join("")}
+          </select>
+        </div>
+      </div>
+    `;
+    const navButtons = this.elements.pagination.querySelector(
+      `.${PREFIX}-pagination__nav-buttons`
+    );
+    const pageSizeSelect = this.elements.pagination.querySelector(
+      `.${PREFIX}-pagination__page-size-select`
+    );
+    pageSizeSelect.addEventListener("change", (e) => {
+      this.state.pageSize = parseInt(e.target.value, 10);
+      this.state.currentPage = 1;
+      this.loadData();
+    });
+    const createBtn = (isNav, enabled, content, onClick) => {
+      const btn = document.createElement("button");
+      btn.type = "button";
+      const baseCls = isNav ? `${PREFIX}-pagination__nav-button` : `${PREFIX}-pagination__page-button`;
+      const stCls = isNav ? enabled ? `${baseCls}--enabled` : `${baseCls}--disabled` : enabled ? `${baseCls}--enabled` : `${baseCls}--active`;
+      btn.className = `${baseCls} ${stCls}`;
+      btn.disabled = !enabled;
+      btn.innerHTML = content;
+      btn.onclick = onClick;
+      navButtons.appendChild(btn);
+    };
+    const SVG = {
+      first: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ina-pagination__nav-icon"><path d="M11 7l-5 5l5 5"></path><path d="M17 7l-5 5l5 5"></path></svg>',
+      prev: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ina-pagination__nav-icon"><path d="M15 6l-6 6l6 6"></path></svg>',
+      next: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ina-pagination__nav-icon"><path d="M9 6l6 6l-6 6"></path></svg>',
+      last: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ina-pagination__nav-icon"><path d="M7 7l5 5l-5 5"></path><path d="M13 7l5 5l-5 5"></path></svg>'
+    };
+    createBtn(true, this.state.currentPage > 1, SVG.first, () => {
+      this.state.currentPage = 1;
+      this.loadData();
+    });
+    createBtn(true, this.state.currentPage > 1, SVG.prev, () => {
+      this.state.currentPage--;
+      this.loadData();
+    });
+    const maxVisible = 5;
+    let startPage = Math.max(
+      1,
+      this.state.currentPage - Math.floor(maxVisible / 2)
+    );
+    let endPage = Math.min(this.state.totalPages, startPage + maxVisible - 1);
+    if (endPage - startPage < maxVisible - 1) {
+      startPage = Math.max(1, endPage - maxVisible + 1);
+    }
+    for (let i = startPage; i <= endPage; i++) {
+      createBtn(false, i !== this.state.currentPage, String(i), () => {
+        this.state.currentPage = i;
+        this.loadData();
       });
     }
-    async function loadData() {
-      setLoading(true);
-      try {
-        if (typeof fetchData === "function") {
-          const result = await fetchData({
-            page: currentPage,
-            pageSize,
-            sortField,
-            sortOrder,
-            searchTerm
+    createBtn(
+      true,
+      this.state.currentPage < this.state.totalPages,
+      SVG.next,
+      () => {
+        this.state.currentPage++;
+        this.loadData();
+      }
+    );
+    createBtn(
+      true,
+      this.state.currentPage < this.state.totalPages,
+      SVG.last,
+      () => {
+        this.state.currentPage = this.state.totalPages;
+        this.loadData();
+      }
+    );
+  }
+  updateSortIndicators() {
+    const btns = this.elements.theadTr.querySelectorAll(
+      `.${PREFIX}-table__sort-button`
+    );
+    btns.forEach((btn) => {
+      const th = btn.closest("th");
+      if (!th) return;
+      const field = th.getAttribute("data-sort");
+      const order = btn.getAttribute("data-order");
+      const active = this.state.sortField === field && this.state.sortOrder === order;
+      btn.classList.toggle(`${PREFIX}-table__sort-button--active`, active);
+    });
+  }
+  async loadData() {
+    this.setLoading(true);
+    try {
+      if (typeof this.options.fetchData === "function") {
+        const res = await this.options.fetchData({
+          page: this.state.currentPage,
+          pageSize: this.state.pageSize,
+          sortField: this.state.sortField,
+          sortOrder: this.state.sortOrder,
+          searchTerm: this.state.searchTerm
+        });
+        this.state.total = res.total;
+        this.state.currentData = res.data || [];
+      } else {
+        let filtered = [...this.options.data];
+        if (this.state.searchTerm) {
+          const lower = this.state.searchTerm.toLowerCase();
+          filtered = filtered.filter(
+            (row) => this.options.columns.some(
+              (c) => String(row[c.accessor] || "").toLowerCase().includes(lower)
+            )
+          );
+        }
+        if (this.state.sortField && this.state.sortOrder) {
+          filtered.sort((a, b) => {
+            const aVal = a[this.state.sortField];
+            const bVal = b[this.state.sortField];
+            if (aVal < bVal) return this.state.sortOrder === "asc" ? -1 : 1;
+            if (aVal > bVal) return this.state.sortOrder === "asc" ? 1 : -1;
+            return 0;
           });
-          total = result.total;
-          currentData = result.data;
-        } else {
-          let filteredData = [...data];
-          if (searchTerm) {
-            const lowerSearch = searchTerm.toLowerCase();
-            filteredData = filteredData.filter(
-              (item) => columns.some(
-                (c) => String(item[c.accessor] || "").toLowerCase().includes(lowerSearch)
-              )
-            );
-          }
-          if (sortField && sortOrder) {
-            filteredData.sort((a, b) => {
-              const aVal = a[sortField];
-              const bVal = b[sortField];
-              if (aVal < bVal) return sortOrder === "asc" ? -1 : 1;
-              if (aVal > bVal) return sortOrder === "asc" ? 1 : -1;
-              return 0;
-            });
-          }
-          total = filteredData.length;
-          const skip = (currentPage - 1) * pageSize;
-          currentData = filteredData.slice(skip, skip + pageSize);
         }
-        renderRows(currentData);
-        renderPagination();
-        updateSortIndicators();
-      } catch (error) {
-        console.error("Table API Error:", error);
-      } finally {
-        setLoading(false);
+        this.state.total = filtered.length;
+        const skip = (this.state.currentPage - 1) * this.state.pageSize;
+        this.state.currentData = filtered.slice(
+          skip,
+          skip + this.state.pageSize
+        );
       }
+      this.renderRows(this.state.currentData);
+      this.renderPagination();
+      this.updateSortIndicators();
+    } catch (e) {
+      console.error("Table API Error:", e);
+    } finally {
+      this.setLoading(false);
     }
-    if (searchInputEl && searchBtnEl) {
-      const handleSearch = () => {
-        searchTerm = searchInputEl.value.trim();
-        currentPage = 1;
-        loadData();
-        if (typeof onSearch === "function") onSearch(searchTerm);
-      };
-      searchBtnEl.addEventListener("click", handleSearch);
-      searchInputEl.addEventListener("keydown", (e) => {
-        if (e.key === "Enter") handleSearch();
-      });
+  }
+  toggleRowSelection(keyStr, row, checked) {
+    if (checked) {
+      this.state.selectedKeys.add(keyStr);
+      this.state.selectedRows.set(keyStr, row);
+    } else {
+      this.state.selectedKeys.delete(keyStr);
+      this.state.selectedRows.delete(keyStr);
     }
-    loadData();
-    container.__tableAPI = {
-      reload: loadData,
-      setSearchTerm: (term) => {
-        searchTerm = term;
-        currentPage = 1;
-        loadData();
-      },
-      setPage: (page) => {
-        currentPage = page;
-        loadData();
+    const inputs = this.elements.tbody.querySelectorAll(
+      `.${PREFIX}-checkbox__input`
+    );
+    inputs.forEach((input) => {
+      const box = input.nextElementSibling;
+      if (input.checked) {
+        box.classList.remove(`${PREFIX}-checkbox__box--unchecked`);
+        box.classList.add(`${PREFIX}-checkbox__box--checked`);
+        box.innerHTML = '<svg class="ina-checkbox__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10"></path></svg>';
+      } else {
+        box.classList.remove(`${PREFIX}-checkbox__box--checked`);
+        box.classList.add(`${PREFIX}-checkbox__box--unchecked`);
+        box.innerHTML = "";
+      }
+    });
+    this.updateSelectAllState();
+    this.triggerSelectionChange();
+  }
+  toggleAllSelection(checked) {
+    this.state.currentData.forEach((row, index) => {
+      const keyStr = String(row[this.options.rowKey] || index);
+      if (checked) {
+        this.state.selectedKeys.add(keyStr);
+        this.state.selectedRows.set(keyStr, row);
+      } else {
+        this.state.selectedKeys.delete(keyStr);
+        this.state.selectedRows.delete(keyStr);
       }
+    });
+    this.renderRows(this.state.currentData);
+    this.triggerSelectionChange();
+  }
+  updateSelectAllState() {
+    if (!this.options.selectable || !this.elements.selectAllInput) return;
+    const checkboxes = this.elements.tbody.querySelectorAll(
+      'input[type="checkbox"]'
+    );
+    const checkedCount = Array.from(checkboxes).filter(
+      (cb) => cb.checked
+    ).length;
+    const totalCount = this.state.currentData.length;
+    const box = this.elements.selectAllBox;
+    box.innerHTML = "";
+    if (totalCount === 0 || checkedCount === 0) {
+      this.elements.selectAllInput.checked = false;
+      this.elements.selectAllInput.indeterminate = false;
+      box.classList.remove(
+        `${PREFIX}-checkbox__box--checked`,
+        `${PREFIX}-checkbox__box--indeterminate`
+      );
+      box.classList.add(`${PREFIX}-checkbox__box--unchecked`);
+    } else if (checkedCount === totalCount) {
+      this.elements.selectAllInput.checked = true;
+      this.elements.selectAllInput.indeterminate = false;
+      box.classList.remove(
+        `${PREFIX}-checkbox__box--unchecked`,
+        `${PREFIX}-checkbox__box--indeterminate`
+      );
+      box.classList.add(`${PREFIX}-checkbox__box--checked`);
+      box.innerHTML = '<svg class="ina-checkbox__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12l5 5l10 -10"></path></svg>';
+    } else {
+      this.elements.selectAllInput.checked = false;
+      this.elements.selectAllInput.indeterminate = true;
+      box.classList.remove(
+        `${PREFIX}-checkbox__box--unchecked`,
+        `${PREFIX}-checkbox__box--checked`
+      );
+      box.classList.add(`${PREFIX}-checkbox__box--indeterminate`);
+      box.innerHTML = '<svg class="ina-checkbox__icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"></path></svg>';
+    }
+  }
+  triggerSelectionChange() {
+    if (typeof this.options.onSelectionChange === "function") {
+      const keys = Array.from(this.state.selectedKeys);
+      const rows = Array.from(this.state.selectedRows.values());
+      this.options.onSelectionChange(keys, rows);
+    }
+  }
+  // API Methods
+  reload() {
+    this.loadData();
+  }
+  setSearchTerm(term) {
+    this.state.searchTerm = term;
+    this.state.currentPage = 1;
+    if (this.elements.searchInput) {
+      this.elements.searchInput.value = term;
+    }
+    this.loadData();
+  }
+  setPage(page) {
+    this.state.currentPage = page;
+    this.loadData();
+  }
+  getSelectedRows() {
+    return {
+      keys: Array.from(this.state.selectedKeys),
+      rows: Array.from(this.state.selectedRows.values())
     };
+  }
+};
+function initTable(selectorOrElement, options = {}) {
+  const elements = typeof selectorOrElement === "string" ? document.querySelectorAll(selectorOrElement) : selectorOrElement ? typeof selectorOrElement.length !== "undefined" ? selectorOrElement : [selectorOrElement] : document.querySelectorAll(`.${PREFIX}-table`);
+  const instances = [];
+  elements.forEach((container) => {
+    const instance = new Table(container, options);
+    container.__tableAPI = instance;
+    instances.push(instance);
   });
+  if (instances.length === 0) return null;
+  return instances.length === 1 ? instances[0] : instances;
 }
 
 // src/js/components/stateless/toast.js
@@ -3461,6 +3702,7 @@ function initAll() {
 }
 export {
   PREFIX,
+  Table,
   initAll,
   setBrandTheme,
   showToast