@expcat/tigercat-vue 2.1.2 → 2.1.3

package/dist/{chunk-IFASMNTU.mjs → chunk-2SC2HIVS.mjs}

@@ -1,21 +1,30 @@
 import {
   Select
-} from "./chunk-K5RYFPOQ.mjs";
+} from "./chunk-KO7NA3F6.mjs";
 import {
   Radio
-} from "./chunk-73Z7N7VG.mjs";
+} from "./chunk-AFNJO6KJ.mjs";
 import {
   Pagination
-} from "./chunk-OYU47A57.mjs";
+} from "./chunk-IOSUZR6Z.mjs";
+import {
+  Input
+} from "./chunk-DU5F2EE7.mjs";
 import {
   Empty
-} from "./chunk-SJINC5NF.mjs";
+} from "./chunk-X7UK3A6Z.mjs";
 import {
   Checkbox
-} from "./chunk-MYKKKVGK.mjs";
+} from "./chunk-V5BSH3EF.mjs";
+import {
+  Loading
+} from "./chunk-OO27UB75.mjs";
+import {
+  Button
+} from "./chunk-4KIZXFFG.mjs";
 import {
   useTigerConfig
-} from "./chunk-UOJOJBEU.mjs";
+} from "./chunk-4GOTWNOO.mjs";
 
 // src/components/Table.ts
 import {
@@ -26,24 +35,34 @@ import {
   onBeforeUnmount,
   onMounted,
   ref as ref2,
+  useId,
   watch as watch2
 } from "vue";
 import {
   classNames as classNames3,
+  canUseTableVirtualWindow,
   createTableResizeObserverController,
-  formatTableSelectRowAriaLabel,
+  formatTableSelectRowAriaLabel as formatTableSelectRowAriaLabel2,
   formatTableSortByText as formatTableSortByText2,
   getCardColumns,
   getCardGridInfo,
   getTableColgroup,
+  hasTableSelectionColumn as hasTableSelectionColumn4,
+  resolveTableExpandSlot as resolveTableExpandSlot4,
+  tableExportBarClasses,
   getImmediateTigerLocale,
   getTableLabels,
   getTableWrapperClasses,
   getTableResponsiveCardClasses,
-  getTableResponsiveCardListClasses,
   getTableResponsiveTableClasses,
   getTableVirtualRecommendation,
   getTableVirtualWindow,
+  getTableCardSortValue,
+  parseTableCardSortValue,
+  subscribeTableCardViewport,
+  TABLE_CARD_SORT_NONE,
+  tableCardListVisibleClasses,
+  isActivationKey as isActivationKey2,
   isLazyTigerLocale,
   mergeTigerLocale,
   resolveTigerLocale,
@@ -54,7 +73,6 @@ import {
   tableResponsiveCardValueClasses,
   tableLoadingOverlayClasses
 } from "@expcat/tigercat-core";
-import { tableExportButtonClasses } from "@expcat/tigercat-core";
 
 // src/components/Table/props.ts
 var tableProps = {
@@ -68,7 +86,7 @@ var tableProps = {
   },
   dataSource: {
     type: Array,
-    default: () => []
+    default: void 0
   },
   hiddenColumnKeys: {
     type: Array,
@@ -127,14 +145,7 @@ var tableProps = {
   },
   pagination: {
     type: [Object, Boolean],
-    default: () => ({
-      defaultCurrent: 1,
-      defaultPageSize: 10,
-      total: 0,
-      pageSizeOptions: [10, 20, 50, 100],
-      showSizeChanger: true,
-      showTotal: true
-    })
+    default: void 0
   },
   rowSelection: {
     type: Object
@@ -188,14 +199,14 @@ var tableProps = {
   },
   // --- v0.6.0 props ---
   virtual: { type: Boolean, default: false },
-  autoVirtual: { type: Boolean, default: true },
+  autoVirtual: { 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: () => [] },
+  advancedFilterRules: { type: Array, default: void 0 },
   columnDraggable: { type: Boolean, default: false },
   rowDraggable: { type: Boolean, default: false },
   summaryRow: { type: Object },
@@ -220,6 +231,7 @@ var tableEmits = [
   "expand-change",
   "cell-change",
   "column-order-change",
+  "column-fixed-change",
   "row-order-change",
   "export"
 ];
@@ -227,36 +239,63 @@ var tableEmits = [
 // src/components/Table/state.ts
 import { computed, ref, watch } from "vue";
 import {
-  sortData,
-  filterTableData,
-  paginateData,
-  calculatePagination,
-  createTableRowKeyCache,
-  filterDataAdvanced,
-  groupDataByColumn,
-  getFixedColumnOffsets,
-  filterHiddenColumns,
+  DEFAULT_TABLE_SORT,
+  EMPTY_TABLE_FILTER_RULES,
+  EMPTY_TABLE_FILTERS,
+  EMPTY_TABLE_HIDDEN_KEYS,
+  EMPTY_TABLE_RECORDS,
+  applyTableColumnOrder,
+  commitTableCellEdit,
+  downloadTableExport,
+  exportTableData,
   freezeTableColumnWidths,
-  orderTableFixedColumns,
+  getNextTableColumnFixed,
+  getNextTableExpandKeys,
   getNextTableSelectAllKeys,
-  getTableSelectionState,
-  hasTableSelectionColumn
+  getNextTableSelectRowKeys,
+  getNextTableSortState,
+  mergeTableFilterValue,
+  mergeTablePagination,
+  reorderTableColumnsByKey,
+  reorderTableRowsByKey,
+  resolveTableKeyList,
+  resolveTableRecordKey,
+  resolveTableView,
+  shouldWarnControlledPageReset
 } from "@expcat/tigercat-core";
-import { exportTableData, downloadTableExport } from "@expcat/tigercat-core";
-function useTableState(props, emit, measuredColumnWidths) {
+import { devWarn } from "@expcat/tigercat-core";
+function useTableState(props, emit, measuredColumnWidths, containerSize) {
+  const paginationMerged = computed(() => mergeTablePagination(props.pagination));
   const paginationConfig = computed(() => {
-    return props.pagination !== false && typeof props.pagination === "object" ? props.pagination : null;
+    const merged = paginationMerged.value;
+    return merged === false ? null : merged;
   });
   const isSortControlled = computed(() => props.sort !== void 0);
   const isHiddenColumnsControlled = computed(() => props.hiddenColumnKeys !== void 0);
   const isFiltersControlled = computed(() => props.filters !== void 0);
-  const isSelectionControlled = computed(() => props.rowSelection?.selectedRowKeys !== void 0);
-  const isExpandControlled = computed(() => props.expandable?.expandedRowKeys !== void 0);
-  const uncontrolledSortState = ref(props.defaultSort ?? { key: null, direction: null });
+  const isCurrentPageControlled = computed(() => paginationConfig.value?.current !== void 0);
+  const isPageSizeControlled = computed(() => paginationConfig.value?.pageSize !== void 0);
+  const selectionControl = computed(
+    () => resolveTableKeyList(props.rowSelection?.selectedRowKeys, "rowSelection.selectedRowKeys")
+  );
+  const expandControl = computed(
+    () => resolveTableKeyList(props.expandable?.expandedRowKeys, "expandable.expandedRowKeys")
+  );
+  const internalData = ref(null);
+  watch(
+    () => props.dataSource,
+    () => {
+      internalData.value = null;
+    }
+  );
+  const effectiveData = computed(
+    () => internalData.value ?? props.dataSource ?? EMPTY_TABLE_RECORDS
+  );
+  const uncontrolledSortState = ref(props.defaultSort ?? DEFAULT_TABLE_SORT);
   const uncontrolledHiddenColumnKeys = ref(
-    props.defaultHiddenColumnKeys ?? props.hiddenColumnKeys ?? []
+    props.defaultHiddenColumnKeys ?? props.hiddenColumnKeys ?? EMPTY_TABLE_HIDDEN_KEYS
   );
-  const uncontrolledFilterState = ref(props.defaultFilters ?? {});
+  const uncontrolledFilterState = ref(props.defaultFilters ?? EMPTY_TABLE_FILTERS);
   const uncontrolledCurrentPage = ref(
     paginationConfig.value?.defaultCurrent ?? paginationConfig.value?.current ?? 1
   );
@@ -264,97 +303,79 @@ function useTableState(props, emit, measuredColumnWidths) {
     paginationConfig.value?.defaultPageSize ?? paginationConfig.value?.pageSize ?? 10
   );
   const uncontrolledSelectedRowKeys = ref(
-    props.rowSelection?.defaultSelectedRowKeys ?? props.rowSelection?.selectedRowKeys ?? []
+    props.rowSelection?.defaultSelectedRowKeys ?? []
   );
   const uncontrolledExpandedRowKeys = ref(
-    props.expandable?.defaultExpandedRowKeys ?? props.expandable?.expandedRowKeys ?? []
+    props.expandable?.defaultExpandedRowKeys ?? []
+  );
+  const columnOrder = ref(null);
+  const fixedOverrides = ref({});
+  watch(
+    () => props.columns.map((column) => column.key).join("\0"),
+    () => {
+      columnOrder.value = null;
+    }
   );
   const sortState = computed(() => props.sort ?? uncontrolledSortState.value);
   const hiddenColumnKeys = computed(
     () => props.hiddenColumnKeys ?? uncontrolledHiddenColumnKeys.value
   );
   const filterState = computed(() => props.filters ?? uncontrolledFilterState.value);
-  const currentPage = computed(() => {
-    return paginationConfig.value?.current ?? uncontrolledCurrentPage.value;
-  });
-  const currentPageSize = computed(() => {
-    return paginationConfig.value?.pageSize ?? uncontrolledCurrentPageSize.value;
-  });
-  const selectedRowKeys = computed(() => {
-    return props.rowSelection?.selectedRowKeys ?? uncontrolledSelectedRowKeys.value;
-  });
-  const expandedRowKeys = computed(() => {
-    return props.expandable?.expandedRowKeys ?? uncontrolledExpandedRowKeys.value;
-  });
-  watch(
-    () => props.sort,
-    (next) => {
-      if (next !== void 0) {
-        uncontrolledSortState.value = next;
-      }
-    }
+  const currentPage = computed(
+    () => paginationConfig.value?.current ?? uncontrolledCurrentPage.value
   );
-  watch(
-    () => props.filters,
-    (next) => {
-      if (next !== void 0) {
-        uncontrolledFilterState.value = next;
-      }
-    }
+  const currentPageSize = computed(
+    () => paginationConfig.value?.pageSize ?? uncontrolledCurrentPageSize.value
   );
-  watch(
-    () => props.hiddenColumnKeys,
-    (next) => {
-      if (next !== void 0) {
-        uncontrolledHiddenColumnKeys.value = next;
-      }
-    }
+  const selectedRowKeys = computed(
+    () => selectionControl.value.controlled ? selectionControl.value.keys : uncontrolledSelectedRowKeys.value
   );
-  watch(
-    () => paginationConfig.value?.current,
-    (next) => {
-      if (next !== void 0) {
-        uncontrolledCurrentPage.value = next;
-      }
-    }
+  const expandedRowKeys = computed(
+    () => expandControl.value.controlled ? expandControl.value.keys : uncontrolledExpandedRowKeys.value
   );
-  watch(
-    () => paginationConfig.value?.pageSize,
-    (next) => {
-      if (next !== void 0) {
-        uncontrolledCurrentPageSize.value = next;
-      }
-    }
-  );
-  watch(
-    () => props.rowSelection?.selectedRowKeys,
-    (next) => {
-      if (next !== void 0) {
-        uncontrolledSelectedRowKeys.value = next;
-      }
-    }
+  const view = computed(
+    () => resolveTableView({
+      columns: props.columns,
+      dataSource: effectiveData.value,
+      hiddenColumnKeys: hiddenColumnKeys.value,
+      columnOrder: columnOrder.value ?? void 0,
+      fixedOverrides: fixedOverrides.value,
+      filters: filterState.value,
+      sort: sortState.value,
+      filterMode: props.filterMode,
+      advancedFilterRules: props.advancedFilterRules ?? EMPTY_TABLE_FILTER_RULES,
+      groupBy: props.groupBy,
+      pagination: paginationMerged.value,
+      currentPage: currentPage.value,
+      currentPageSize: currentPageSize.value,
+      rowKey: props.rowKey,
+      getRowKey: props.rowSelection?.getRowKey,
+      rowSelection: props.rowSelection,
+      expandable: props.expandable,
+      selectedRowKeys: selectedRowKeys.value,
+      measuredColumnWidths: measuredColumnWidths.value,
+      containerWidth: containerSize?.value.width
+    })
   );
-  watch(
-    () => props.expandable?.expandedRowKeys,
-    (next) => {
-      if (next !== void 0) {
-        uncontrolledExpandedRowKeys.value = next;
-      }
+  const displayColumns = computed(() => view.value.displayColumns);
+  const fixedColumnsInfo = computed(() => view.value.fixedColumnsInfo);
+  const processedData = computed(() => view.value.processedData);
+  const paginatedData = computed(() => view.value.paginatedData);
+  const paginatedRowKeys = computed(() => view.value.pageRowKeys);
+  const pageSourceIndices = computed(() => view.value.pageSourceIndices);
+  const groupedData = computed(() => view.value.groupedData);
+  const paginationInfo = computed(() => view.value.paginationInfo);
+  const totalColumnCount = computed(() => view.value.totalColumnCount);
+  const allSelected = computed(() => view.value.allSelected);
+  const someSelected = computed(() => view.value.someSelected);
+  const selectedRowKeySet = computed(() => new Set(selectedRowKeys.value));
+  const expandedRowKeySet = computed(() => new Set(expandedRowKeys.value));
+  const columnByKey = computed(() => {
+    const map = {};
+    for (const column of displayColumns.value) {
+      map[column.key] = column;
     }
-  );
-  const fixedOverrides = ref({});
-  const displayColumns = computed(() => {
-    const mapped = props.columns.map((column) => {
-      const hasOverride = column.key in fixedOverrides.value;
-      return {
-        ...column,
-        fixed: hasOverride ? fixedOverrides.value[column.key] : column.fixed
-      };
-    });
-    return orderTableFixedColumns(filterHiddenColumns(mapped, hiddenColumnKeys.value));
-  });
-  const fixedColumnsInfo = computed(() => {
-    return getFixedColumnOffsets(displayColumns.value, measuredColumnWidths.value);
+    return map;
   });
   const frozenColumnWidths = ref({});
   watch(
@@ -368,13 +389,13 @@ function useTableState(props, emit, measuredColumnWidths) {
     },
     { immediate: true }
   );
-  const columnByKey = computed(() => {
-    const map = {};
-    for (const column of displayColumns.value) {
-      map[column.key] = column;
-    }
-    return map;
-  });
+  function emitChange(next) {
+    emit("change", {
+      sort: next.sort ?? sortState.value,
+      filters: next.filters ?? filterState.value,
+      pagination: next.pagination !== void 0 ? next.pagination : paginationMerged.value !== false ? { current: currentPage.value, pageSize: currentPageSize.value } : null
+    });
+  }
   function handleSetHiddenColumns(hiddenKeys) {
     if (!isHiddenColumnsControlled.value) {
       uncontrolledHiddenColumnKeys.value = hiddenKeys;
@@ -383,147 +404,72 @@ function useTableState(props, emit, measuredColumnWidths) {
     emit("hidden-column-keys-change", hiddenKeys);
   }
   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 = computed(() => {
-    let data = props.dataSource ?? [];
-    if (props.filterMode === "advanced" && (props.advancedFilterRules?.length ?? 0) > 0) {
-      data = filterDataAdvanced(data, props.advancedFilterRules ?? []);
-    } else {
-      data = filterTableData(data, props.columns, filterState.value);
-    }
-    if (sortState.value.key && sortState.value.direction) {
-      const column = columnByKey.value[sortState.value.key];
-      data = sortData(
-        data,
-        sortState.value.key,
-        sortState.value.direction,
-        column?.sortFn,
-        props.columns
-      );
-    }
-    return data;
-  });
-  const paginatedData = computed(() => {
-    if (props.pagination === false) {
-      return processedData.value;
-    }
-    if (paginationConfig.value?.remote) {
-      return processedData.value;
-    }
-    return paginateData(processedData.value, currentPage.value, currentPageSize.value);
-  });
-  const paginatedRowKeys = computed(() => {
-    return createTableRowKeyCache(props.rowKey).getMany(
-      paginatedData.value
+    const original = props.columns.find((column) => column.key === columnKey)?.fixed;
+    const current = Object.prototype.hasOwnProperty.call(fixedOverrides.value, columnKey) ? fixedOverrides.value[columnKey] : original;
+    const nextFixed = getNextTableColumnFixed(current, original);
+    fixedOverrides.value = { ...fixedOverrides.value, [columnKey]: nextFixed };
+    const fullColumns = applyTableColumnOrder(props.columns, columnOrder.value ?? void 0).map(
+      (column) => column.key === columnKey ? { ...column, fixed: nextFixed } : column
     );
-  });
-  const selectedRowKeySet = computed(() => {
-    return new Set(selectedRowKeys.value);
-  });
-  const expandedRowKeySet = computed(() => {
-    return new Set(expandedRowKeys.value);
-  });
-  const totalColumnCount = computed(() => {
-    let count = displayColumns.value.length;
-    if (hasTableSelectionColumn(props.rowSelection)) count += 1;
-    if (props.expandable) count += 1;
-    return count;
-  });
-  const paginationInfo = 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 calculatePagination(total, currentPage.value, currentPageSize.value);
-  });
+    emit("column-fixed-change", columnKey, nextFixed, fullColumns);
+  }
   function handleSetSort(nextSortState) {
     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
-    });
+    emitChange({ sort: nextSortState });
   }
   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;
-      }
-    }
-    handleSetSort({
-      key: newDirection ? columnKey : null,
-      direction: newDirection
-    });
+    const column = displayColumns.value.find((item) => item.key === columnKey);
+    if (!column || !column.sortable) return;
+    handleSetSort(getNextTableSortState(sortState.value, columnKey));
   }
   function handleFilter(columnKey, value) {
-    const nextFilterState = {
-      ...filterState.value,
-      [columnKey]: value
-    };
+    const nextFilterState = mergeTableFilterValue(filterState.value, columnKey, value);
     if (!isFiltersControlled.value) {
       uncontrolledFilterState.value = nextFilterState;
     }
-    uncontrolledCurrentPage.value = 1;
+    if (!isCurrentPageControlled.value) {
+      uncontrolledCurrentPage.value = 1;
+    } else if (shouldWarnControlledPageReset(true, currentPage.value)) {
+      devWarn(
+        "Table.filter.page",
+        "Table filter reset pagination.current to 1; the controlled current page was not written back"
+      );
+    }
     emit("filter-change", nextFilterState);
-    emit("change", {
-      sort: sortState.value,
+    if (paginationMerged.value !== false) {
+      emit("page-change", { current: 1, pageSize: currentPageSize.value });
+    }
+    emitChange({
       filters: nextFilterState,
-      pagination: props.pagination !== false ? {
-        current: 1,
-        pageSize: currentPageSize.value
-      } : null
+      pagination: paginationMerged.value !== false ? { current: 1, pageSize: currentPageSize.value } : null
     });
   }
   function handlePageChange(page) {
-    uncontrolledCurrentPage.value = page;
+    if (!isCurrentPageControlled.value) {
+      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
-      }
-    });
+    emitChange({ pagination: { current: page, pageSize: currentPageSize.value } });
   }
   function handlePageSizeChange(pageSize) {
-    uncontrolledCurrentPageSize.value = pageSize;
-    uncontrolledCurrentPage.value = 1;
+    if (!isPageSizeControlled.value) {
+      uncontrolledCurrentPageSize.value = pageSize;
+    }
+    if (!isCurrentPageControlled.value) {
+      uncontrolledCurrentPage.value = 1;
+    }
     emit("page-change", { current: 1, pageSize });
-    emit("change", {
-      sort: sortState.value,
-      filters: filterState.value,
-      pagination: {
-        current: 1,
-        pageSize
-      }
-    });
+    emitChange({ 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;
+    const next = getNextTableExpandKeys(expandedRowKeys.value, key);
+    if (!expandControl.value.controlled) {
+      uncontrolledExpandedRowKeys.value = next.keys;
     }
-    emit("expand-change", newKeys, record, !isExpanded);
+    emit("expand-change", next.keys, record, next.expanded);
   }
   function handleRowClick(record, index, key) {
     emit("row-click", record, index);
@@ -535,70 +481,58 @@ function useTableState(props, emit, measuredColumnWidths) {
     }
   }
   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) {
+    const newKeys = getNextTableSelectRowKeys({
+      selectedRowKeys: selectedRowKeys.value,
+      key,
+      checked,
+      type: props.rowSelection?.type
+    });
+    if (!selectionControl.value.controlled) {
       uncontrolledSelectedRowKeys.value = newKeys;
     }
     emit("selection-change", newKeys);
   }
-  const selectionState = computed(
-    () => getTableSelectionState({
-      records: paginatedData.value,
-      rowKeys: paginatedRowKeys.value,
-      selectedRowKeys: selectedRowKeys.value,
-      getCheckboxProps: props.rowSelection?.getCheckboxProps
-    })
-  );
   function handleSelectAll(checked) {
     const nextKeys = getNextTableSelectAllKeys(
       selectedRowKeys.value,
-      selectionState.value.selectableRowKeys,
+      view.value.selectableRowKeys,
       checked
     );
-    if (!isSelectionControlled.value) {
+    if (!selectionControl.value.controlled) {
       uncontrolledSelectedRowKeys.value = nextKeys;
     }
     emit("selection-change", nextKeys);
   }
-  const allSelected = computed(() => selectionState.value.allSelected);
-  const someSelected = computed(() => selectionState.value.someSelected);
   const editingCell = ref(null);
   const editingValue = ref("");
   function isCellEditable(columnKey, rowIndex) {
     if (!props.editable) return false;
     if (!props.editableCells) return true;
-    return !!props.editableCells.get(columnKey)?.has(rowIndex);
+    return props.editableCells[columnKey]?.includes(rowIndex) === true;
   }
   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;
-    }
+    if (!editingCell.value) return;
+    const column = props.columns.find((item) => item.key === editingCell.value?.columnKey);
+    const nextData = commitTableCellEdit(
+      effectiveData.value,
+      editingCell.value.rowIndex,
+      column,
+      editingValue.value
+    );
+    internalData.value = nextData;
+    emit("cell-change", editingCell.value.rowIndex, editingCell.value.columnKey, editingValue.value);
+    editingCell.value = null;
   }
   function cancelEdit() {
     editingCell.value = null;
   }
   function handleExport() {
-    const content = exportTableData(displayColumns.value, processedData.value, props.exportFormat);
-    downloadTableExport(content, props.exportFilename, props.exportFormat);
+    const content = exportTableData(displayColumns.value, processedData.value);
+    downloadTableExport(content, props.exportFilename);
     emit("export", content);
   }
   const dragColumnKey = ref(null);
@@ -607,14 +541,10 @@ function useTableState(props, emit, measuredColumnWidths) {
   }
   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);
-    }
+    const fullColumns = applyTableColumnOrder(props.columns, columnOrder.value ?? void 0);
+    const nextColumns = reorderTableColumnsByKey(fullColumns, dragColumnKey.value, targetKey);
+    columnOrder.value = nextColumns.map((column) => column.key);
+    emit("column-order-change", nextColumns);
     dragColumnKey.value = null;
   }
   const dragRowKey = ref(null);
@@ -623,21 +553,17 @@ function useTableState(props, emit, measuredColumnWidths) {
   }
   function handleRowDrop(targetKey) {
     if (dragRowKey.value === null || dragRowKey.value === targetKey) return;
-    const rows = [...paginatedData.value];
-    const fromIdx = paginatedRowKeys.value.findIndex((key) => key === dragRowKey.value);
-    const toIdx = paginatedRowKeys.value.findIndex((key) => key === targetKey);
-    if (fromIdx >= 0 && toIdx >= 0) {
-      const [moved] = rows.splice(fromIdx, 1);
-      rows.splice(toIdx, 0, moved);
-      emit("row-order-change", rows);
-    }
+    const nextRows = reorderTableRowsByKey(
+      effectiveData.value,
+      dragRowKey.value,
+      targetKey,
+      (record, sourceIndex) => resolveTableRecordKey(record, sourceIndex, props.rowKey, props.rowSelection?.getRowKey)
+    );
+    internalData.value = nextRows;
+    emit("row-order-change", nextRows);
     dragRowKey.value = null;
   }
   const virtualScrollTop = ref(0);
-  const groupedData = computed(() => {
-    if (!props.groupBy) return null;
-    return groupDataByColumn(paginatedData.value, props.groupBy);
-  });
   return {
     paginationConfig,
     displayColumns,
@@ -647,6 +573,7 @@ function useTableState(props, emit, measuredColumnWidths) {
     processedData,
     paginatedData,
     paginatedRowKeys,
+    pageSourceIndices,
     selectedRowKeySet,
     expandedRowKeySet,
     totalColumnCount,
@@ -687,14 +614,30 @@ function useTableState(props, emit, measuredColumnWidths) {
   };
 }
 
+// src/components/Table/render-header.ts
+import { h as h2 } from "vue";
+import {
+  classNames,
+  formatTableFilterColumnAriaLabel,
+  formatTableSortByText,
+  getCheckboxCellClasses,
+  getExpandIconCellClasses,
+  getFixedColumnStyle,
+  getInputClasses,
+  getTableChromeSlots,
+  getTableFixedHeaderCellClasses,
+  getTableHeaderCellClasses,
+  getTableHeaderClasses,
+  hasTableSelectionColumn,
+  resolveTableExpandSlot,
+  tableSortButtonClasses
+} from "@expcat/tigercat-core";
+
 // src/components/Table/icons.ts
 import { h } from "vue";
 import {
   getSortIconClasses,
   getExpandIconClasses,
-  getSpinnerSVG,
-  normalizeSvgAttrs,
-  getLoadingOverlaySpinnerClasses,
   icon16ViewBox,
   icon24ViewBox,
   sortAscIcon16PathD,
@@ -704,7 +647,6 @@ import {
   lockClosedIcon24PathD,
   lockOpenIcon24PathD
 } from "@expcat/tigercat-core";
-var spinnerSvg = getSpinnerSVG("spinner");
 var SortIcon = (direction) => {
   const active = direction !== null;
   const pathD = direction === "asc" ? sortAscIcon16PathD : direction === "desc" ? sortDescIcon16PathD : sortBothIcon16PathD;
@@ -715,7 +657,8 @@ var SortIcon = (direction) => {
       width: "16",
       height: "16",
       viewBox: icon16ViewBox,
-      fill: "currentColor"
+      fill: "currentColor",
+      "aria-hidden": "true"
     },
     [h("path", { d: pathD })]
   );
@@ -747,62 +690,34 @@ var ExpandIcon = (expanded) => {
     [h("path", { d: expandChevronIcon16PathD })]
   );
 };
-var LoadingSpinner = () => {
-  return h(
-    "svg",
-    {
-      class: getLoadingOverlaySpinnerClasses(),
-      xmlns: "http://www.w3.org/2000/svg",
-      fill: "none",
-      viewBox: spinnerSvg.viewBox
-    },
-    spinnerSvg.elements.map((el) => h(el.type, normalizeSvgAttrs(el.attrs)))
-  );
-};
 
 // src/components/Table/render-header.ts
-import { h as h2 } from "vue";
-import {
-  classNames,
-  getTableHeaderClasses,
-  getTableHeaderCellClasses,
-  getTableFixedHeaderCellClasses,
-  getFixedColumnStyle,
-  getCheckboxCellClasses,
-  getExpandIconCellClasses,
-  formatTableSortByText,
-  tableSortButtonClasses
-} from "@expcat/tigercat-core";
+function isHeaderSortClickTarget(target) {
+  if (!(target instanceof Element)) return false;
+  return Boolean(target.closest("[data-tiger-table-filter], button:not([data-tiger-table-sort])"));
+}
 function renderTableHeader(ctx, props, slots, labels) {
-  const headerCells = [];
-  const expandAtStart = props.expandable && props.expandable.expandIconPosition !== "end";
-  const expandAtEnd = props.expandable && props.expandable.expandIconPosition === "end";
-  const expandHeaderTh = props.expandable ? h2("th", {
+  const chrome = getTableChromeSlots({
+    hasSelectionColumn: hasTableSelectionColumn(props.rowSelection),
+    expand: resolveTableExpandSlot(props.expandable)
+  });
+  const expandHeaderTh = h2("th", {
     class: getExpandIconCellClasses(props.size),
-    "aria-label": labels.expandText
-  }) : null;
-  if (expandAtStart && expandHeaderTh) {
-    headerCells.push(expandHeaderTh);
-  }
-  if (props.rowSelection && props.rowSelection.showCheckbox !== false && props.rowSelection.type !== "radio") {
-    headerCells.push(
-      h2(
-        "th",
-        {
-          class: getCheckboxCellClasses(props.size)
-        },
-        [
-          h2("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)
-          })
-        ]
-      )
-    );
+    "aria-hidden": "true"
+  });
+  const selectionHeaderTh = props.rowSelection?.type === "radio" ? h2("th", { class: getCheckboxCellClasses(props.size), "aria-hidden": "true" }) : h2("th", { class: getCheckboxCellClasses(props.size) }, [
+    h2(Checkbox, {
+      size: "sm",
+      modelValue: ctx.allSelected.value,
+      indeterminate: ctx.someSelected.value,
+      "aria-label": labels.selectAllText,
+      onChange: (checked) => ctx.handleSelectAll(checked)
+    })
+  ]);
+  function chromeTh(slot) {
+    return slot === "expand" ? expandHeaderTh : selectionHeaderTh;
   }
+  const headerCells = chrome.leading.map((slot) => chromeTh(slot));
   ctx.displayColumns.value.forEach((column) => {
     const isSorted = ctx.sortState.value.key === column.key;
     const sortDirection = isSorted ? ctx.sortState.value.direction : null;
@@ -830,7 +745,11 @@ function renderTableHeader(ctx, props, slots, labels) {
             type: "button",
             "data-tiger-table-sort": "",
             class: tableSortButtonClasses,
-            onClick: () => ctx.handleSort(column.key)
+            "aria-label": formatTableSortByText(labels.sortByText, String(column.title)),
+            onClick: (event) => {
+              event.stopPropagation();
+              ctx.handleSort(column.key);
+            }
           },
           [...titleContent, SortIcon(sortDirection)]
         )
@@ -846,7 +765,7 @@ function renderTableHeader(ctx, props, slots, labels) {
             type: "button",
             class: classNames(
               "inline-flex items-center",
-              column.fixed === "left" || column.fixed === "right" ? "text-[var(--tiger-primary,#2563eb)]" : "text-gray-400 hover:text-gray-700"
+              column.fixed === "left" || column.fixed === "right" ? "text-[var(--tiger-primary,#2563eb)]" : "text-[var(--tiger-text-muted,#6b7280)] hover:text-[var(--tiger-text,#111827)]"
             ),
             "aria-label": formatTableSortByText(
               column.fixed === "left" || column.fixed === "right" ? labels.unlockColumnAriaLabel : labels.lockColumnAriaLabel,
@@ -861,11 +780,14 @@ function renderTableHeader(ctx, props, slots, labels) {
         )
       );
     }
+    const filterValue = ctx.filterState.value[column.key];
+    const filterText = filterValue == null ? "" : String(filterValue);
     headerCells.push(
       h2(
         "th",
         {
           key: column.key,
+          scope: "col",
           "data-tiger-table-column-key": column.key,
           "aria-sort": ariaSort,
           class: classNames(
@@ -884,6 +806,10 @@ function renderTableHeader(ctx, props, slots, labels) {
           ),
           style,
           draggable: props.columnDraggable ? "true" : void 0,
+          onClick: column.sortable ? (event) => {
+            if (isHeaderSortClickTarget(event.target)) return;
+            ctx.handleSort(column.key);
+          } : 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
@@ -891,36 +817,56 @@ function renderTableHeader(ctx, props, slots, labels) {
         [
           h2("div", { class: "flex items-center gap-2" }, headerContent),
           ...column.filter ? [
-            h2("div", { class: "mt-2" }, [
-              column.filter.type === "select" && column.filter.options ? h2(
-                "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()
-                },
-                [
-                  h2("option", { value: "" }, labels.allText),
-                  ...column.filter.options.map(
-                    (opt) => h2("option", { value: opt.value }, opt.label)
-                  )
-                ]
-              ) : h2("input", {
-                type: "text",
-                class: "w-full px-2 py-1 text-sm border border-gray-300 rounded",
-                placeholder: column.filter.placeholder || labels.filterPlaceholder,
-                onInput: (e) => ctx.handleFilter(column.key, e.target.value),
-                onClick: (e) => e.stopPropagation()
-              })
-            ])
+            h2(
+              "div",
+              {
+                class: "mt-2",
+                "data-tiger-table-filter": "",
+                draggable: false,
+                onClick: (e) => e.stopPropagation(),
+                onDragstart: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                }
+              },
+              [
+                column.filter.type === "select" && column.filter.options ? h2(
+                  "select",
+                  {
+                    class: getInputClasses({ size: "sm" }),
+                    "aria-label": formatTableFilterColumnAriaLabel(
+                      labels.filterColumnAriaLabel,
+                      String(column.title)
+                    ),
+                    value: filterText,
+                    draggable: false,
+                    onChange: (e) => ctx.handleFilter(column.key, e.target.value)
+                  },
+                  [
+                    h2("option", { value: "" }, labels.allText),
+                    ...column.filter.options.map(
+                      (opt) => h2("option", { value: opt.value }, opt.label)
+                    )
+                  ]
+                ) : h2(Input, {
+                  size: "sm",
+                  modelValue: filterText,
+                  "aria-label": formatTableFilterColumnAriaLabel(
+                    labels.filterColumnAriaLabel,
+                    String(column.title)
+                  ),
+                  placeholder: column.filter.placeholder || labels.filterPlaceholder,
+                  draggable: false,
+                  "onUpdate:modelValue": (value) => ctx.handleFilter(column.key, value ?? "")
+                })
+              ]
+            )
           ] : []
         ]
       )
     );
   });
-  if (expandAtEnd && expandHeaderTh) {
-    headerCells.push(expandHeaderTh);
-  }
+  headerCells.push(...chrome.trailing.map((slot) => chromeTh(slot)));
   return h2("thead", { class: getTableHeaderClasses(props.stickyHeader) }, [h2("tr", headerCells)]);
 }
 
@@ -941,9 +887,20 @@ import {
   getEditableCellClasses,
   editableCellInputClasses,
   tableGroupHeaderClasses,
-  getGroupHeaderCellClasses
+  getGroupHeaderCellClasses,
+  getTableChromeSlots as getTableChromeSlots2,
+  hasTableSelectionColumn as hasTableSelectionColumn2,
+  resolveTableExpandSlot as resolveTableExpandSlot2,
+  formatTableSelectRowAriaLabel,
+  formatTableGroupHeaderText,
+  tableVirtualSpacerCellClasses
 } from "@expcat/tigercat-core";
 function renderTableBody(ctx, props, slots, labels) {
+  const hasRowControls = hasTableSelectionColumn2(props.rowSelection) || Boolean(props.expandable);
+  const chrome = getTableChromeSlots2({
+    hasSelectionColumn: hasTableSelectionColumn2(props.rowSelection),
+    expand: resolveTableExpandSlot2(props.expandable)
+  });
   if (props.loading) {
     return null;
   }
@@ -975,12 +932,14 @@ function renderTableBody(ctx, props, slots, labels) {
       "tr[data-tiger-table-row-index]"
     );
     if (!row) return null;
-    const index = Number(row.dataset.tigerTableRowIndex);
-    if (!Number.isInteger(index)) return null;
-    const record = ctx.paginatedData.value[index];
-    const key = ctx.paginatedRowKeys.value[index];
+    const sourceIndex = Number(row.dataset.tigerTableRowIndex);
+    if (!Number.isInteger(sourceIndex)) return null;
+    const pageIndex = ctx.pageSourceIndices.value.indexOf(sourceIndex);
+    if (pageIndex < 0) return null;
+    const record = ctx.paginatedData.value[pageIndex];
+    const key = ctx.paginatedRowKeys.value[pageIndex];
     if (!record || key === void 0) return null;
-    return { key, record, index };
+    return { key, record, index: sourceIndex };
   }
   function handleBodyClick(event) {
     const row = getDelegatedRow(event);
@@ -1010,14 +969,15 @@ function renderTableBody(ctx, props, slots, labels) {
     onDrop: props.rowDraggable ? handleBodyDrop : void 0
   };
   function renderDataRow(record, index) {
+    const sourceIndex = ctx.pageSourceIndices.value[index] ?? 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 rowClass = typeof props.rowClassName === "function" ? props.rowClassName(record, sourceIndex) : props.rowClassName;
     const cells = [];
-    const expandAtStart = props.expandable && props.expandable.expandIconPosition !== "end";
-    const expandToggleCell = props.expandable ? h3(
+    const checkboxProps = props.rowSelection?.getCheckboxProps?.(record) || {};
+    const expandToggleCell = h3(
       "td",
       {
         class: getExpandIconCellClasses2(props.size)
@@ -1038,31 +998,43 @@ function renderTableBody(ctx, props, slots, labels) {
           [ExpandIcon(isExpanded)]
         )
       ] : []
-    ) : null;
-    if (expandAtStart && expandToggleCell) {
-      cells.push(expandToggleCell);
-    }
-    if (props.rowSelection && props.rowSelection.showCheckbox !== false) {
-      const checkboxProps = props.rowSelection?.getCheckboxProps?.(record) || {};
-      cells.push(
-        h3(
-          "td",
-          {
-            class: getCheckboxCellClasses2(props.size)
-          },
-          [
-            h3("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)
-            })
-          ]
-        )
-      );
+    );
+    const selectionCell = h3(
+      "td",
+      {
+        class: getCheckboxCellClasses2(props.size),
+        onClick: (e) => e.stopPropagation()
+      },
+      [
+        props.rowSelection?.type === "radio" ? h3(Radio, {
+          size: "sm",
+          name: props.selectionName,
+          value: key,
+          modelValue: isSelected,
+          disabled: checkboxProps.disabled,
+          "aria-label": formatTableSelectRowAriaLabel(
+            labels.selectRowAriaLabel,
+            sourceIndex + 1
+          ),
+          onChange: (checked) => {
+            if (checked) ctx.handleSelectRow(key, true);
+          }
+        }) : h3(Checkbox, {
+          size: "sm",
+          modelValue: isSelected,
+          disabled: checkboxProps.disabled,
+          "aria-label": formatTableSelectRowAriaLabel(
+            labels.selectRowAriaLabel,
+            sourceIndex + 1
+          ),
+          onChange: (checked) => ctx.handleSelectRow(key, checked)
+        })
+      ]
+    );
+    function chromeTd(slot) {
+      return slot === "expand" ? expandToggleCell : selectionCell;
     }
+    cells.push(...chrome.leading.map((slot) => chromeTd(slot)));
     ctx.displayColumns.value.forEach((column) => {
       const dataKey = column.dataKey || column.key;
       const cellValue = record[dataKey];
@@ -1075,15 +1047,15 @@ function renderTableBody(ctx, props, slots, labels) {
         view: "table",
         column,
         record,
-        rowIndex: index,
+        rowIndex: sourceIndex,
         striped: props.striped,
         stripedActive: props.striped && index % 2 === 0,
         selected: isSelected,
         hoverable: props.hoverable,
         fixedInfo: ctx.fixedColumnsInfo.value
       });
-      const isEditing = ctx.editingCell.value?.rowIndex === index && ctx.editingCell.value?.columnKey === column.key;
-      const isEditableCell = ctx.isCellEditable(column.key, index);
+      const isEditing = ctx.editingCell.value?.rowIndex === sourceIndex && ctx.editingCell.value?.columnKey === column.key;
+      const isEditableCell = ctx.isCellEditable(column.key, sourceIndex);
       const cellContent = isEditing ? h3("input", {
         type: "text",
         class: editableCellInputClasses,
@@ -1097,7 +1069,7 @@ function renderTableBody(ctx, props, slots, labels) {
           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);
+      }) : slots[`cell-${column.key}`]?.({ record, index: sourceIndex }) ?? (column.render ? column.render(record, sourceIndex) : cellValue);
       cells.push(
         h3(
           "td",
@@ -1109,32 +1081,29 @@ function renderTableBody(ctx, props, slots, labels) {
               isEditableCell && !isEditing && getEditableCellClasses(false)
             ),
             style,
-            onDblclick: isEditableCell && !isEditing ? () => ctx.startEditing(index, column.key, cellValue) : void 0
+            onDblclick: isEditableCell && !isEditing ? () => ctx.startEditing(sourceIndex, column.key, cellValue) : void 0
           },
           [cellContent]
         )
       );
     });
-    if (!expandAtStart && expandToggleCell) {
-      cells.push(expandToggleCell);
-    }
+    cells.push(...chrome.trailing.map((slot) => chromeTd(slot)));
     const rowNode = h3(
       "tr",
       {
         key,
-        "data-tiger-table-row-index": index,
+        "data-tiger-table-row-index": sourceIndex,
         class: classNames2(
           getTableRowClasses(props.hoverable, props.striped, index % 2 === 0, rowClass),
           ctx.fixedColumnsInfo.value.hasFixedColumns && "group"
         ),
         "aria-selected": props.rowSelection ? isSelected : void 0,
-        tabindex: props.interactiveRows ? 0 : void 0,
-        // Delegated mouse click stays on tbody; add per-row keyboard activation.
-        onKeydown: props.interactiveRows ? (e) => {
+        tabindex: props.interactiveRows && !hasRowControls ? 0 : void 0,
+        onKeydown: props.interactiveRows && !hasRowControls ? (e) => {
           if (e.target !== e.currentTarget) return;
           if (isActivationKey(e)) {
             e.preventDefault();
-            ctx.handleRowClick(record, index, key);
+            ctx.handleRowClick(record, sourceIndex, key);
           }
         } : void 0,
         draggable: props.rowDraggable ? "true" : void 0
@@ -1142,7 +1111,7 @@ function renderTableBody(ctx, props, slots, labels) {
       cells
     );
     if (props.expandable && isExpanded && isRowExpandable) {
-      const expandedContent = slots["expanded-row"]?.({ record, index }) || (props.expandable.expandedRowRender ? props.expandable.expandedRowRender(record, index) : null);
+      const expandedContent = slots["expanded-row"]?.({ record, index: sourceIndex }) || (props.expandable.expandedRowRender ? props.expandable.expandedRowRender(record, sourceIndex) : null);
       const expandedRow = h3(
         "tr",
         {
@@ -1175,7 +1144,7 @@ function renderTableBody(ctx, props, slots, labels) {
               colspan: ctx.totalColumnCount.value,
               class: getGroupHeaderCellClasses(props.size)
             },
-            `${props.groupBy}: ${groupKey} (${groupItems.length})`
+            formatTableGroupHeaderText(labels.groupHeaderText, groupKey, groupItems.length)
           )
         ])
       );
@@ -1192,31 +1161,47 @@ function renderTableBody(ctx, props, slots, labels) {
     return h3("tbody", delegatedBodyHandlers, groupRows);
   }
   const vw = props.virtualWindow;
-  if (vw && vw.endIndex >= vw.startIndex) {
+  if (vw) {
     const windowed = [];
     if (vw.topPad > 0) {
       windowed.push(
-        h3("tr", { key: "virtual-top", "aria-hidden": "true" }, [
-          h3("td", {
-            colspan: ctx.totalColumnCount.value,
-            style: { height: `${vw.topPad}px`, padding: 0 }
-          })
-        ])
+        h3(
+          "tr",
+          { key: "virtual-top", "aria-hidden": "true", "data-tiger-table-virtual-spacer": "" },
+          [
+            h3("td", {
+              colspan: ctx.totalColumnCount.value,
+              class: tableVirtualSpacerCellClasses,
+              style: { height: `${vw.topPad}px` }
+            })
+          ]
+        )
       );
     }
     for (let index = vw.startIndex; index <= vw.endIndex; index++) {
-      const result = renderDataRow(ctx.paginatedData.value[index], index);
+      const record = ctx.paginatedData.value[index];
+      if (record === void 0) continue;
+      const result = renderDataRow(record, index);
       if (Array.isArray(result)) windowed.push(...result);
       else windowed.push(result);
     }
     if (vw.bottomPad > 0) {
       windowed.push(
-        h3("tr", { key: "virtual-bottom", "aria-hidden": "true" }, [
-          h3("td", {
-            colspan: ctx.totalColumnCount.value,
-            style: { height: `${vw.bottomPad}px`, padding: 0 }
-          })
-        ])
+        h3(
+          "tr",
+          {
+            key: "virtual-bottom",
+            "aria-hidden": "true",
+            "data-tiger-table-virtual-spacer": ""
+          },
+          [
+            h3("td", {
+              colspan: ctx.totalColumnCount.value,
+              class: tableVirtualSpacerCellClasses,
+              style: { height: `${vw.bottomPad}px` }
+            })
+          ]
+        )
       );
     }
     return h3("tbody", delegatedBodyHandlers, windowed);
@@ -1227,16 +1212,22 @@ function renderTableBody(ctx, props, slots, labels) {
 
 // src/components/Table/render-summary.ts
 import { h as h4 } from "vue";
-import { getTableCellClasses as getTableCellClasses2, tableSummaryRowClasses } from "@expcat/tigercat-core";
+import {
+  getTableCellClasses as getTableCellClasses2,
+  getTableChromeSlots as getTableChromeSlots3,
+  hasTableSelectionColumn as hasTableSelectionColumn3,
+  resolveTableExpandSlot as resolveTableExpandSlot3,
+  tableSummaryRowClasses
+} from "@expcat/tigercat-core";
 function renderSummaryRow(ctx, props) {
   if (!props.summaryRow?.show) return null;
-  const emptyCells = [];
-  if (props.rowSelection) {
-    emptyCells.push(h4("td", { class: getTableCellClasses2(props.size, "left") }));
-  }
-  if (props.expandable) {
-    emptyCells.push(h4("td", { class: getTableCellClasses2(props.size, "left") }));
-  }
+  const chrome = getTableChromeSlots3({
+    hasSelectionColumn: hasTableSelectionColumn3(props.rowSelection),
+    expand: resolveTableExpandSlot3(props.expandable)
+  });
+  const emptyCell = () => h4("td", { class: getTableCellClasses2(props.size, "left") });
+  const leading = chrome.leading.map(() => emptyCell());
+  const trailing = chrome.trailing.map(() => emptyCell());
   const dataCells = ctx.displayColumns.value.map((col) => {
     const dataKey = col.dataKey || col.key;
     const val = props.summaryRow.data[dataKey];
@@ -1246,34 +1237,34 @@ function renderSummaryRow(ctx, props) {
         key: col.key,
         class: getTableCellClasses2(props.size, col.align || "left", col.className)
       },
-      val != null ? String(val) : ""
+      val ?? void 0
     );
   });
-  return h4("tfoot", [h4("tr", { class: tableSummaryRowClasses }, [...emptyCells, ...dataCells])]);
+  return h4("tfoot", [
+    h4("tr", { class: tableSummaryRowClasses }, [...leading, ...dataCells, ...trailing])
+  ]);
 }
 
 // src/components/Table/render-pagination.ts
 import { h as h5 } from "vue";
 import {
-  formatPaginationPageIndicator,
   formatPaginationTotal,
   getBuiltInPaginationContainerClasses,
   getPaginationLabels,
   resolvePaginationDisplayMode
 } from "@expcat/tigercat-core";
 function renderPagination(ctx, props, view) {
-  if (props.pagination === false || !ctx.paginationInfo.value) {
+  const paginationConfig = ctx.paginationConfig.value;
+  if (props.pagination === false || !ctx.paginationInfo.value || !paginationConfig) {
     return null;
   }
-  const { totalPages } = ctx.paginationInfo.value;
-  const paginationConfig = props.pagination;
-  const total = paginationConfig.total !== void 0 && paginationConfig.total > 0 ? paginationConfig.total : ctx.processedData.value.length;
+  const { totalPages, total } = ctx.paginationInfo.value;
   const locale = view?.disableI18n ? void 0 : view?.locale;
   const labels = getPaginationLabels(locale);
   const localeCode = locale?.locale;
   const { simple, showQuickJumper } = resolvePaginationDisplayMode(totalPages, paginationConfig);
   const totalText = paginationConfig.totalText ?? ((value, range) => formatPaginationTotal(labels.totalText, value, range, localeCode));
-  const pageIndicatorText = paginationConfig.pageIndicatorText ?? ((current, pages) => formatPaginationPageIndicator(labels.pageIndicatorText, current, pages, localeCode));
+  const pageIndicatorText = paginationConfig.pageIndicatorText;
   const overrides = view?.disableI18n ? { ...labels } : {};
   if (paginationConfig.prevText) overrides.prevPageAriaLabel = paginationConfig.prevText;
   if (paginationConfig.nextText) overrides.nextPageAriaLabel = paginationConfig.nextText;
@@ -1324,8 +1315,17 @@ var Table = defineComponent({
     const wrapperRef = ref2(null);
     const tableRef = ref2(null);
     const measuredColumnWidths = ref2({});
-    const measuredRowHeights = ref2([]);
-    const ctx = useTableState(props, emit, measuredColumnWidths);
+    const measuredRowHeights = ref2({});
+    const measuredContainerSize = ref2({ width: 0, height: 0 });
+    const isCardViewport = ref2(false);
+    const selectionGroupName = useId();
+    let stopCardViewport;
+    const ctx = useTableState(
+      props,
+      emit,
+      measuredColumnWidths,
+      measuredContainerSize
+    );
     const resolvedPaginationLocale = ref2();
     const resolvedTableLocale = ref2();
     let paginationLocaleResolveId = 0;
@@ -1408,33 +1408,83 @@ var Table = defineComponent({
         if (!areNumberRecordsEqual(measuredColumnWidths.value, snapshot.columnWidths)) {
           measuredColumnWidths.value = snapshot.columnWidths;
         }
-        if (!areNumberArraysEqual(measuredRowHeights.value, snapshot.rowHeights)) {
+        if (!areNumberRecordsEqual(measuredRowHeights.value, snapshot.rowHeights)) {
           measuredRowHeights.value = snapshot.rowHeights;
         }
+        const nextSize = { width: snapshot.containerWidth, height: snapshot.containerHeight };
+        if (measuredContainerSize.value.width !== nextSize.width || measuredContainerSize.value.height !== nextSize.height) {
+          measuredContainerSize.value = nextSize;
+        }
       }
     });
-    onMounted(() => {
-      if (wrapperRef.value) {
-        resizeController.observe(wrapperRef.value, tableRef.value);
-      }
+    const shouldObserveGeometry = computed2(() => {
+      const resolvedProps = props;
+      const virtualRecommendation = getTableVirtualRecommendation({
+        virtual: resolvedProps.virtual,
+        autoVirtual: resolvedProps.autoVirtual,
+        dataLength: ctx.processedData.value.length,
+        threshold: resolvedProps.virtualThreshold
+      });
+      return virtualRecommendation.enabled || resolvedProps.columnLockable || ctx.displayColumns.value.some(
+        (column) => column.fixed === "left" || column.fixed === "right"
+      );
+    });
+    function attachResizeObserver() {
+      resizeController.disconnect();
+      if (!shouldObserveGeometry.value || !wrapperRef.value) return;
+      resizeController.observe(wrapperRef.value, tableRef.value);
+    }
+    watch2(
+      [
+        shouldObserveGeometry,
+        () => ctx.displayColumns.value.length,
+        () => ctx.paginatedData.value.length
+      ],
+      () => attachResizeObserver()
+    );
+    onMounted(() => attachResizeObserver());
+    watch2(
+      () => [props.responsiveMode, props.cardBreakpoint],
+      ([mode, breakpoint]) => {
+        stopCardViewport?.();
+        if (mode !== "card") {
+          isCardViewport.value = false;
+          stopCardViewport = void 0;
+          return;
+        }
+        stopCardViewport = subscribeTableCardViewport(breakpoint, (next) => {
+          isCardViewport.value = next;
+        });
+      },
+      { immediate: true }
+    );
+    onBeforeUnmount(() => {
+      stopCardViewport?.();
+      resizeController.disconnect();
     });
-    onBeforeUnmount(() => resizeController.disconnect());
     return () => {
       const resolvedProps = props;
       const virtualRecommendation = getTableVirtualRecommendation({
         virtual: resolvedProps.virtual,
         autoVirtual: resolvedProps.autoVirtual,
-        dataLength: resolvedProps.dataSource.length,
+        dataLength: ctx.processedData.value.length,
         threshold: resolvedProps.virtualThreshold
       });
-      const effectiveVirtual = virtualRecommendation.enabled;
+      const virtualAllowed = canUseTableVirtualWindow({
+        expandable: resolvedProps.expandable,
+        groupBy: resolvedProps.groupBy
+      });
+      const effectiveVirtual = virtualRecommendation.enabled && virtualAllowed;
+      const showCardTree = resolvedProps.responsiveMode === "card" && isCardViewport.value;
+      const showTableTree = !showCardTree;
       const wrapperStyle = resolvedProps.maxHeight ? {
         maxHeight: typeof resolvedProps.maxHeight === "number" ? `${resolvedProps.maxHeight}px` : resolvedProps.maxHeight
       } : void 0;
+      const measuredItemHeight = Object.values(measuredRowHeights.value)[0];
       const virtualWindow = effectiveVirtual ? getTableVirtualWindow(
         ctx.virtualScrollTop.value,
-        typeof resolvedProps.virtualHeight === "number" ? resolvedProps.virtualHeight : 400,
-        resolvedProps.virtualItemHeight,
+        measuredContainerSize.value.height > 0 ? measuredContainerSize.value.height : typeof resolvedProps.virtualHeight === "number" ? resolvedProps.virtualHeight : 400,
+        measuredItemHeight > 0 ? measuredItemHeight : resolvedProps.virtualItemHeight,
         ctx.paginatedData.value.length
       ) : void 0;
       const renderProps = {
@@ -1443,7 +1493,8 @@ var Table = defineComponent({
         // Rows become keyboard-activable when a row-click listener is bound or
         // row selection is enabled (mirrors React's onRowClick/rowSelection).
         interactiveRows: !!resolvedProps.rowSelection || typeof instance?.vnode.props?.onRowClick === "function",
-        virtualWindow
+        virtualWindow,
+        selectionName: selectionGroupName
       };
       const shouldPinColumns = resolvedProps.columnLockable || ctx.fixedColumnsInfo.value.hasFixedColumns;
       const colgroup = shouldPinColumns ? h6(
@@ -1452,8 +1503,8 @@ var Table = defineComponent({
           columns: ctx.displayColumns.value,
           frozenWidths: ctx.frozenColumnWidths.value,
           size: resolvedProps.size,
-          hasSelectionColumn: !!resolvedProps.rowSelection && resolvedProps.rowSelection.showCheckbox !== false,
-          expand: resolvedProps.expandable ? resolvedProps.expandable.expandIconPosition === "end" ? "end" : "start" : false
+          hasSelectionColumn: hasTableSelectionColumn4(resolvedProps.rowSelection),
+          expand: resolveTableExpandSlot4(resolvedProps.expandable)
         }).map(
           (entry, index) => h6("col", {
             key: `${entry.key}-${index}`,
@@ -1473,31 +1524,36 @@ var Table = defineComponent({
           ref: tableRef,
           class: classNames3(
             tableBaseClasses,
-            getTableResponsiveTableClasses(
+            resolvedProps.responsiveMode === "scroll" ? getTableResponsiveTableClasses(
               resolvedProps.responsiveMode,
               resolvedProps.cardBreakpoint
-            ),
+            ) : void 0,
             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 = effectiveVirtual ? h6(
+      const virtualScrollerStyle = {
+        height: typeof resolvedProps.virtualHeight === "number" ? `${resolvedProps.virtualHeight}px` : resolvedProps.virtualHeight,
+        overflow: "auto"
+      };
+      const onVirtualScroll = (e) => {
+        ctx.virtualScrollTop.value = e.target.scrollTop;
+      };
+      const tableContent = showTableTree && (effectiveVirtual ? h6(
         "div",
         {
-          style: { height: `${resolvedProps.virtualHeight}px`, overflow: "auto" },
-          onScroll: (e) => {
-            ctx.virtualScrollTop.value = e.target.scrollTop;
-          }
+          style: virtualScrollerStyle,
+          onScroll: onVirtualScroll
         },
         [tableInner]
-      ) : tableInner;
+      ) : tableInner);
       const cardContent = (() => {
-        if (resolvedProps.responsiveMode !== "card") return null;
+        if (!showCardTree) return null;
         const cardChildren = [];
         const sortableColumns = ctx.displayColumns.value.filter((column) => column.sortable);
-        if (resolvedProps.rowSelection && resolvedProps.rowSelection.type !== "radio" && resolvedProps.rowSelection.showCheckbox !== false && ctx.paginatedData.value.length > 0) {
+        if (resolvedProps.rowSelection && resolvedProps.rowSelection.type !== "radio" && resolvedProps.rowSelection.showCheckbox !== false && !resolvedProps.loading && ctx.paginatedData.value.length > 0) {
           cardChildren.push(
             h6(
               "div",
@@ -1529,9 +1585,10 @@ var Table = defineComponent({
               [
                 h6(Select, {
                   size: "sm",
-                  modelValue: ctx.sortState.value.key && ctx.sortState.value.direction ? `${ctx.sortState.value.key}:${ctx.sortState.value.direction}` : "",
+                  "aria-label": tableLabels.value.sortMenuAriaLabel,
+                  modelValue: getTableCardSortValue(ctx.sortState.value),
                   options: [
-                    { label: tableLabels.value.clearSortText, value: "" },
+                    { label: tableLabels.value.clearSortText, value: TABLE_CARD_SORT_NONE },
                     ...sortableColumns.flatMap((column) => [
                       {
                         label: `${formatTableSortByText2(tableLabels.value.sortByText, column.title)} \u2191`,
@@ -1545,30 +1602,35 @@ var Table = defineComponent({
                   ],
                   clearable: false,
                   "onUpdate:modelValue": (value) => {
-                    const nextValue = String(value ?? "");
-                    if (!nextValue) {
-                      ctx.handleSetSort({ key: null, direction: null });
-                      return;
-                    }
-                    const separatorIndex = nextValue.lastIndexOf(":");
-                    const key = nextValue.slice(0, separatorIndex);
-                    const direction = nextValue.slice(separatorIndex + 1);
-                    ctx.handleSetSort({ key, direction });
+                    ctx.handleSetSort(parseTableCardSortValue(value));
                   }
                 })
               ]
             )
           );
         }
-        if (ctx.paginatedData.value.length === 0) {
+        if (resolvedProps.loading) {
+        } else if (ctx.paginatedData.value.length === 0) {
           cardChildren.push(
             h6("div", { class: getTableResponsiveCardClasses(resolvedProps.cardPadding) }, [
               h6(Empty, { showImage: false, description: tableLabels.value.emptyText })
             ])
           );
         } else {
+          const cardStart = effectiveVirtual && virtualWindow ? virtualWindow.startIndex : 0;
+          const cardEnd = effectiveVirtual && virtualWindow ? virtualWindow.endIndex + 1 : ctx.paginatedData.value.length;
+          if (effectiveVirtual && virtualWindow && virtualWindow.topPad > 0) {
+            cardChildren.push(
+              h6("div", {
+                "aria-hidden": "true",
+                style: { height: `${virtualWindow.topPad}px` }
+              })
+            );
+          }
           cardChildren.push(
-            ...ctx.paginatedData.value.map((record, index) => {
+            ...ctx.paginatedData.value.slice(cardStart, cardEnd).map((record, offset) => {
+              const index = cardStart + offset;
+              const sourceIndex = ctx.pageSourceIndices.value[index] ?? index;
               const key = ctx.paginatedRowKeys.value[index];
               const isExpanded = ctx.expandedRowKeySet.value.has(key);
               const isSelected = ctx.selectedRowKeySet.value.has(key);
@@ -1576,7 +1638,7 @@ var Table = defineComponent({
               const { titleColumn, bodyColumns } = getCardColumns(ctx.displayColumns.value);
               const renderCardCellContent = (column) => {
                 const dataKey = column.dataKey || column.key;
-                return slots[`cell-${column.key}`]?.({ record, index }) ?? (column.render ? column.render(record, index) : record[dataKey]);
+                return slots[`cell-${column.key}`]?.({ record, index: sourceIndex }) ?? (column.render ? column.render(record, sourceIndex) : record[dataKey]);
               };
               const titleNode = titleColumn ? h6("div", { class: tableResponsiveCardTitleClasses }, [
                 renderCardCellContent(titleColumn)
@@ -1689,12 +1751,13 @@ var Table = defineComponent({
                 controls.push(
                   h6("span", { onClick: (event) => event.stopPropagation() }, [
                     resolvedProps.rowSelection.type === "radio" ? h6(Radio, {
+                      name: selectionGroupName,
                       value: key,
-                      checked: isSelected,
+                      modelValue: isSelected,
                       disabled: checkboxProps.disabled,
-                      "aria-label": formatTableSelectRowAriaLabel(
+                      "aria-label": formatTableSelectRowAriaLabel2(
                         tableLabels.value.selectRowAriaLabel,
-                        index + 1,
+                        sourceIndex + 1,
                         tableLocale.value?.locale
                       ),
                       onChange: () => ctx.handleSelectRow(key, true)
@@ -1702,9 +1765,9 @@ var Table = defineComponent({
                       size: "sm",
                       modelValue: isSelected,
                       disabled: checkboxProps.disabled,
-                      "aria-label": formatTableSelectRowAriaLabel(
+                      "aria-label": formatTableSelectRowAriaLabel2(
                         tableLabels.value.selectRowAriaLabel,
-                        index + 1,
+                        sourceIndex + 1,
                         tableLocale.value?.locale
                       ),
                       onChange: (checked) => ctx.handleSelectRow(key, checked)
@@ -1744,10 +1807,10 @@ var Table = defineComponent({
                   ])
                 ]
               ) : titleNode;
-              const expandedContent = resolvedProps.expandable && isExpanded && isRowExpandable ? slots["expanded-row"]?.({ record, index }) ?? resolvedProps.expandable.expandedRowRender?.(record, index) : null;
+              const expandedContent = resolvedProps.expandable && isExpanded && isRowExpandable ? slots["expanded-row"]?.({ record, index: sourceIndex }) ?? resolvedProps.expandable.expandedRowRender?.(record, sourceIndex) : null;
               const cardContext = {
                 record,
-                index,
+                index: sourceIndex,
                 columns: ctx.displayColumns.value,
                 selected: isSelected,
                 expanded: isExpanded,
@@ -1755,7 +1818,9 @@ var Table = defineComponent({
                 selectRow: (checked) => ctx.handleSelectRow(key, checked)
               };
               const customCard = slots.card?.(cardContext) ?? resolvedProps.renderCard?.(cardContext);
-              const resolvedCardClassName = typeof resolvedProps.cardClassName === "function" ? resolvedProps.cardClassName(record, index) : resolvedProps.cardClassName;
+              const resolvedCardClassName = typeof resolvedProps.cardClassName === "function" ? resolvedProps.cardClassName(record, sourceIndex) : resolvedProps.cardClassName;
+              const hasCardControls = controls.length > 0;
+              const cardInteractive = !!resolvedProps.rowSelection || typeof instance?.vnode.props?.onRowClick === "function";
               return h6(
                 "div",
                 {
@@ -1764,7 +1829,15 @@ var Table = defineComponent({
                     getTableResponsiveCardClasses(resolvedProps.cardPadding),
                     resolvedCardClassName
                   ),
-                  onClick: () => ctx.handleRowClick(record, index, key)
+                  tabindex: cardInteractive && !hasCardControls ? 0 : void 0,
+                  onClick: () => ctx.handleRowClick(record, sourceIndex, key),
+                  onKeydown: cardInteractive && !hasCardControls ? (event) => {
+                    if (event.target !== event.currentTarget) return;
+                    if (isActivationKey2(event)) {
+                      event.preventDefault();
+                      ctx.handleRowClick(record, sourceIndex, key);
+                    }
+                  } : void 0
                 },
                 customCard !== void 0 && customCard !== null ? [customCard] : [
                   controls.length && (!titleNode || resolvedProps.cardSelectionPosition !== "title-inline") ? h6("div", { class: "mb-2 flex items-center gap-3" }, controls) : null,
@@ -1781,12 +1854,22 @@ var Table = defineComponent({
               );
             })
           );
+          if (effectiveVirtual && virtualWindow && virtualWindow.bottomPad > 0) {
+            cardChildren.push(
+              h6("div", {
+                "aria-hidden": "true",
+                style: { height: `${virtualWindow.bottomPad}px` }
+              })
+            );
+          }
         }
         return h6(
           "div",
           {
-            class: getTableResponsiveCardListClasses(resolvedProps.cardBreakpoint),
-            "data-tiger-table-mobile": "card"
+            class: tableCardListVisibleClasses,
+            "data-tiger-table-mobile": "card",
+            style: effectiveVirtual ? virtualScrollerStyle : void 0,
+            onScroll: effectiveVirtual ? onVirtualScroll : void 0
           },
           cardChildren
         );
@@ -1795,25 +1878,31 @@ var Table = defineComponent({
         "div",
         {
           ref: wrapperRef,
-          class: getTableWrapperClasses(resolvedProps.bordered, resolvedProps.maxHeight),
+          class: getTableWrapperClasses(
+            resolvedProps.bordered,
+            resolvedProps.maxHeight,
+            !effectiveVirtual
+          ),
           style: wrapperStyle,
-          "data-tiger-virtual": virtualRecommendation.enabled ? "enabled" : void 0,
+          "data-tiger-virtual": effectiveVirtual ? "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,
+          "data-tiger-measured-row-height": Object.values(measuredRowHeights.value)[0] || void 0,
+          "data-tiger-table-layout": showCardTree ? "card" : "table",
           "aria-busy": resolvedProps.loading
         },
         [
-          resolvedProps.exportable && h6("div", { class: "flex justify-end p-2" }, [
+          resolvedProps.exportable && h6("div", { class: tableExportBarClasses }, [
             h6(
-              "button",
+              Button,
               {
                 type: "button",
-                class: tableExportButtonClasses,
+                variant: "secondary",
+                size: "sm",
                 onClick: ctx.handleExport,
-                "aria-label": resolvedProps.exportFormat === "excel" ? tableLabels.value.exportExcelAriaLabel : tableLabels.value.exportCsvAriaLabel
+                "aria-label": tableLabels.value.exportCsvAriaLabel
               },
-              resolvedProps.exportFormat === "excel" ? tableLabels.value.exportExcelText : tableLabels.value.exportCsvText
+              { default: () => tableLabels.value.exportCsvText }
             )
           ]),
           tableContent,
@@ -1826,7 +1915,10 @@ var Table = defineComponent({
               "aria-live": "polite",
               "aria-label": tableLabels.value.loadingText
             },
-            [LoadingSpinner(), h6("span", { class: "sr-only" }, tableLabels.value.loadingText)]
+            [
+              h6(Loading, { "aria-hidden": true, role: "presentation" }),
+              h6("span", { class: "sr-only" }, tableLabels.value.loadingText)
+            ]
           ),
           renderPagination(ctx, renderProps, {
             locale: paginationLocale.value,
@@ -1843,11 +1935,9 @@ function areNumberRecordsEqual(current, next) {
   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);
-}
 
 export {
+  tableProps,
   Table,
   Table_default
 };