@idds/js 1.0.85 → 1.0.87

package/dist/index.iife.js

@@ -20,6 +20,7 @@ var InaUI = (() => {
   // src/js/bundle.js
   var bundle_exports = {};
   __export(bundle_exports, {
+    Table: () => Table,
     initAccordion: () => initAccordion,
     initButtonGroup: () => initButtonGroup,
     initCheckbox: () => initCheckbox,
@@ -2904,331 +2905,572 @@ var InaUI = (() => {
   }
 
   // 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