@idds/js 1.0.84 → 1.0.85

package/dist/index.iife.js

@@ -41,6 +41,7 @@ var InaUI = (() => {
     initTab: () => initTab,
     initTabHorizontal: () => initTabHorizontal,
     initTabVertical: () => initTabVertical,
+    initTable: () => initTable,
     initTimepicker: () => initTimepicker,
     initToggle: () => initToggle,
     setBrandTheme: () => setBrandTheme,
@@ -2902,6 +2903,334 @@ 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>
+            </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>
+      `;
+        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>
+              </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";
+              }
+              currentPage = 1;
+              loadData();
+            });
+          } else {
+            th.textContent = col.header;
+          }
+          trHeader.appendChild(th);
+        });
+      }
+      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);
+              }
+              return;
+            }
+            progress += Math.random() * 15;
+            progressFillEl.style.width = progress + "%";
+          }, 200);
+        }
+      }
+      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;
+        }
+        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;
+              }
+            } else {
+              td.textContent = row[col.accessor] !== void 0 ? row[col.accessor] : "";
+            }
+            tr.appendChild(td);
+          });
+          tbodyEl.appendChild(tr);
+        });
+      }
+      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>
+        </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);
+        });
+      }
+      async function loadData() {
+        setLoading(true);
+        try {
+          if (typeof fetchData === "function") {
+            const result = await fetchData({
+              page: currentPage,
+              pageSize,
+              sortField,
+              sortOrder,
+              searchTerm
+            });
+            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);
+        }
+      }
+      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();
+        });
+      }
+      loadData();
+      container.__tableAPI = {
+        reload: loadData,
+        setSearchTerm: (term) => {
+          searchTerm = term;
+          currentPage = 1;
+          loadData();
+        },
+        setPage: (page) => {
+          currentPage = page;
+          loadData();
+        }
+      };
+    });
+  }
+
   // src/js/components/stateless/toast.js
   var ICONS3 = {
     default: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>`,
@@ -3231,6 +3560,7 @@ var InaUI = (() => {
       initChip();
       initTabVertical();
       initTabHorizontal();
+      initTable();
     });
   }
   return __toCommonJS(bundle_exports);

package/dist/index.js

@@ -2988,6 +2988,334 @@ 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>
+            </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>
+      `;
+      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>
+              </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";
+            }
+            currentPage = 1;
+            loadData();
+          });
+        } else {
+          th.textContent = col.header;
+        }
+        trHeader.appendChild(th);
+      });
+    }
+    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);
+            }
+            return;
+          }
+          progress += Math.random() * 15;
+          progressFillEl.style.width = progress + "%";
+        }, 200);
+      }
+    }
+    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;
+      }
+      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;
+            }
+          } else {
+            td.textContent = row[col.accessor] !== void 0 ? row[col.accessor] : "";
+          }
+          tr.appendChild(td);
+        });
+        tbodyEl.appendChild(tr);
+      });
+    }
+    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>
+        </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);
+      });
+    }
+    async function loadData() {
+      setLoading(true);
+      try {
+        if (typeof fetchData === "function") {
+          const result = await fetchData({
+            page: currentPage,
+            pageSize,
+            sortField,
+            sortOrder,
+            searchTerm
+          });
+          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);
+      }
+    }
+    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();
+      });
+    }
+    loadData();
+    container.__tableAPI = {
+      reload: loadData,
+      setSearchTerm: (term) => {
+        searchTerm = term;
+        currentPage = 1;
+        loadData();
+      },
+      setPage: (page) => {
+        currentPage = page;
+        loadData();
+      }
+    };
+  });
+}
+
 // src/js/components/stateless/toast.js
 var ICONS3 = {
   default: `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="12" y1="16" x2="12" y2="12"/><line x1="12" y1="8" x2="12.01" y2="8"/></svg>`,
@@ -3129,6 +3457,7 @@ function initAll() {
   initChip();
   initTabVertical();
   initTabHorizontal();
+  initTable();
 }
 export {
   PREFIX,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@idds/js",
-  "version": "1.0.84",
+  "version": "1.0.85",
   "publishConfig": {
     "access": "public"
   },