all-purpose-table 1.0.0

package/dist/index.js

@@ -0,0 +1,580 @@
+'use strict';
+
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+// #style-inject:#style-inject
+function styleInject(css, { insertAt } = {}) {
+  if (typeof document === "undefined") return;
+  const head = document.head || document.getElementsByTagName("head")[0];
+  const style = document.createElement("style");
+  style.type = "text/css";
+  if (insertAt === "top") {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+// src/styles.css
+styleInject(":root {\n  --apt-color-primary: #1f2937;\n  --apt-color-border: #d1d5db;\n  --apt-color-border-dark: #333;\n  --apt-color-bg: white;\n  --apt-color-bg-secondary: #e5e7eb;\n  --apt-color-bg-hover: #f3f4f6;\n  --apt-color-bg-dark: #1e1e1e;\n  --apt-color-bg-dark-secondary: #333;\n  --apt-color-bg-dark-hover: rgba(136, 136, 136, 0.2);\n  --apt-color-text: #1f2937;\n  --apt-color-text-dark: #eee;\n  --apt-color-text-muted: #6b7280;\n  --apt-color-text-muted-dark: #444;\n  --apt-color-accent: #9333ea;\n  --apt-color-accent-dark: #a855f7;\n  --apt-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);\n  --apt-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);\n}\n.apt-table-container {\n  color: var(--apt-color-text);\n  border-radius: 6px;\n  margin: 0 6px;\n  border: 1px solid var(--apt-color-border);\n  background-color: var(--apt-color-bg);\n  box-shadow: var(--apt-shadow);\n  display: flex;\n  flex-direction: column;\n  overflow: hidden;\n}\n@media (prefers-color-scheme: dark) {\n  .apt-table-container {\n    color: var(--apt-color-text-dark);\n    border-color: var(--apt-color-border-dark);\n    background-color: var(--apt-color-bg-dark);\n  }\n}\n.apt-empty-state {\n  flex-grow: 1;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding: 48px 0;\n  color: #9ca3af;\n}\n@media (prefers-color-scheme: dark) {\n  .apt-empty-state {\n    color: var(--apt-color-text-muted-dark);\n  }\n}\n.apt-scroll-area {\n  flex-grow: 1;\n  overflow: auto;\n}\n.apt-table {\n  width: 100%;\n  text-align: left;\n  font-size: 0.75rem;\n  line-height: 1rem;\n  table-layout: fixed;\n}\n.apt-thead {\n  position: sticky;\n  top: 0;\n  background-color: var(--apt-color-bg-secondary);\n  z-index: 10;\n}\n@media (prefers-color-scheme: dark) {\n  .apt-thead {\n    background-color: var(--apt-color-bg-dark-secondary);\n  }\n}\n.apt-th {\n  position: relative;\n  padding: 12px 8px;\n}\n.apt-th-sortable {\n  cursor: pointer;\n}\n.apt-th-sortable:hover {\n  background-color: #d1d5db;\n}\n@media (prefers-color-scheme: dark) {\n  .apt-th-sortable:hover {\n    background-color: #444;\n  }\n}\n.apt-th-content {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.apt-resizer {\n  position: absolute;\n  right: 0;\n  top: 0;\n  height: 100%;\n  width: 4px;\n  cursor: col-resize;\n  user-select: none;\n  touch-action: none;\n  background: transparent;\n}\n.apt-resizer:hover {\n  background-color: var(--apt-color-accent);\n}\n@media (prefers-color-scheme: dark) {\n  .apt-resizer:hover {\n    background-color: var(--apt-color-accent-dark);\n  }\n}\n.apt-tbody {\n  border-top: 1px solid var(--apt-color-border);\n}\n@media (prefers-color-scheme: dark) {\n  .apt-tbody {\n    border-color: var(--apt-color-border-dark);\n  }\n}\n.apt-tbody tr {\n  border-bottom: 1px solid var(--apt-color-border);\n}\n@media (prefers-color-scheme: dark) {\n  .apt-tbody tr {\n    border-color: var(--apt-color-border-dark);\n  }\n}\n.apt-row {\n  transition: background-color 0.15s;\n}\n.apt-row:hover {\n  background-color: var(--apt-color-bg-hover);\n}\n@media (prefers-color-scheme: dark) {\n  .apt-row:hover {\n    background-color: var(--apt-color-bg-dark-hover);\n  }\n}\n.apt-row-expanded {\n  background-color: #f9fafb;\n}\n@media (prefers-color-scheme: dark) {\n  .apt-row-expanded {\n    background-color: #2b2b2b;\n  }\n}\n.apt-td {\n  padding: 4px 8px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.apt-td-actions {\n  padding: 4px 8px;\n}\n.apt-footer {\n  display: grid;\n  grid-template-columns: 1fr 1fr 1fr;\n  align-items: center;\n  padding: 8px;\n  background-color: var(--apt-color-bg-secondary);\n}\n@media (prefers-color-scheme: dark) {\n  .apt-footer {\n    background-color: var(--apt-color-bg-dark-secondary);\n  }\n}\n.apt-footer-left {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.apt-footer-center {\n  justify-self: center;\n  font-size: 0.875rem;\n  color: #374151;\n}\n@media (prefers-color-scheme: dark) {\n  .apt-footer-center {\n    color: #d1d5db;\n  }\n}\n.apt-footer-right {\n  justify-self: end;\n  display: flex;\n  align-items: center;\n  gap: 8px;\n}\n.apt-rows-label {\n  font-size: 0.75rem;\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n  color: #4b5563;\n}\n@media (prefers-color-scheme: dark) {\n  .apt-rows-label {\n    color: #d1d5db;\n  }\n}\n.apt-rows-select {\n  padding: 4px 8px;\n  font-size: 0.875rem;\n  border-radius: 4px;\n  background-color: white;\n  border: 1px solid var(--apt-color-border);\n}\n@media (prefers-color-scheme: dark) {\n  .apt-rows-select {\n    background-color: #444;\n    border-color: #555;\n    color: var(--apt-color-text-dark);\n  }\n}\n.apt-btn {\n  padding: 4px 12px;\n  font-size: 0.875rem;\n  border-radius: 4px;\n  background-color: white;\n  border: 1px solid var(--apt-color-border);\n  cursor: pointer;\n  transition: background-color 0.15s;\n}\n.apt-btn:hover:not(:disabled) {\n  background-color: #d1d5db;\n}\n.apt-btn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n@media (prefers-color-scheme: dark) {\n  .apt-btn {\n    background-color: #444;\n    color: var(--apt-color-text-dark);\n    border-color: #555;\n  }\n  .apt-btn:hover:not(:disabled) {\n    background-color: #555;\n  }\n}\n.apt-sort-icon {\n  display: inline-block;\n  margin-left: 4px;\n  width: 12px;\n  height: 12px;\n  opacity: 0.3;\n}\n.apt-sort-icon-active {\n  opacity: 1;\n}\n.apt-column-toggle-container {\n  position: relative;\n}\n.apt-column-toggle-btn {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  border-radius: 8px;\n  border: 1px solid var(--apt-color-border);\n  background-color: #f9fafb;\n  padding: 8px 12px;\n  font-size: 0.875rem;\n  font-weight: 500;\n  color: var(--apt-color-primary);\n  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);\n  cursor: pointer;\n  transition: background-color 0.15s;\n}\n.apt-column-toggle-btn:hover {\n  background-color: #f3f4f6;\n}\n.apt-column-toggle-btn:focus {\n  outline: none;\n}\n@media (prefers-color-scheme: dark) {\n  .apt-column-toggle-btn {\n    border-color: #444;\n    background-color: #333;\n    color: var(--apt-color-text-dark);\n  }\n  .apt-column-toggle-btn:hover {\n    background-color: #444;\n  }\n}\n.apt-column-toggle-icon {\n  font-size: 1.125rem;\n}\n.apt-column-toggle-count {\n  font-size: 0.75rem;\n  opacity: 0.7;\n}\n.apt-column-toggle-menu {\n  position: absolute;\n  right: 0;\n  margin-top: 8px;\n  width: 288px;\n  border-radius: 8px;\n  border: 1px solid var(--apt-color-border);\n  background-color: white;\n  box-shadow: var(--apt-shadow-lg);\n  z-index: 50;\n  max-height: 384px;\n  overflow-y: auto;\n}\n@media (prefers-color-scheme: dark) {\n  .apt-column-toggle-menu {\n    border-color: #444;\n    background-color: #222;\n  }\n}\n.apt-column-toggle-menu-inner {\n  padding: 12px;\n}\n.apt-column-toggle-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 12px;\n  border-bottom: 1px solid #e5e7eb;\n  padding-bottom: 8px;\n}\n@media (prefers-color-scheme: dark) {\n  .apt-column-toggle-header {\n    border-color: #444;\n  }\n}\n.apt-column-toggle-title {\n  font-size: 0.875rem;\n  font-weight: 600;\n  color: var(--apt-color-primary);\n}\n@media (prefers-color-scheme: dark) {\n  .apt-column-toggle-title {\n    color: var(--apt-color-text-dark);\n  }\n}\n.apt-column-toggle-select-all {\n  font-size: 0.75rem;\n  color: var(--apt-color-accent);\n  background: none;\n  border: none;\n  cursor: pointer;\n  text-decoration: none;\n}\n.apt-column-toggle-select-all:hover {\n  text-decoration: underline;\n}\n@media (prefers-color-scheme: dark) {\n  .apt-column-toggle-select-all {\n    color: var(--apt-color-accent-dark);\n  }\n}\n.apt-column-toggle-list {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n}\n.apt-column-toggle-item {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n  padding: 6px 8px;\n  border-radius: 4px;\n  transition: background-color 0.15s;\n}\n.apt-column-toggle-item:hover {\n  background-color: #f3f4f6;\n}\n@media (prefers-color-scheme: dark) {\n  .apt-column-toggle-item:hover {\n    background-color: #333;\n  }\n}\n.apt-column-toggle-checkbox {\n  width: 16px;\n  height: 16px;\n  color: var(--apt-color-accent);\n  border-radius: 12px;\n  cursor: pointer;\n  accent-color: var(--apt-color-accent);\n}\n.apt-column-toggle-label {\n  font-size: 0.875rem;\n  color: var(--apt-color-primary);\n  flex: 1;\n}\n@media (prefers-color-scheme: dark) {\n  .apt-column-toggle-label {\n    color: var(--apt-color-text-dark);\n  }\n}\n.apt-flex {\n  display: flex;\n}\n.apt-items-center {\n  align-items: center;\n}\n.apt-gap-2 {\n  gap: 8px;\n}\n");
+var SortIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className,
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "currentColor",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 3L3 6h6L6 3zM6 9l3-3H3l3 3z" })
+  }
+);
+var SortUpIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className,
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "currentColor",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 2L2 7h8L6 2z" })
+  }
+);
+var SortDownIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className,
+    width: "12",
+    height: "12",
+    viewBox: "0 0 12 12",
+    fill: "currentColor",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 10l4-5H2l4 5z" })
+  }
+);
+var Table = ({
+  manualHeaders,
+  manualRowData,
+  initialSort,
+  height = "100%",
+  rowHeight = 40,
+  rowsPerPage = 60,
+  shouldPaginate = true,
+  rowClassName,
+  onRowClick,
+  minColWidth = 50,
+  mobileAutoSizeOnHeaderClick = false,
+  mobileBreakpoint = 768,
+  columnWidthsStorageKey,
+  rowsPerPageOptions = [20, 50, 100],
+  onRowsPerPageChange,
+  expandedRowId,
+  renderExpandedRow,
+  renderFullRow
+}) => {
+  const [sortConfig, setSortConfig] = react.useState(
+    initialSort || null
+  );
+  const [currentPage, setCurrentPage] = react.useState(1);
+  const [columnWidths, setColumnWidths] = react.useState({});
+  const [expandedColumns, setExpandedColumns] = react.useState(
+    () => /* @__PURE__ */ new Set()
+  );
+  const initialColumnWidthsRef = react.useRef({});
+  const tableRef = react.useRef(null);
+  const textMeasureContextRef = react.useRef(null);
+  const [isMobile, setIsMobile] = react.useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.innerWidth < mobileBreakpoint;
+  });
+  const headers = react.useMemo(() => manualHeaders || [], [manualHeaders]);
+  const loadStoredColumnWidths = (fallback) => {
+    if (!columnWidthsStorageKey || typeof window === "undefined") {
+      return fallback;
+    }
+    try {
+      const raw = window.localStorage.getItem(columnWidthsStorageKey);
+      if (!raw) return fallback;
+      const parsed = JSON.parse(raw);
+      if (!parsed || typeof parsed !== "object") return fallback;
+      const next = { ...fallback };
+      Object.keys(next).forEach((key) => {
+        const val = parsed[key];
+        if (typeof val === "number" || typeof val === "string") {
+          next[key] = val;
+        }
+      });
+      return next;
+    } catch {
+      return fallback;
+    }
+  };
+  react.useEffect(() => {
+    const initialWidths = {};
+    headers.forEach((header) => {
+      initialWidths[header.accessor] = header.width;
+    });
+    initialColumnWidthsRef.current = initialWidths;
+    setColumnWidths(
+      loadStoredColumnWidths(initialWidths)
+    );
+    setExpandedColumns(/* @__PURE__ */ new Set());
+  }, [headers, columnWidthsStorageKey]);
+  react.useEffect(() => {
+    if (!columnWidthsStorageKey || typeof window === "undefined") return;
+    if (Object.keys(columnWidths).length === 0) return;
+    window.localStorage.setItem(
+      columnWidthsStorageKey,
+      JSON.stringify(columnWidths)
+    );
+  }, [columnWidths, columnWidthsStorageKey]);
+  react.useEffect(() => {
+    if (typeof window === "undefined") return void 0;
+    const handleResize = () => setIsMobile(window.innerWidth < mobileBreakpoint);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [mobileBreakpoint]);
+  react.useEffect(() => {
+    setCurrentPage(1);
+  }, [rowsPerPage]);
+  const measureTextWidth = (text) => {
+    if (typeof document === "undefined") return String(text ?? "").length * 8;
+    const ctx = textMeasureContextRef.current || (() => {
+      const canvas = document.createElement("canvas");
+      const context = canvas.getContext("2d");
+      if (tableRef.current && context) {
+        const font = window.getComputedStyle(tableRef.current).font;
+        context.font = font || "12px sans-serif";
+      }
+      textMeasureContextRef.current = context;
+      return context;
+    })();
+    return ctx ? ctx.measureText(String(text ?? "")).width : 0;
+  };
+  const parseWidthValue = (value, fallback) => {
+    if (typeof value === "number" && !Number.isNaN(value)) return value;
+    if (typeof value === "string") {
+      const parsed = parseFloat(value);
+      if (!Number.isNaN(parsed)) return parsed;
+    }
+    return fallback;
+  };
+  const rows = react.useMemo(() => {
+    if (!Array.isArray(manualRowData)) return [];
+    const src = manualRowData.filter(Boolean).filter((r) => typeof r === "object");
+    const makeSafeId = (full, idx) => {
+      const rawId = full?.id;
+      const v1 = rawId !== void 0 && rawId !== null && String(rawId).trim() !== "" ? String(rawId).trim() : "";
+      const v2 = [
+        full?.order_id,
+        full?.bom_id,
+        full?.bom_workstation_status_id,
+        full?.bom_data_id,
+        full?.unique_task_info_id,
+        full?.order_data_id
+      ].filter((v) => v !== void 0 && v !== null && String(v) !== "").join("-");
+      return v1 || `${v2}-row${idx}`;
+    };
+    return src.map((full, idx) => {
+      const id = makeSafeId(full, idx);
+      const base = { id, "#": idx + 1, _meta: full };
+      headers.forEach((h) => {
+        if (!["#", "details_meta"].includes(h.accessor)) {
+          base[h.accessor] = full?.[h.accessor] ?? "";
+        }
+      });
+      return base;
+    });
+  }, [manualRowData, headers]);
+  const sortedRows = react.useMemo(() => {
+    if (!sortConfig || !sortConfig.key) {
+      return rows;
+    }
+    const sortableRows = [...rows];
+    sortableRows.sort((a, b) => {
+      const aVal = a[sortConfig.key];
+      const bVal = b[sortConfig.key];
+      if (aVal < bVal) {
+        return sortConfig.direction === "asc" ? -1 : 1;
+      }
+      if (aVal > bVal) {
+        return sortConfig.direction === "asc" ? 1 : -1;
+      }
+      return 0;
+    });
+    return sortableRows;
+  }, [rows, sortConfig]);
+  const effectiveShouldPaginate = shouldPaginate && sortedRows.length > rowsPerPage;
+  const totalPages = effectiveShouldPaginate ? Math.ceil(sortedRows.length / rowsPerPage) : 1;
+  if (currentPage > totalPages && totalPages > 0) {
+    setCurrentPage(1);
+  }
+  const paginatedRows = react.useMemo(() => {
+    if (!effectiveShouldPaginate) return sortedRows;
+    const startIndex = (currentPage - 1) * rowsPerPage;
+    return sortedRows.slice(startIndex, startIndex + rowsPerPage);
+  }, [sortedRows, currentPage, rowsPerPage, effectiveShouldPaginate]);
+  const handleSort = (key, isSortable) => {
+    if (!isSortable) return;
+    let direction = "asc";
+    if (sortConfig && sortConfig.key === key && sortConfig.direction === "asc") {
+      direction = "desc";
+    }
+    setSortConfig({ key, direction });
+    setCurrentPage(1);
+  };
+  const autoSizeColumn = (colIndex, header) => {
+    if (!tableRef.current) return;
+    const tableEl = tableRef.current;
+    let maxWidth = measureTextWidth(header?.label || "");
+    const collectCellWidth = (cell) => {
+      if (!cell) return;
+      const scrollWidth = cell.scrollWidth || cell.offsetWidth || 0;
+      const style = window.getComputedStyle(cell);
+      const borderWidth = parseFloat(style.borderLeftWidth || "0") + parseFloat(style.borderRightWidth || "0");
+      maxWidth = Math.max(maxWidth, Math.ceil(scrollWidth + borderWidth));
+    };
+    const headerCell = tableEl.tHead?.rows?.[0]?.cells?.[colIndex] || tableEl.querySelector(`thead th:nth-child(${colIndex + 1})`);
+    collectCellWidth(headerCell);
+    const bodyRows = tableEl.tBodies?.[0]?.rows || [];
+    for (const row of bodyRows) {
+      collectCellWidth(row.cells?.[colIndex]);
+    }
+    rows.forEach((r) => {
+      maxWidth = Math.max(
+        maxWidth,
+        Math.ceil(measureTextWidth(r[header.accessor]))
+      );
+    });
+    const minWidthPx = parseWidthValue(
+      header?.minWidth,
+      parseWidthValue(minColWidth, 50)
+    );
+    const finalWidth = Math.max(maxWidth + 12, minWidthPx);
+    setColumnWidths((prev) => ({
+      ...prev,
+      [header.accessor]: `${finalWidth}px`
+    }));
+  };
+  const resetColumnWidth = (accessor) => {
+    const regularWidth = initialColumnWidthsRef.current[accessor];
+    setColumnWidths((prev) => {
+      if (regularWidth === void 0) {
+        const next = { ...prev };
+        delete next[accessor];
+        return next;
+      }
+      return { ...prev, [accessor]: regularWidth };
+    });
+  };
+  const handleHeaderClick = (header, colIndex) => {
+    if (mobileAutoSizeOnHeaderClick && isMobile) {
+      const isExpanded = expandedColumns.has(header.accessor);
+      if (isExpanded) {
+        resetColumnWidth(header.accessor);
+        setExpandedColumns((prev) => {
+          const next = new Set(prev);
+          next.delete(header.accessor);
+          return next;
+        });
+      } else {
+        autoSizeColumn(colIndex, header);
+        setExpandedColumns((prev) => {
+          const next = new Set(prev);
+          next.add(header.accessor);
+          return next;
+        });
+      }
+      return;
+    }
+    handleSort(header.accessor, header.isSortable);
+  };
+  const getSortIcon = (key) => {
+    if (mobileAutoSizeOnHeaderClick && isMobile) return null;
+    if (!sortConfig || sortConfig.key !== key) {
+      return /* @__PURE__ */ jsxRuntime.jsx(SortIcon, { className: "apt-sort-icon" });
+    }
+    return sortConfig.direction === "asc" ? /* @__PURE__ */ jsxRuntime.jsx(SortUpIcon, { className: "apt-sort-icon apt-sort-icon-active" }) : /* @__PURE__ */ jsxRuntime.jsx(SortDownIcon, { className: "apt-sort-icon apt-sort-icon-active" });
+  };
+  const handleMouseDown = (e, accessor) => {
+    e.preventDefault();
+    const startX = e.clientX;
+    const th = e.target.closest("th");
+    if (!th) return;
+    const header = headers.find((h) => h.accessor === accessor);
+    const minResizeWidth = parseWidthValue(header?.minWidth, minColWidth);
+    const startWidth = th.offsetWidth;
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+    const handleMouseMove = (moveEvent) => {
+      const deltaX = moveEvent.clientX - startX;
+      const newWidth = startWidth + deltaX;
+      const finalWidth = Math.max(newWidth, minResizeWidth);
+      setColumnWidths((prev) => ({
+        ...prev,
+        [accessor]: `${finalWidth}px`
+      }));
+    };
+    const handleMouseUp = () => {
+      document.body.style.cursor = "";
+      document.body.style.userSelect = "";
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("mouseup", handleMouseUp);
+  };
+  const containerStyle = {
+    height: sortedRows.length === 0 ? height : !effectiveShouldPaginate ? "auto" : height,
+    maxHeight: !effectiveShouldPaginate ? height : void 0
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "apt-table-container", style: containerStyle, children: sortedRows.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "apt-empty-state", children: "No rows to display." }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "apt-scroll-area", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "apt-table", ref: tableRef, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("colgroup", { children: headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(
+        "col",
+        {
+          style: {
+            width: columnWidths[header.accessor],
+            minWidth: `${parseWidthValue(
+              header.minWidth,
+              minColWidth
+            )}px`
+          }
+        },
+        `col-${header.accessor}`
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { className: "apt-thead", children: /* @__PURE__ */ jsxRuntime.jsx("tr", { children: headers.map((header, idx) => {
+        const isHeaderClickable = mobileAutoSizeOnHeaderClick && isMobile || header.isSortable;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "th",
+          {
+            onClick: () => handleHeaderClick(header, idx),
+            className: `apt-th ${isHeaderClickable ? "apt-th-sortable" : ""}`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "apt-th-content", children: [
+                header.label,
+                header.isSortable && !(mobileAutoSizeOnHeaderClick && isMobile) && getSortIcon(header.accessor)
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: "apt-resizer",
+                  onMouseDown: (e) => {
+                    e.stopPropagation();
+                    handleMouseDown(e, header.accessor);
+                  }
+                }
+              )
+            ]
+          },
+          header.accessor
+        );
+      }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: "apt-tbody", children: paginatedRows.map((row) => {
+        const isExpanded = expandedRowId === row.id;
+        const isFullRow = typeof renderFullRow === "function" && row?._meta?.fullRow;
+        return /* @__PURE__ */ jsxRuntime.jsxs(react.Fragment, { children: [
+          isFullRow ? /* @__PURE__ */ jsxRuntime.jsx(
+            "tr",
+            {
+              className: `apt-row ${rowClassName ? rowClassName(row) : ""}`,
+              onClick: () => onRowClick && onRowClick(row),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "td",
+                {
+                  colSpan: headers.length,
+                  className: "apt-td",
+                  style: { padding: 0 },
+                  children: renderFullRow(row)
+                }
+              )
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "tr",
+            {
+              className: `apt-row ${rowClassName ? rowClassName(row) : ""}`,
+              onClick: () => onRowClick && onRowClick(row),
+              style: { height: `${rowHeight}px` },
+              children: headers.map((header) => {
+                const value = row[header.accessor];
+                const cellContent = header.cellRenderer ? header.cellRenderer({ row, value }) : value;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "td",
+                  {
+                    className: header.accessor === "actions" ? "apt-td-actions" : "apt-td",
+                    children: header.accessor === "actions" ? /* @__PURE__ */ jsxRuntime.jsx("div", { onClick: (e) => e.stopPropagation(), children: cellContent }) : cellContent
+                  },
+                  `${row.id}-${header.accessor}`
+                );
+              })
+            }
+          ),
+          isExpanded && typeof renderExpandedRow === "function" && /* @__PURE__ */ jsxRuntime.jsx("tr", { className: "apt-row-expanded", children: /* @__PURE__ */ jsxRuntime.jsx(
+            "td",
+            {
+              colSpan: headers.length,
+              className: "apt-td",
+              style: { padding: 0 },
+              children: renderExpandedRow(row)
+            }
+          ) })
+        ] }, row.id);
+      }) })
+    ] }) }),
+    shouldPaginate && totalPages > 1 || Array.isArray(rowsPerPageOptions) && rowsPerPageOptions.length ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "apt-footer", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "apt-footer-left", children: Array.isArray(rowsPerPageOptions) && rowsPerPageOptions.length > 0 && onRowsPerPageChange && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "apt-rows-label", children: "Rows" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "select",
+          {
+            value: rowsPerPage,
+            onChange: (e) => onRowsPerPageChange(Number(e.target.value)),
+            className: "apt-rows-select",
+            children: rowsPerPageOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt, children: opt }, opt))
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "apt-footer-center", children: shouldPaginate && totalPages > 1 ? `Page ${currentPage} of ${totalPages}` : "" }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "apt-footer-right", children: shouldPaginate && totalPages > 1 ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => setCurrentPage((p) => Math.max(1, p - 1)),
+            disabled: currentPage === 1,
+            className: "apt-btn",
+            children: "Previous"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => setCurrentPage((p) => Math.min(totalPages, p + 1)),
+            disabled: currentPage === totalPages,
+            className: "apt-btn",
+            children: "Next"
+          }
+        )
+      ] }) : null })
+    ] }) : null
+  ] }) });
+};
+var Table_default = Table;
+var ViewColumnIcon = ({ className }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    className,
+    width: "18",
+    height: "18",
+    viewBox: "0 0 24 24",
+    fill: "currentColor",
+    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 18h5V5h-5v13zm-6 0h5V5H4v13zM16 5v13h5V5h-5z" })
+  }
+);
+var ColumnVisibilityToggle = ({
+  availableColumns,
+  visibleColumns,
+  onColumnsChange,
+  storageKey
+}) => {
+  const [isOpen, setIsOpen] = react.useState(false);
+  const menuRef = react.useRef(null);
+  react.useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("mousedown", handleClickOutside);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [isOpen]);
+  const saveToStorage = (columns) => {
+    if (storageKey && typeof window !== "undefined") {
+      try {
+        window.localStorage.setItem(storageKey, JSON.stringify(columns));
+      } catch (error) {
+        console.warn(
+          "Failed to save column visibility to localStorage:",
+          error
+        );
+      }
+    }
+  };
+  const handleToggleColumn = (columnKey) => {
+    const newVisibleColumns = visibleColumns.includes(columnKey) ? visibleColumns.filter((key) => key !== columnKey) : [...visibleColumns, columnKey];
+    saveToStorage(newVisibleColumns);
+    onColumnsChange(newVisibleColumns);
+  };
+  const handleSelectAll = () => {
+    const allKeys = availableColumns.map((col) => col.key);
+    saveToStorage(allKeys);
+    onColumnsChange(allKeys);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "apt-column-toggle-container", ref: menuRef, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setIsOpen(!isOpen),
+        className: "apt-column-toggle-btn",
+        "aria-label": "Toggle column visibility",
+        "aria-expanded": isOpen,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ViewColumnIcon, { className: "apt-column-toggle-icon" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Columns" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "apt-column-toggle-count", children: [
+            "(",
+            visibleColumns.length,
+            ")"
+          ] })
+        ]
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "apt-column-toggle-menu", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "apt-column-toggle-menu-inner", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "apt-column-toggle-header", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "apt-column-toggle-title", children: "Toggle Columns" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: handleSelectAll,
+            className: "apt-column-toggle-select-all",
+            children: "Select All"
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "apt-column-toggle-list", children: availableColumns.map((column) => {
+        const isVisible = visibleColumns.includes(column.key);
+        return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "apt-column-toggle-item", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "checkbox",
+              checked: isVisible,
+              onChange: () => handleToggleColumn(column.key),
+              className: "apt-column-toggle-checkbox"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "apt-column-toggle-label", children: column.label })
+        ] }, column.key);
+      }) })
+    ] }) })
+  ] });
+};
+var ColumnVisibilityToggle_default = ColumnVisibilityToggle;
+
+exports.ColumnVisibilityToggle = ColumnVisibilityToggle_default;
+exports.Table = Table_default;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map