@expcat/tigercat-vue 1.0.4 → 1.1.0

package/dist/chunk-WU2KCS6H.js

@@ -0,0 +1,1096 @@
+'use strict';
+
+var vue = require('vue');
+var tigercatCore = require('@expcat/tigercat-core');
+
+// src/components/Table.ts
+
+// src/components/Table/props.ts
+var tableProps = {
+  columns: {
+    type: Array,
+    required: true
+  },
+  columnLockable: {
+    type: Boolean,
+    default: false
+  },
+  dataSource: {
+    type: Array,
+    default: () => []
+  },
+  sort: {
+    type: Object
+  },
+  defaultSort: {
+    type: Object,
+    default: () => ({
+      key: null,
+      direction: null
+    })
+  },
+  filters: {
+    type: Object
+  },
+  defaultFilters: {
+    type: Object,
+    default: () => ({})
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  bordered: {
+    type: Boolean,
+    default: false
+  },
+  striped: {
+    type: Boolean,
+    default: false
+  },
+  hoverable: {
+    type: Boolean,
+    default: true
+  },
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  emptyText: {
+    type: String,
+    default: "No data"
+  },
+  pagination: {
+    type: [Object, Boolean],
+    default: () => ({
+      current: 1,
+      pageSize: 10,
+      total: 0,
+      pageSizeOptions: [10, 20, 50, 100],
+      showSizeChanger: true,
+      showTotal: true
+    })
+  },
+  rowSelection: {
+    type: Object
+  },
+  expandable: {
+    type: Object
+  },
+  rowKey: {
+    type: [String, Function],
+    default: "id"
+  },
+  rowClassName: {
+    type: [String, Function]
+  },
+  stickyHeader: {
+    type: Boolean,
+    default: false
+  },
+  maxHeight: {
+    type: [String, Number]
+  },
+  tableLayout: {
+    type: String,
+    default: "auto"
+  },
+  // --- v0.6.0 props ---
+  virtual: { type: Boolean, default: false },
+  virtualHeight: { type: Number, default: 400 },
+  virtualItemHeight: { type: Number, default: 40 },
+  virtualThreshold: { type: Number, default: 1e3 },
+  editable: { type: Boolean, default: false },
+  editableCells: { type: Object },
+  filterMode: { type: String, default: "basic" },
+  advancedFilterRules: { type: Array, default: () => [] },
+  columnDraggable: { type: Boolean, default: false },
+  summaryRow: { type: Object },
+  groupBy: { type: String },
+  exportable: { type: Boolean, default: false },
+  exportFilename: { type: String, default: "export" }
+};
+var tableEmits = [
+  "change",
+  "row-click",
+  "selection-change",
+  "sort-change",
+  "filter-change",
+  "page-change",
+  "expand-change",
+  "cell-change",
+  "column-order-change",
+  "export"
+];
+function useTableState(props, emit, measuredColumnWidths) {
+  const paginationConfig = vue.computed(() => {
+    return props.pagination !== false && typeof props.pagination === "object" ? props.pagination : null;
+  });
+  const isSortControlled = vue.computed(() => props.sort !== void 0);
+  const isFiltersControlled = vue.computed(() => props.filters !== void 0);
+  const isSelectionControlled = vue.computed(() => props.rowSelection?.selectedRowKeys !== void 0);
+  const isExpandControlled = vue.computed(() => props.expandable?.expandedRowKeys !== void 0);
+  const uncontrolledSortState = vue.ref(props.defaultSort ?? { key: null, direction: null });
+  const uncontrolledFilterState = vue.ref(props.defaultFilters ?? {});
+  const uncontrolledCurrentPage = vue.ref(
+    paginationConfig.value?.defaultCurrent ?? paginationConfig.value?.current ?? 1
+  );
+  const uncontrolledCurrentPageSize = vue.ref(
+    paginationConfig.value?.defaultPageSize ?? paginationConfig.value?.pageSize ?? 10
+  );
+  const uncontrolledSelectedRowKeys = vue.ref(
+    props.rowSelection?.defaultSelectedRowKeys ?? props.rowSelection?.selectedRowKeys ?? []
+  );
+  const uncontrolledExpandedRowKeys = vue.ref(
+    props.expandable?.defaultExpandedRowKeys ?? props.expandable?.expandedRowKeys ?? []
+  );
+  const sortState = vue.computed(() => props.sort ?? uncontrolledSortState.value);
+  const filterState = vue.computed(() => props.filters ?? uncontrolledFilterState.value);
+  const currentPage = vue.computed(() => {
+    return paginationConfig.value?.current ?? uncontrolledCurrentPage.value;
+  });
+  const currentPageSize = vue.computed(() => {
+    return paginationConfig.value?.pageSize ?? uncontrolledCurrentPageSize.value;
+  });
+  const selectedRowKeys = vue.computed(() => {
+    return props.rowSelection?.selectedRowKeys ?? uncontrolledSelectedRowKeys.value;
+  });
+  const expandedRowKeys = vue.computed(() => {
+    return props.expandable?.expandedRowKeys ?? uncontrolledExpandedRowKeys.value;
+  });
+  vue.watch(
+    () => props.sort,
+    (next) => {
+      if (next !== void 0) {
+        uncontrolledSortState.value = next;
+      }
+    }
+  );
+  vue.watch(
+    () => props.filters,
+    (next) => {
+      if (next !== void 0) {
+        uncontrolledFilterState.value = next;
+      }
+    }
+  );
+  vue.watch(
+    () => paginationConfig.value?.current,
+    (next) => {
+      if (next !== void 0) {
+        uncontrolledCurrentPage.value = next;
+      }
+    }
+  );
+  vue.watch(
+    () => paginationConfig.value?.pageSize,
+    (next) => {
+      if (next !== void 0) {
+        uncontrolledCurrentPageSize.value = next;
+      }
+    }
+  );
+  vue.watch(
+    () => props.rowSelection?.selectedRowKeys,
+    (next) => {
+      if (next !== void 0) {
+        uncontrolledSelectedRowKeys.value = next;
+      }
+    }
+  );
+  vue.watch(
+    () => props.expandable?.expandedRowKeys,
+    (next) => {
+      if (next !== void 0) {
+        uncontrolledExpandedRowKeys.value = next;
+      }
+    }
+  );
+  const fixedOverrides = vue.ref({});
+  const displayColumns = vue.computed(() => {
+    return props.columns.map((column) => {
+      const hasOverride = column.key in fixedOverrides.value;
+      return {
+        ...column,
+        fixed: hasOverride ? fixedOverrides.value[column.key] : column.fixed
+      };
+    });
+  });
+  const fixedColumnsInfo = vue.computed(() => {
+    return tigercatCore.getFixedColumnOffsets(displayColumns.value, measuredColumnWidths.value);
+  });
+  const columnByKey = vue.computed(() => {
+    const map = {};
+    for (const column of displayColumns.value) {
+      map[column.key] = column;
+    }
+    return map;
+  });
+  function toggleColumnLock(columnKey) {
+    const original = props.columns.find((c) => c.key === columnKey)?.fixed;
+    const hasOverride = columnKey in fixedOverrides.value;
+    const current = hasOverride ? fixedOverrides.value[columnKey] : original;
+    const isLocked = current === "left" || current === "right";
+    fixedOverrides.value[columnKey] = isLocked ? false : "left";
+  }
+  const processedData = vue.computed(() => {
+    let data = props.dataSource ?? [];
+    if (props.filterMode === "advanced" && (props.advancedFilterRules?.length ?? 0) > 0) {
+      data = tigercatCore.filterDataAdvanced(data, props.advancedFilterRules ?? []);
+    } else {
+      data = tigercatCore.filterData(data, filterState.value);
+    }
+    if (sortState.value.key && sortState.value.direction) {
+      const column = columnByKey.value[sortState.value.key];
+      data = tigercatCore.sortData(data, sortState.value.key, sortState.value.direction, column?.sortFn);
+    }
+    return data;
+  });
+  const paginatedData = vue.computed(() => {
+    if (props.pagination === false) {
+      return processedData.value;
+    }
+    return tigercatCore.paginateData(processedData.value, currentPage.value, currentPageSize.value);
+  });
+  const paginatedRowKeys = vue.computed(() => {
+    return tigercatCore.createTableRowKeyCache(props.rowKey).getMany(
+      paginatedData.value
+    );
+  });
+  const selectedRowKeySet = vue.computed(() => {
+    return new Set(selectedRowKeys.value);
+  });
+  const expandedRowKeySet = vue.computed(() => {
+    return new Set(expandedRowKeys.value);
+  });
+  const totalColumnCount = vue.computed(() => {
+    let count = displayColumns.value.length;
+    if (props.rowSelection) count += 1;
+    if (props.expandable) count += 1;
+    return count;
+  });
+  const paginationInfo = vue.computed(() => {
+    if (props.pagination === false) {
+      return null;
+    }
+    const total = paginationConfig.value?.total !== void 0 && paginationConfig.value.total > 0 ? paginationConfig.value.total : processedData.value.length;
+    return tigercatCore.calculatePagination(total, currentPage.value, currentPageSize.value);
+  });
+  function handleSort(columnKey) {
+    const column = displayColumns.value.find((col) => col.key === columnKey);
+    if (!column || !column.sortable) {
+      return;
+    }
+    let newDirection = "asc";
+    if (sortState.value.key === columnKey) {
+      if (sortState.value.direction === "asc") {
+        newDirection = "desc";
+      } else if (sortState.value.direction === "desc") {
+        newDirection = null;
+      }
+    }
+    const nextSortState = {
+      key: newDirection ? columnKey : null,
+      direction: newDirection
+    };
+    if (!isSortControlled.value) {
+      uncontrolledSortState.value = nextSortState;
+    }
+    emit("sort-change", nextSortState);
+    emit("change", {
+      sort: nextSortState,
+      filters: filterState.value,
+      pagination: props.pagination !== false ? {
+        current: currentPage.value,
+        pageSize: currentPageSize.value
+      } : null
+    });
+  }
+  function handleFilter(columnKey, value) {
+    const nextFilterState = {
+      ...filterState.value,
+      [columnKey]: value
+    };
+    if (!isFiltersControlled.value) {
+      uncontrolledFilterState.value = nextFilterState;
+    }
+    uncontrolledCurrentPage.value = 1;
+    emit("filter-change", nextFilterState);
+    emit("change", {
+      sort: sortState.value,
+      filters: nextFilterState,
+      pagination: props.pagination !== false ? {
+        current: 1,
+        pageSize: currentPageSize.value
+      } : null
+    });
+  }
+  function handlePageChange(page) {
+    uncontrolledCurrentPage.value = page;
+    emit("page-change", { current: page, pageSize: currentPageSize.value });
+    emit("change", {
+      sort: sortState.value,
+      filters: filterState.value,
+      pagination: {
+        current: page,
+        pageSize: currentPageSize.value
+      }
+    });
+  }
+  function handlePageSizeChange(pageSize) {
+    uncontrolledCurrentPageSize.value = pageSize;
+    uncontrolledCurrentPage.value = 1;
+    emit("page-change", { current: 1, pageSize });
+    emit("change", {
+      sort: sortState.value,
+      filters: filterState.value,
+      pagination: {
+        current: 1,
+        pageSize
+      }
+    });
+  }
+  function handleToggleExpand(key, record) {
+    const isExpanded = expandedRowKeySet.value.has(key);
+    const newKeys = isExpanded ? expandedRowKeys.value.filter((k) => k !== key) : [...expandedRowKeys.value, key];
+    if (!isExpandControlled.value) {
+      uncontrolledExpandedRowKeys.value = newKeys;
+    }
+    emit("expand-change", newKeys, record, !isExpanded);
+  }
+  function handleRowClick(record, index, key) {
+    emit("row-click", record, index);
+    if (props.expandable?.expandRowByClick) {
+      const isExpandable = props.expandable?.rowExpandable ? props.expandable.rowExpandable(record) : true;
+      if (isExpandable) {
+        handleToggleExpand(key, record);
+      }
+    }
+  }
+  function handleSelectRow(key, checked) {
+    let newKeys;
+    if (props.rowSelection?.type === "radio") {
+      newKeys = checked ? [key] : [];
+    } else {
+      if (checked) {
+        newKeys = [...selectedRowKeys.value, key];
+      } else {
+        newKeys = selectedRowKeys.value.filter((k) => k !== key);
+      }
+    }
+    if (!isSelectionControlled.value) {
+      uncontrolledSelectedRowKeys.value = newKeys;
+    }
+    emit("selection-change", newKeys);
+  }
+  function handleSelectAll(checked) {
+    if (checked) {
+      const nextKeys = paginatedRowKeys.value;
+      if (!isSelectionControlled.value) {
+        uncontrolledSelectedRowKeys.value = nextKeys;
+      }
+      emit("selection-change", nextKeys);
+    } else {
+      if (!isSelectionControlled.value) {
+        uncontrolledSelectedRowKeys.value = [];
+      }
+      emit("selection-change", []);
+    }
+  }
+  const allSelected = vue.computed(() => {
+    if (paginatedRowKeys.value.length === 0) {
+      return false;
+    }
+    return paginatedRowKeys.value.every((key) => selectedRowKeySet.value.has(key));
+  });
+  const someSelected = vue.computed(() => {
+    return selectedRowKeys.value.length > 0 && !allSelected.value;
+  });
+  const editingCell = vue.ref(null);
+  const editingValue = vue.ref("");
+  function isCellEditable(columnKey, rowIndex) {
+    if (!props.editable) return false;
+    if (!props.editableCells) return true;
+    return !!props.editableCells.get(columnKey)?.has(rowIndex);
+  }
+  function startEditing(rowIndex, columnKey, currentValue) {
+    editingCell.value = { rowIndex, columnKey };
+    editingValue.value = String(currentValue ?? "");
+  }
+  function commitEdit() {
+    if (editingCell.value) {
+      emit(
+        "cell-change",
+        editingCell.value.rowIndex,
+        editingCell.value.columnKey,
+        editingValue.value
+      );
+      editingCell.value = null;
+    }
+  }
+  function cancelEdit() {
+    editingCell.value = null;
+  }
+  function handleExport() {
+    const csv = tigercatCore.exportTableToCsv(displayColumns.value, processedData.value);
+    tigercatCore.downloadCsv(csv, props.exportFilename);
+    emit("export", csv);
+  }
+  const dragColumnKey = vue.ref(null);
+  function handleDragStart(columnKey) {
+    dragColumnKey.value = columnKey;
+  }
+  function handleDrop(targetKey) {
+    if (!dragColumnKey.value || dragColumnKey.value === targetKey) return;
+    const cols = [...displayColumns.value];
+    const fromIdx = cols.findIndex((c) => c.key === dragColumnKey.value);
+    const toIdx = cols.findIndex((c) => c.key === targetKey);
+    if (fromIdx >= 0 && toIdx >= 0) {
+      const [moved] = cols.splice(fromIdx, 1);
+      cols.splice(toIdx, 0, moved);
+      emit("column-order-change", cols);
+    }
+    dragColumnKey.value = null;
+  }
+  const virtualScrollTop = vue.ref(0);
+  const groupedData = vue.computed(() => {
+    if (!props.groupBy) return null;
+    return tigercatCore.groupDataByColumn(paginatedData.value, props.groupBy);
+  });
+  return {
+    paginationConfig,
+    displayColumns,
+    fixedColumnsInfo,
+    columnByKey,
+    processedData,
+    paginatedData,
+    paginatedRowKeys,
+    selectedRowKeySet,
+    expandedRowKeySet,
+    totalColumnCount,
+    paginationInfo,
+    allSelected,
+    someSelected,
+    groupedData,
+    sortState,
+    filterState,
+    currentPage,
+    currentPageSize,
+    selectedRowKeys,
+    expandedRowKeys,
+    editingCell,
+    editingValue,
+    virtualScrollTop,
+    toggleColumnLock,
+    handleSort,
+    handleFilter,
+    handlePageChange,
+    handlePageSizeChange,
+    handleRowClick,
+    handleToggleExpand,
+    handleSelectRow,
+    handleSelectAll,
+    isCellEditable,
+    startEditing,
+    commitEdit,
+    cancelEdit,
+    handleExport,
+    handleDragStart,
+    handleDrop
+  };
+}
+var spinnerSvg = tigercatCore.getSpinnerSVG("spinner");
+var SortIcon = (direction) => {
+  const active = direction !== null;
+  const pathD = direction === "asc" ? tigercatCore.sortAscIcon16PathD : direction === "desc" ? tigercatCore.sortDescIcon16PathD : tigercatCore.sortBothIcon16PathD;
+  return vue.h(
+    "svg",
+    {
+      class: tigercatCore.getSortIconClasses(active),
+      width: "16",
+      height: "16",
+      viewBox: tigercatCore.icon16ViewBox,
+      fill: "currentColor"
+    },
+    [vue.h("path", { d: pathD })]
+  );
+};
+var LockIcon = (locked) => {
+  return vue.h(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: tigercatCore.icon24ViewBox,
+      fill: "currentColor",
+      "aria-hidden": "true"
+    },
+    [vue.h("path", { d: locked ? tigercatCore.lockClosedIcon24PathD : tigercatCore.lockOpenIcon24PathD })]
+  );
+};
+var ExpandIcon = (expanded) => {
+  return vue.h(
+    "svg",
+    {
+      class: tigercatCore.getExpandIconClasses(expanded),
+      width: "16",
+      height: "16",
+      viewBox: tigercatCore.icon16ViewBox,
+      fill: "currentColor",
+      "aria-hidden": "true"
+    },
+    [vue.h("path", { d: tigercatCore.expandChevronIcon16PathD })]
+  );
+};
+var LoadingSpinner = () => {
+  return vue.h(
+    "svg",
+    {
+      class: tigercatCore.getLoadingOverlaySpinnerClasses(),
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "none",
+      viewBox: spinnerSvg.viewBox
+    },
+    spinnerSvg.elements.map((el) => vue.h(el.type, tigercatCore.normalizeSvgAttrs(el.attrs)))
+  );
+};
+function renderTableHeader(ctx, props, slots) {
+  const headerCells = [];
+  const expandAtStart = props.expandable && props.expandable.expandIconPosition !== "end";
+  const expandAtEnd = props.expandable && props.expandable.expandIconPosition === "end";
+  const expandHeaderTh = props.expandable ? vue.h("th", {
+    class: tigercatCore.getExpandIconCellClasses(props.size),
+    "aria-label": "Expand"
+  }) : null;
+  if (expandAtStart && expandHeaderTh) {
+    headerCells.push(expandHeaderTh);
+  }
+  if (props.rowSelection && props.rowSelection.showCheckbox !== false && props.rowSelection.type !== "radio") {
+    headerCells.push(
+      vue.h(
+        "th",
+        {
+          class: tigercatCore.getCheckboxCellClasses(props.size)
+        },
+        [
+          vue.h("input", {
+            type: "checkbox",
+            class: "rounded border-gray-300 text-[var(--tiger-primary,#2563eb)] focus:ring-[var(--tiger-primary,#2563eb)]",
+            checked: ctx.allSelected.value,
+            indeterminate: ctx.someSelected.value,
+            onChange: (e) => ctx.handleSelectAll(e.target.checked)
+          })
+        ]
+      )
+    );
+  }
+  ctx.displayColumns.value.forEach((column) => {
+    const isSorted = ctx.sortState.value.key === column.key;
+    const sortDirection = isSorted ? ctx.sortState.value.direction : null;
+    const ariaSort = column.sortable ? sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : "none" : void 0;
+    const isFixedLeft = column.fixed === "left";
+    const isFixedRight = column.fixed === "right";
+    const fixedStyle = isFixedLeft ? {
+      position: "sticky",
+      left: `${ctx.fixedColumnsInfo.value.leftOffsets[column.key] || 0}px`,
+      zIndex: 15
+    } : isFixedRight ? {
+      position: "sticky",
+      right: `${ctx.fixedColumnsInfo.value.rightOffsets[column.key] || 0}px`,
+      zIndex: 15
+    } : void 0;
+    const widthStyle = column.width ? {
+      width: typeof column.width === "number" ? `${column.width}px` : column.width
+    } : void 0;
+    const style = fixedStyle ? { ...widthStyle, ...fixedStyle } : widthStyle;
+    const headerContent = [];
+    const slotContent = slots[`header-${column.key}`]?.();
+    if (slotContent && slotContent.length > 0) {
+      headerContent.push(...slotContent);
+    } else if (column.renderHeader) {
+      headerContent.push(column.renderHeader());
+    } else {
+      headerContent.push(column.title);
+    }
+    if (props.columnLockable) {
+      headerContent.push(
+        vue.h(
+          "button",
+          {
+            type: "button",
+            class: tigercatCore.classNames(
+              "inline-flex items-center",
+              column.fixed === "left" || column.fixed === "right" ? "text-[var(--tiger-primary,#2563eb)]" : "text-gray-400 hover:text-gray-700"
+            ),
+            "aria-label": column.fixed === "left" || column.fixed === "right" ? `Unlock column ${column.title}` : `Lock column ${column.title}`,
+            onClick: (e) => {
+              e.stopPropagation();
+              ctx.toggleColumnLock(column.key);
+            }
+          },
+          [LockIcon(column.fixed === "left" || column.fixed === "right")]
+        )
+      );
+    }
+    if (column.sortable) {
+      headerContent.push(SortIcon(sortDirection));
+    }
+    headerCells.push(
+      vue.h(
+        "th",
+        {
+          key: column.key,
+          "data-tiger-table-column-key": column.key,
+          "aria-sort": ariaSort,
+          class: tigercatCore.classNames(
+            tigercatCore.getTableHeaderCellClasses(
+              props.size,
+              column.align || "left",
+              !!column.sortable,
+              column.headerClassName
+            ),
+            (isFixedLeft || isFixedRight) && "bg-[var(--tiger-surface-muted,#f9fafb)]"
+          ),
+          style,
+          draggable: props.columnDraggable ? "true" : void 0,
+          onDragstart: props.columnDraggable ? () => ctx.handleDragStart(column.key) : void 0,
+          onDragover: props.columnDraggable ? (e) => e.preventDefault() : void 0,
+          onDrop: props.columnDraggable ? () => ctx.handleDrop(column.key) : void 0,
+          onClick: column.sortable ? () => ctx.handleSort(column.key) : void 0
+        },
+        [
+          vue.h("div", { class: "flex items-center gap-2" }, headerContent),
+          ...column.filter ? [
+            vue.h("div", { class: "mt-2" }, [
+              column.filter.type === "select" && column.filter.options ? vue.h(
+                "select",
+                {
+                  class: "w-full px-2 py-1 text-sm border border-gray-300 rounded",
+                  onChange: (e) => ctx.handleFilter(column.key, e.target.value),
+                  onClick: (e) => e.stopPropagation()
+                },
+                [
+                  vue.h("option", { value: "" }, "All"),
+                  ...column.filter.options.map(
+                    (opt) => vue.h("option", { value: opt.value }, opt.label)
+                  )
+                ]
+              ) : vue.h("input", {
+                type: "text",
+                class: "w-full px-2 py-1 text-sm border border-gray-300 rounded",
+                placeholder: column.filter.placeholder || "Filter...",
+                onInput: (e) => ctx.handleFilter(column.key, e.target.value),
+                onClick: (e) => e.stopPropagation()
+              })
+            ])
+          ] : []
+        ]
+      )
+    );
+  });
+  if (expandAtEnd && expandHeaderTh) {
+    headerCells.push(expandHeaderTh);
+  }
+  return vue.h("thead", { class: tigercatCore.getTableHeaderClasses(props.stickyHeader) }, [vue.h("tr", headerCells)]);
+}
+function renderTableBody(ctx, props, slots) {
+  if (props.loading) {
+    return null;
+  }
+  if (ctx.paginatedData.value.length === 0) {
+    return vue.h("tbody", [
+      vue.h("tr", [
+        vue.h(
+          "td",
+          {
+            colspan: ctx.totalColumnCount.value,
+            class: tigercatCore.tableEmptyStateClasses
+          },
+          [
+            vue.h(
+              "div",
+              {
+                role: "status",
+                "aria-live": "polite"
+              },
+              props.emptyText
+            )
+          ]
+        )
+      ])
+    ]);
+  }
+  function renderDataRow(record, index) {
+    const key = ctx.paginatedRowKeys.value[index];
+    const isSelected = ctx.selectedRowKeySet.value.has(key);
+    const isExpanded = ctx.expandedRowKeySet.value.has(key);
+    const isRowExpandable = props.expandable ? props.expandable.rowExpandable ? props.expandable.rowExpandable(record) : true : false;
+    const rowClass = typeof props.rowClassName === "function" ? props.rowClassName(record, index) : props.rowClassName;
+    const cells = [];
+    const expandAtStart = props.expandable && props.expandable.expandIconPosition !== "end";
+    const expandToggleCell = props.expandable ? vue.h(
+      "td",
+      {
+        class: tigercatCore.getExpandIconCellClasses(props.size)
+      },
+      isRowExpandable ? [
+        vue.h(
+          "button",
+          {
+            type: "button",
+            class: "inline-flex items-center justify-center",
+            "aria-label": isExpanded ? "Collapse row" : "Expand row",
+            "aria-expanded": isExpanded,
+            onClick: (e) => {
+              e.stopPropagation();
+              ctx.handleToggleExpand(key, record);
+            }
+          },
+          [ExpandIcon(isExpanded)]
+        )
+      ] : []
+    ) : null;
+    if (expandAtStart && expandToggleCell) {
+      cells.push(expandToggleCell);
+    }
+    if (props.rowSelection && props.rowSelection.showCheckbox !== false) {
+      const checkboxProps = props.rowSelection?.getCheckboxProps?.(record) || {};
+      cells.push(
+        vue.h(
+          "td",
+          {
+            class: tigercatCore.getCheckboxCellClasses(props.size)
+          },
+          [
+            vue.h("input", {
+              type: props.rowSelection?.type === "radio" ? "radio" : "checkbox",
+              class: props.rowSelection?.type === "radio" ? "border-gray-300 text-[var(--tiger-primary,#2563eb)] focus:ring-[var(--tiger-primary,#2563eb)]" : "rounded border-gray-300 text-[var(--tiger-primary,#2563eb)] focus:ring-[var(--tiger-primary,#2563eb)]",
+              checked: isSelected,
+              disabled: checkboxProps.disabled,
+              onClick: (e) => e.stopPropagation(),
+              onChange: (e) => ctx.handleSelectRow(key, e.target.checked)
+            })
+          ]
+        )
+      );
+    }
+    ctx.displayColumns.value.forEach((column) => {
+      const dataKey = column.dataKey || column.key;
+      const cellValue = record[dataKey];
+      const isFixedLeft = column.fixed === "left";
+      const isFixedRight = column.fixed === "right";
+      const fixedStyle = isFixedLeft ? {
+        position: "sticky",
+        left: `${ctx.fixedColumnsInfo.value.leftOffsets[column.key] || 0}px`,
+        zIndex: 10
+      } : isFixedRight ? {
+        position: "sticky",
+        right: `${ctx.fixedColumnsInfo.value.rightOffsets[column.key] || 0}px`,
+        zIndex: 10
+      } : void 0;
+      const widthStyle = column.width ? {
+        width: typeof column.width === "number" ? `${column.width}px` : column.width
+      } : void 0;
+      const style = fixedStyle ? { ...widthStyle, ...fixedStyle } : widthStyle;
+      const stickyBgClass = props.striped && index % 2 === 0 ? "bg-[var(--tiger-surface-muted,#f9fafb)]/50" : "bg-[var(--tiger-surface,#ffffff)]";
+      const stickyCellClass = isFixedLeft || isFixedRight ? tigercatCore.classNames(
+        stickyBgClass,
+        props.hoverable && "group-hover:bg-[var(--tiger-surface-muted,#f9fafb)]"
+      ) : void 0;
+      const isEditing = ctx.editingCell.value?.rowIndex === index && ctx.editingCell.value?.columnKey === column.key;
+      const isEditableCell = ctx.isCellEditable(column.key, index);
+      const cellContent = isEditing ? vue.h("input", {
+        type: "text",
+        class: tigercatCore.editableCellInputClasses,
+        value: ctx.editingValue.value,
+        autofocus: true,
+        onInput: (e) => {
+          ctx.editingValue.value = e.target.value;
+        },
+        onBlur: () => ctx.commitEdit(),
+        onKeydown: (e) => {
+          if (e.key === "Enter") ctx.commitEdit();
+          if (e.key === "Escape") ctx.cancelEdit();
+        }
+      }) : slots[`cell-${column.key}`]?.({ record, index }) ?? (column.render ? column.render(record, index) : cellValue);
+      cells.push(
+        vue.h(
+          "td",
+          {
+            key: column.key,
+            class: tigercatCore.classNames(
+              tigercatCore.getTableCellClasses(props.size, column.align || "left", column.className),
+              stickyCellClass,
+              isEditableCell && !isEditing && tigercatCore.getEditableCellClasses(false)
+            ),
+            style,
+            onDblclick: isEditableCell && !isEditing ? () => ctx.startEditing(index, column.key, cellValue) : void 0
+          },
+          [cellContent]
+        )
+      );
+    });
+    if (!expandAtStart && expandToggleCell) {
+      cells.push(expandToggleCell);
+    }
+    const rowNode = vue.h(
+      "tr",
+      {
+        key,
+        "data-tiger-table-row-index": index,
+        class: tigercatCore.classNames(
+          tigercatCore.getTableRowClasses(props.hoverable, props.striped, index % 2 === 0, rowClass),
+          ctx.fixedColumnsInfo.value.hasFixedColumns && "group"
+        ),
+        onClick: () => ctx.handleRowClick(record, index, key)
+      },
+      cells
+    );
+    if (props.expandable && isExpanded && isRowExpandable) {
+      const expandedContent = slots["expanded-row"]?.({ record, index }) || (props.expandable.expandedRowRender ? props.expandable.expandedRowRender(record, index) : null);
+      const expandedRow = vue.h(
+        "tr",
+        {
+          key: `${key}-expanded`,
+          class: tigercatCore.getExpandedRowClasses()
+        },
+        [
+          vue.h(
+            "td",
+            {
+              colspan: ctx.totalColumnCount.value,
+              class: tigercatCore.getExpandedRowContentClasses(props.size)
+            },
+            [expandedContent]
+          )
+        ]
+      );
+      return [rowNode, expandedRow];
+    }
+    return rowNode;
+  }
+  if (ctx.groupedData.value) {
+    const groupRows = [];
+    for (const [groupKey, groupItems] of ctx.groupedData.value) {
+      groupRows.push(
+        vue.h("tr", { key: `group-${groupKey}`, class: tigercatCore.tableGroupHeaderClasses }, [
+          vue.h(
+            "td",
+            {
+              colspan: ctx.totalColumnCount.value,
+              class: tigercatCore.getGroupHeaderCellClasses(props.size)
+            },
+            `${props.groupBy}: ${groupKey} (${groupItems.length})`
+          )
+        ])
+      );
+      groupItems.forEach((record, i) => {
+        const globalIndex = ctx.paginatedData.value.indexOf(record);
+        const result = renderDataRow(record, globalIndex >= 0 ? globalIndex : i);
+        if (Array.isArray(result)) {
+          groupRows.push(...result);
+        } else {
+          groupRows.push(result);
+        }
+      });
+    }
+    return vue.h("tbody", groupRows);
+  }
+  const rows = ctx.paginatedData.value.flatMap((record, index) => renderDataRow(record, index));
+  return vue.h("tbody", rows);
+}
+function renderSummaryRow(ctx, props) {
+  if (!props.summaryRow?.show) return null;
+  const emptyCells = [];
+  if (props.rowSelection) {
+    emptyCells.push(vue.h("td", { class: tigercatCore.getTableCellClasses(props.size, "left") }));
+  }
+  if (props.expandable) {
+    emptyCells.push(vue.h("td", { class: tigercatCore.getTableCellClasses(props.size, "left") }));
+  }
+  const dataCells = ctx.displayColumns.value.map((col) => {
+    const dataKey = col.dataKey || col.key;
+    const val = props.summaryRow.data[dataKey];
+    return vue.h(
+      "td",
+      {
+        key: col.key,
+        class: tigercatCore.getTableCellClasses(props.size, col.align || "left", col.className)
+      },
+      val != null ? String(val) : ""
+    );
+  });
+  return vue.h("tfoot", [vue.h("tr", { class: tigercatCore.tableSummaryRowClasses }, [...emptyCells, ...dataCells])]);
+}
+function renderPagination(ctx, props) {
+  if (props.pagination === false || !ctx.paginationInfo.value) {
+    return null;
+  }
+  const { totalPages, startIndex, endIndex, hasNext, hasPrev } = ctx.paginationInfo.value;
+  const paginationConfig = props.pagination;
+  const total = paginationConfig.total !== void 0 && paginationConfig.total > 0 ? paginationConfig.total : ctx.processedData.value.length;
+  return vue.h("div", { class: tigercatCore.getSimplePaginationContainerClasses() }, [
+    paginationConfig.showTotal !== false && vue.h(
+      "div",
+      { class: tigercatCore.getSimplePaginationTotalClasses() },
+      paginationConfig.totalText ? paginationConfig.totalText(total, [startIndex, endIndex]) : `Showing ${startIndex} to ${endIndex} of ${total} results`
+    ),
+    vue.h("div", { class: tigercatCore.getSimplePaginationControlsClasses() }, [
+      paginationConfig.showSizeChanger !== false && vue.h(
+        "select",
+        {
+          class: tigercatCore.getSimplePaginationSelectClasses(),
+          value: ctx.currentPageSize.value,
+          onChange: (e) => ctx.handlePageSizeChange(Number(e.target.value))
+        },
+        (paginationConfig.pageSizeOptions || [10, 20, 50, 100]).map(
+          (size) => vue.h("option", { value: size }, `${size} / page`)
+        )
+      ),
+      vue.h("div", { class: tigercatCore.getSimplePaginationButtonsWrapperClasses() }, [
+        vue.h(
+          "button",
+          {
+            class: tigercatCore.getSimplePaginationButtonClasses(!hasPrev),
+            disabled: !hasPrev,
+            onClick: () => ctx.handlePageChange(ctx.currentPage.value - 1)
+          },
+          "Previous"
+        ),
+        vue.h(
+          "span",
+          { class: tigercatCore.getSimplePaginationPageIndicatorClasses() },
+          `Page ${ctx.currentPage.value} of ${totalPages}`
+        ),
+        vue.h(
+          "button",
+          {
+            class: tigercatCore.getSimplePaginationButtonClasses(!hasNext),
+            disabled: !hasNext,
+            onClick: () => ctx.handlePageChange(ctx.currentPage.value + 1)
+          },
+          "Next"
+        )
+      ])
+    ])
+  ]);
+}
+
+// src/components/Table.ts
+var Table = vue.defineComponent({
+  name: "TigerTable",
+  props: tableProps,
+  emits: tableEmits,
+  setup(props, { emit, slots }) {
+    const wrapperRef = vue.ref(null);
+    const tableRef = vue.ref(null);
+    const measuredColumnWidths = vue.ref({});
+    const measuredRowHeights = vue.ref([]);
+    const ctx = useTableState(props, emit, measuredColumnWidths);
+    const resizeController = tigercatCore.createTableResizeObserverController({
+      onResize: (snapshot) => {
+        if (!areNumberRecordsEqual(measuredColumnWidths.value, snapshot.columnWidths)) {
+          measuredColumnWidths.value = snapshot.columnWidths;
+        }
+        if (!areNumberArraysEqual(measuredRowHeights.value, snapshot.rowHeights)) {
+          measuredRowHeights.value = snapshot.rowHeights;
+        }
+      }
+    });
+    vue.onMounted(() => {
+      if (wrapperRef.value) {
+        resizeController.observe(wrapperRef.value, tableRef.value);
+      }
+    });
+    vue.onBeforeUnmount(() => resizeController.disconnect());
+    return () => {
+      const resolvedProps = props;
+      const virtualRecommendation = tigercatCore.getTableVirtualRecommendation({
+        virtual: resolvedProps.virtual,
+        dataLength: resolvedProps.dataSource.length,
+        threshold: resolvedProps.virtualThreshold
+      });
+      const wrapperStyle = resolvedProps.maxHeight ? {
+        maxHeight: typeof resolvedProps.maxHeight === "number" ? `${resolvedProps.maxHeight}px` : resolvedProps.maxHeight
+      } : void 0;
+      const tableChildren = [
+        renderTableHeader(ctx, resolvedProps, slots),
+        renderTableBody(ctx, resolvedProps, slots),
+        renderSummaryRow(ctx, resolvedProps)
+      ];
+      const tableInner = vue.h(
+        "table",
+        {
+          ref: tableRef,
+          class: tigercatCore.classNames(
+            tigercatCore.tableBaseClasses,
+            resolvedProps.tableLayout === "fixed" ? "table-fixed" : "table-auto"
+          ),
+          style: ctx.fixedColumnsInfo.value.hasFixedColumns && ctx.fixedColumnsInfo.value.minTableWidth ? { minWidth: `${ctx.fixedColumnsInfo.value.minTableWidth}px` } : void 0
+        },
+        tableChildren
+      );
+      const tableContent = resolvedProps.virtual ? vue.h(
+        "div",
+        {
+          style: { height: `${resolvedProps.virtualHeight}px`, overflow: "auto" },
+          onScroll: (e) => {
+            ctx.virtualScrollTop.value = e.target.scrollTop;
+          }
+        },
+        [tableInner]
+      ) : tableInner;
+      return vue.h(
+        "div",
+        {
+          ref: wrapperRef,
+          class: tigercatCore.getTableWrapperClasses(resolvedProps.bordered, resolvedProps.maxHeight),
+          style: wrapperStyle,
+          "data-tiger-virtual": virtualRecommendation.enabled ? "enabled" : void 0,
+          "data-tiger-virtual-recommended": virtualRecommendation.recommended ? "true" : void 0,
+          "data-tiger-virtual-threshold": virtualRecommendation.recommended ? virtualRecommendation.threshold : void 0,
+          "data-tiger-measured-row-height": measuredRowHeights.value[0] || void 0,
+          "aria-busy": resolvedProps.loading
+        },
+        [
+          resolvedProps.exportable && vue.h("div", { class: "flex justify-end p-2" }, [
+            vue.h(
+              "button",
+              {
+                type: "button",
+                class: tigercatCore.tableExportButtonClasses,
+                onClick: ctx.handleExport,
+                "aria-label": "Export to CSV"
+              },
+              "Export CSV"
+            )
+          ]),
+          tableContent,
+          resolvedProps.loading && vue.h(
+            "div",
+            {
+              class: tigercatCore.tableLoadingOverlayClasses,
+              role: "status",
+              "aria-live": "polite",
+              "aria-label": "Loading"
+            },
+            [LoadingSpinner(), vue.h("span", { class: "sr-only" }, "Loading")]
+          ),
+          renderPagination(ctx, resolvedProps)
+        ]
+      );
+    };
+  }
+});
+var Table_default = Table;
+function areNumberRecordsEqual(current, next) {
+  const currentKeys = Object.keys(current);
+  const nextKeys = Object.keys(next);
+  return currentKeys.length === nextKeys.length && nextKeys.every((key) => current[key] === next[key]);
+}
+function areNumberArraysEqual(current, next) {
+  return current.length === next.length && next.every((value, index) => current[index] === value);
+}
+
+exports.Table = Table;
+exports.Table_default = Table_default;