@expcat/tigercat-react 2.1.2 → 2.1.3

package/dist/{chunk-2XZHYYZ2.mjs → chunk-GMHJWSQB.mjs}

@@ -1,39 +1,57 @@
 import {
   Select
-} from "./chunk-S2V3HGLZ.mjs";
+} from "./chunk-M7TSPEXC.mjs";
 import {
   Radio
-} from "./chunk-IIWUQK2P.mjs";
+} from "./chunk-4KZETZUH.mjs";
 import {
   Pagination
-} from "./chunk-M6ZPTGBV.mjs";
+} from "./chunk-XAYOEQGB.mjs";
+import {
+  Input
+} from "./chunk-XE34TOCS.mjs";
 import {
   Empty
-} from "./chunk-W7BC4I2Y.mjs";
+} from "./chunk-RLUBTLOT.mjs";
 import {
   Checkbox
-} from "./chunk-EPWAROC2.mjs";
+} from "./chunk-HAG7TGPS.mjs";
+import {
+  Loading
+} from "./chunk-BNCUJLRV.mjs";
+import {
+  Button
+} from "./chunk-WFLXJOFU.mjs";
 import {
   useTigerConfig
-} from "./chunk-YSIXURBW.mjs";
+} from "./chunk-RUIFGSVN.mjs";
 
 // src/components/Table.tsx
-import { useEffect as useEffect2, useMemo as useMemo2, useRef, useState as useState2 } from "react";
+import { useEffect as useEffect2, useId, useMemo as useMemo2, useRef as useRef2, useState as useState2 } from "react";
 import {
   classNames as classNames3,
+  canUseTableVirtualWindow,
   createTableResizeObserverController,
   getTableWrapperClasses,
   getCardColumns,
   getCardGridInfo,
   getTableColgroup,
+  hasTableSelectionColumn as hasTableSelectionColumn4,
+  resolveTableExpandSlot as resolveTableExpandSlot4,
+  tableExportBarClasses,
   getTableResponsiveCardClasses,
-  getTableResponsiveCardListClasses,
   getTableResponsiveTableClasses,
   getTableVirtualRecommendation,
   getTableVirtualWindow,
-  formatTableSelectRowAriaLabel,
+  getTableCardSortValue,
+  parseTableCardSortValue,
+  subscribeTableCardViewport,
+  TABLE_CARD_SORT_NONE,
+  tableCardListVisibleClasses,
+  formatTableSelectRowAriaLabel as formatTableSelectRowAriaLabel2,
   formatTableSortByText as formatTableSortByText2,
   getTableLabels,
+  isActivationKey as isActivationKey2,
   tableBaseClasses,
   tableResponsiveCardLabelClasses,
   tableResponsiveCardRowClasses,
@@ -45,91 +63,35 @@ import {
   mergeTigerLocale,
   resolveTigerLocale
 } from "@expcat/tigercat-core";
-import { tableExportButtonClasses } from "@expcat/tigercat-core";
-
-// src/components/Table/icons.tsx
-import {
-  getSortIconClasses,
-  getExpandIconClasses,
-  getSpinnerSVG,
-  getLoadingOverlaySpinnerClasses,
-  icon16ViewBox,
-  icon24ViewBox,
-  sortAscIcon16PathD,
-  sortDescIcon16PathD,
-  sortBothIcon16PathD,
-  expandChevronIcon16PathD,
-  lockClosedIcon24PathD,
-  lockOpenIcon24PathD
-} from "@expcat/tigercat-core";
-import { jsx } from "react/jsx-runtime";
-var spinnerSvg = getSpinnerSVG("spinner");
-var SortIcon = ({ direction }) => {
-  const active = direction !== null;
-  const pathD = direction === "asc" ? sortAscIcon16PathD : direction === "desc" ? sortDescIcon16PathD : sortBothIcon16PathD;
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      className: getSortIconClasses(active),
-      width: "16",
-      height: "16",
-      viewBox: icon16ViewBox,
-      fill: "currentColor",
-      children: /* @__PURE__ */ jsx("path", { d: pathD })
-    }
-  );
-};
-var LockIcon = ({ locked }) => {
-  return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: icon24ViewBox, fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: locked ? lockClosedIcon24PathD : lockOpenIcon24PathD }) });
-};
-var ExpandIcon = ({ expanded }) => {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      className: getExpandIconClasses(expanded),
-      width: "16",
-      height: "16",
-      viewBox: icon16ViewBox,
-      fill: "currentColor",
-      "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx("path", { d: expandChevronIcon16PathD })
-    }
-  );
-};
-var LoadingSpinner = () => /* @__PURE__ */ jsx(
-  "svg",
-  {
-    className: getLoadingOverlaySpinnerClasses(),
-    xmlns: "http://www.w3.org/2000/svg",
-    fill: "none",
-    viewBox: spinnerSvg.viewBox,
-    children: spinnerSvg.elements.map((el, index) => {
-      if (el.type === "circle") return /* @__PURE__ */ jsx("circle", { ...el.attrs }, index);
-      if (el.type === "path") return /* @__PURE__ */ jsx("path", { ...el.attrs }, index);
-      return null;
-    })
-  }
-);
 
 // src/components/Table/state.ts
-import { useEffect, useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import {
-  sortData,
-  filterTableData,
-  paginateData,
-  calculatePagination,
-  createTableRowKeyCache,
-  filterDataAdvanced,
-  groupDataByColumn,
-  getFixedColumnOffsets,
+  DEFAULT_TABLE_SORT,
+  EMPTY_TABLE_FILTER_RULES,
+  EMPTY_TABLE_FILTERS,
+  EMPTY_TABLE_HIDDEN_KEYS,
+  EMPTY_TABLE_RECORDS,
+  applyTableColumnOrder,
+  commitTableCellEdit,
+  downloadTableExport,
+  exportTableData,
   freezeTableColumnWidths,
-  filterHiddenColumns,
-  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";
+import { devWarn } from "@expcat/tigercat-core";
 function useTableState(input) {
   const {
     columns,
@@ -149,9 +111,9 @@ function useTableState(input) {
     filterMode,
     advancedFilterRules,
     groupBy,
-    exportFormat,
     exportFilename,
     measuredColumnWidths,
+    containerWidth,
     onChange,
     onRowClick,
     onSelectionChange,
@@ -162,25 +124,43 @@ function useTableState(input) {
     onExpandChange,
     onCellChange,
     onColumnOrderChange,
+    onColumnFixedChange,
     onRowOrderChange,
     onExport
   } = input;
+  const sourceData = dataSource ?? EMPTY_TABLE_RECORDS;
+  const [internalData, setInternalData] = useState(null);
+  const prevSourceData = useRef(sourceData);
+  if (prevSourceData.current !== sourceData) {
+    prevSourceData.current = sourceData;
+    if (internalData !== null) {
+      setInternalData(null);
+    }
+  }
+  const effectiveData = internalData ?? sourceData;
   const isSortControlled = sort !== void 0;
   const isFiltersControlled = filters !== void 0;
   const isHiddenColumnsControlled = hiddenColumnKeys !== void 0;
-  const paginationConfig = pagination !== false && typeof pagination === "object" ? pagination : null;
+  const paginationMerged = mergeTablePagination(pagination);
+  const paginationConfig = paginationMerged === false ? null : paginationMerged;
   const isCurrentPageControlled = paginationConfig?.current !== void 0;
   const isPageSizeControlled = paginationConfig?.pageSize !== void 0;
-  const isSelectionControlled = rowSelection?.selectedRowKeys !== void 0 && Array.isArray(rowSelection.selectedRowKeys);
-  const isExpandControlled = expandable?.expandedRowKeys !== void 0 && Array.isArray(expandable.expandedRowKeys);
+  const selectionControl = resolveTableKeyList(
+    rowSelection?.selectedRowKeys,
+    "rowSelection.selectedRowKeys"
+  );
+  const expandControl = resolveTableKeyList(
+    expandable?.expandedRowKeys,
+    "expandable.expandedRowKeys"
+  );
   const [uncontrolledSortState, setUncontrolledSortState] = useState(
-    defaultSort ?? { key: null, direction: null }
+    defaultSort ?? DEFAULT_TABLE_SORT
   );
   const [uncontrolledHiddenColumnKeys, setUncontrolledHiddenColumnKeys] = useState(
-    defaultHiddenColumnKeys ?? hiddenColumnKeys ?? []
+    defaultHiddenColumnKeys ?? hiddenColumnKeys ?? EMPTY_TABLE_HIDDEN_KEYS
   );
   const [uncontrolledFilterState, setUncontrolledFilterState] = useState(
-    defaultFilters ?? {}
+    defaultFilters ?? EMPTY_TABLE_FILTERS
   );
   const [uncontrolledCurrentPage, setUncontrolledCurrentPage] = useState(
     () => paginationConfig?.defaultCurrent ?? paginationConfig?.current ?? 1
@@ -188,84 +168,93 @@ function useTableState(input) {
   const [uncontrolledCurrentPageSize, setUncontrolledCurrentPageSize] = useState(
     () => paginationConfig?.defaultPageSize ?? paginationConfig?.pageSize ?? 10
   );
-  const [uncontrolledSelectedRowKeys, setUncontrolledSelectedRowKeys] = useState(rowSelection?.defaultSelectedRowKeys ?? rowSelection?.selectedRowKeys ?? []);
-  const [uncontrolledExpandedRowKeys, setUncontrolledExpandedRowKeys] = useState(expandable?.defaultExpandedRowKeys ?? expandable?.expandedRowKeys ?? []);
+  const [uncontrolledSelectedRowKeys, setUncontrolledSelectedRowKeys] = useState(rowSelection?.defaultSelectedRowKeys ?? []);
+  const [uncontrolledExpandedRowKeys, setUncontrolledExpandedRowKeys] = useState(expandable?.defaultExpandedRowKeys ?? []);
+  const [columnOrder, setColumnOrder] = useState(null);
+  const [fixedOverrides, setFixedOverrides] = useState(
+    {}
+  );
   const sortState = isSortControlled ? sort : uncontrolledSortState;
   const effectiveHiddenColumnKeys = isHiddenColumnsControlled ? hiddenColumnKeys : uncontrolledHiddenColumnKeys;
   const filterState = isFiltersControlled ? filters : uncontrolledFilterState;
   const currentPage = isCurrentPageControlled ? paginationConfig.current : uncontrolledCurrentPage;
   const currentPageSize = isPageSizeControlled ? paginationConfig.pageSize : uncontrolledCurrentPageSize;
-  const selectedRowKeys = isSelectionControlled ? rowSelection.selectedRowKeys : uncontrolledSelectedRowKeys;
-  const expandedRowKeys = isExpandControlled ? expandable.expandedRowKeys : uncontrolledExpandedRowKeys;
-  useEffect(() => {
-    if (isSortControlled && sort) {
-      setUncontrolledSortState(sort);
+  const selectedRowKeys = selectionControl.controlled ? selectionControl.keys : uncontrolledSelectedRowKeys;
+  const expandedRowKeys = expandControl.controlled ? expandControl.keys : uncontrolledExpandedRowKeys;
+  const prevColumnKeys = useRef(columns.map((column) => column.key).join("\0"));
+  const columnKeysSignature = columns.map((column) => column.key).join("\0");
+  if (prevColumnKeys.current !== columnKeysSignature) {
+    prevColumnKeys.current = columnKeysSignature;
+    if (columnOrder !== null) {
+      setColumnOrder(null);
     }
-  }, [isSortControlled, sort?.key, sort?.direction]);
-  useEffect(() => {
-    if (isFiltersControlled && filters) {
-      setUncontrolledFilterState(filters);
-    }
-  }, [isFiltersControlled, filters]);
-  useEffect(() => {
-    if (isCurrentPageControlled) {
-      setUncontrolledCurrentPage(paginationConfig.current);
-    }
-  }, [isCurrentPageControlled, paginationConfig?.current]);
-  useEffect(() => {
-    if (isPageSizeControlled) {
-      setUncontrolledCurrentPageSize(paginationConfig.pageSize);
-    }
-  }, [isPageSizeControlled, paginationConfig?.pageSize]);
-  useEffect(() => {
-    if (isSelectionControlled) {
-      setUncontrolledSelectedRowKeys(rowSelection?.selectedRowKeys ?? []);
-    }
-  }, [isSelectionControlled, rowSelection?.selectedRowKeys]);
-  useEffect(() => {
-    if (isHiddenColumnsControlled && hiddenColumnKeys) {
-      setUncontrolledHiddenColumnKeys(hiddenColumnKeys);
-    }
-  }, [isHiddenColumnsControlled, hiddenColumnKeys]);
-  useEffect(() => {
-    if (isExpandControlled) {
-      setUncontrolledExpandedRowKeys(expandable?.expandedRowKeys ?? []);
-    }
-  }, [isExpandControlled, expandable?.expandedRowKeys]);
-  const [fixedOverrides, setFixedOverrides] = useState({});
-  const displayColumns = useMemo(() => {
-    const mapped = columns.map((column) => {
-      const hasOverride = Object.prototype.hasOwnProperty.call(fixedOverrides, column.key);
-      return {
-        ...column,
-        fixed: hasOverride ? fixedOverrides[column.key] : column.fixed
-      };
-    });
-    return orderTableFixedColumns(filterHiddenColumns(mapped, effectiveHiddenColumnKeys));
-  }, [columns, fixedOverrides, effectiveHiddenColumnKeys]);
-  const totalColumnCount = useMemo(() => {
-    let count = displayColumns.length;
-    if (hasTableSelectionColumn(rowSelection)) count++;
-    if (expandable) count++;
-    return count;
-  }, [displayColumns.length, rowSelection, expandable]);
-  const columnByKey = useMemo(() => {
-    const map = {};
-    for (const column of displayColumns) {
-      map[column.key] = column;
-    }
-    return map;
-  }, [displayColumns]);
-  const fixedColumnsInfo = useMemo(
-    () => getFixedColumnOffsets(displayColumns, measuredColumnWidths),
-    [displayColumns, measuredColumnWidths]
+  }
+  const view = useMemo(
+    () => resolveTableView({
+      columns,
+      dataSource: effectiveData,
+      hiddenColumnKeys: effectiveHiddenColumnKeys,
+      columnOrder: columnOrder ?? void 0,
+      fixedOverrides,
+      filters: filterState,
+      sort: sortState,
+      filterMode,
+      advancedFilterRules: advancedFilterRules ?? EMPTY_TABLE_FILTER_RULES,
+      groupBy,
+      pagination: paginationMerged,
+      currentPage,
+      currentPageSize,
+      rowKey,
+      getRowKey: rowSelection?.getRowKey,
+      rowSelection,
+      expandable,
+      selectedRowKeys,
+      measuredColumnWidths,
+      containerWidth
+    }),
+    [
+      columns,
+      effectiveData,
+      effectiveHiddenColumnKeys,
+      columnOrder,
+      fixedOverrides,
+      filterState,
+      sortState,
+      filterMode,
+      advancedFilterRules,
+      groupBy,
+      paginationMerged,
+      currentPage,
+      currentPageSize,
+      rowKey,
+      rowSelection,
+      expandable,
+      selectedRowKeys,
+      measuredColumnWidths,
+      containerWidth
+    ]
+  );
+  const selectedRowKeySet = useMemo(
+    () => new Set(selectedRowKeys),
+    [selectedRowKeys]
+  );
+  const expandedRowKeySet = useMemo(
+    () => new Set(expandedRowKeys),
+    [expandedRowKeys]
   );
   const [frozenColumnWidths, setFrozenColumnWidths] = useState({});
   useEffect(() => {
     setFrozenColumnWidths(
-      (prev) => freezeTableColumnWidths(displayColumns, measuredColumnWidths ?? {}, prev)
+      (prev) => freezeTableColumnWidths(view.displayColumns, measuredColumnWidths ?? {}, prev)
     );
-  }, [displayColumns, measuredColumnWidths]);
+  }, [view.displayColumns, measuredColumnWidths]);
+  function emitChange(next) {
+    onChange?.({
+      sort: next.sort ?? sortState,
+      filters: next.filters ?? filterState,
+      pagination: next.pagination !== void 0 ? next.pagination : paginationMerged !== false ? { current: currentPage, pageSize: currentPageSize } : null
+    });
+  }
   function handleSetHiddenColumns(hiddenKeys) {
     if (!isHiddenColumnsControlled) {
       setUncontrolledHiddenColumnKeys(hiddenKeys);
@@ -273,123 +262,73 @@ function useTableState(input) {
     onHiddenColumnKeysChange?.(hiddenKeys);
   }
   function toggleColumnLock(columnKey) {
-    setFixedOverrides((prev) => {
-      const original = columns.find((c) => c.key === columnKey)?.fixed;
-      const current = Object.prototype.hasOwnProperty.call(prev, columnKey) ? prev[columnKey] : original;
-      const isLocked = current === "left" || current === "right";
-      return {
-        ...prev,
-        [columnKey]: isLocked ? false : "left"
-      };
-    });
+    const original = columns.find((column) => column.key === columnKey)?.fixed;
+    const current = Object.prototype.hasOwnProperty.call(fixedOverrides, columnKey) ? fixedOverrides[columnKey] : original;
+    const nextFixed = getNextTableColumnFixed(current, original);
+    const nextOverrides = { ...fixedOverrides, [columnKey]: nextFixed };
+    setFixedOverrides(nextOverrides);
+    const fullColumns = applyTableColumnOrder(columns, columnOrder ?? void 0).map(
+      (column) => column.key === columnKey ? { ...column, fixed: nextFixed } : column
+    );
+    onColumnFixedChange?.(columnKey, nextFixed, fullColumns);
   }
-  const processedData = useMemo(() => {
-    let data = dataSource;
-    if (filterMode === "advanced" && advancedFilterRules.length > 0) {
-      data = filterDataAdvanced(data, advancedFilterRules);
-    } else {
-      data = filterTableData(data, columns, filterState);
-    }
-    if (sortState.key && sortState.direction) {
-      const column = columnByKey[sortState.key];
-      data = sortData(data, sortState.key, sortState.direction, column?.sortFn, columns);
-    }
-    return data;
-  }, [dataSource, columns, filterState, sortState, columnByKey, filterMode, advancedFilterRules]);
-  const paginatedData = useMemo(() => {
-    if (pagination === false) {
-      return processedData;
-    }
-    if (paginationConfig?.remote) {
-      return processedData;
-    }
-    return paginateData(processedData, currentPage, currentPageSize);
-  }, [processedData, currentPage, currentPageSize, pagination, paginationConfig?.remote]);
-  const pageRowKeys = useMemo(
-    () => createTableRowKeyCache(rowKey).getMany(paginatedData),
-    [paginatedData, rowKey]
-  );
-  const selectedRowKeySet = useMemo(
-    () => new Set(selectedRowKeys),
-    [selectedRowKeys]
-  );
-  const expandedRowKeySet = useMemo(
-    () => new Set(expandedRowKeys),
-    [expandedRowKeys]
-  );
-  const paginationInfo = useMemo(() => {
-    if (pagination === false) {
-      return null;
-    }
-    const total = paginationConfig?.total !== void 0 && paginationConfig.total > 0 ? paginationConfig.total : processedData.length;
-    return calculatePagination(total, currentPage, currentPageSize);
-  }, [processedData.length, currentPage, currentPageSize, pagination, paginationConfig?.total]);
   function handleSetSort(newSortState) {
     if (!isSortControlled) {
       setUncontrolledSortState(newSortState);
     }
     onSortChange?.(newSortState);
-    onChange?.({
-      sort: newSortState,
-      filters: filterState,
-      pagination: pagination !== false ? { current: currentPage, pageSize: currentPageSize } : null
-    });
+    emitChange({ sort: newSortState });
   }
   function handleSort(columnKey) {
-    const column = columnByKey[columnKey];
+    const column = view.displayColumns.find((item) => item.key === columnKey);
     if (!column || !column.sortable) return;
-    let newDirection = "asc";
-    if (sortState.key === columnKey) {
-      if (sortState.direction === "asc") {
-        newDirection = "desc";
-      } else if (sortState.direction === "desc") {
-        newDirection = null;
-      }
-    }
-    handleSetSort({
-      key: newDirection ? columnKey : null,
-      direction: newDirection
-    });
+    handleSetSort(getNextTableSortState(sortState, columnKey));
   }
   function handleFilter(columnKey, value) {
-    const newFilterState = { ...filterState, [columnKey]: value };
+    const newFilterState = mergeTableFilterValue(filterState, columnKey, value);
     if (!isFiltersControlled) {
       setUncontrolledFilterState(newFilterState);
     }
-    setUncontrolledCurrentPage(1);
+    if (!isCurrentPageControlled) {
+      setUncontrolledCurrentPage(1);
+    } else if (shouldWarnControlledPageReset(true, currentPage)) {
+      devWarn(
+        "Table.filter.page",
+        "Table filter reset pagination.current to 1; the controlled current page was not written back"
+      );
+    }
     onFilterChange?.(newFilterState);
-    onChange?.({
-      sort: sortState,
+    if (paginationMerged !== false) {
+      onPageChange?.({ current: 1, pageSize: currentPageSize });
+    }
+    emitChange({
       filters: newFilterState,
-      pagination: pagination !== false ? { current: 1, pageSize: currentPageSize } : null
+      pagination: paginationMerged !== false ? { current: 1, pageSize: currentPageSize } : null
     });
   }
   function handlePageChange(page) {
-    setUncontrolledCurrentPage(page);
+    if (!isCurrentPageControlled) {
+      setUncontrolledCurrentPage(page);
+    }
     onPageChange?.({ current: page, pageSize: currentPageSize });
-    onChange?.({
-      sort: sortState,
-      filters: filterState,
-      pagination: { current: page, pageSize: currentPageSize }
-    });
+    emitChange({ pagination: { current: page, pageSize: currentPageSize } });
   }
   function handlePageSizeChange(pageSize) {
-    setUncontrolledCurrentPageSize(pageSize);
-    setUncontrolledCurrentPage(1);
+    if (!isPageSizeControlled) {
+      setUncontrolledCurrentPageSize(pageSize);
+    }
+    if (!isCurrentPageControlled) {
+      setUncontrolledCurrentPage(1);
+    }
     onPageChange?.({ current: 1, pageSize });
-    onChange?.({
-      sort: sortState,
-      filters: filterState,
-      pagination: { current: 1, pageSize }
-    });
+    emitChange({ pagination: { current: 1, pageSize } });
   }
   function handleToggleExpand(key, record) {
-    const isExpanded = expandedRowKeySet.has(key);
-    const newKeys = isExpanded ? expandedRowKeys.filter((k) => k !== key) : [...expandedRowKeys, key];
-    if (!isExpandControlled) {
-      setUncontrolledExpandedRowKeys(newKeys);
+    const next = getNextTableExpandKeys(expandedRowKeys, key);
+    if (!expandControl.controlled) {
+      setUncontrolledExpandedRowKeys(next.keys);
     }
-    onExpandChange?.(newKeys, record, !isExpanded);
+    onExpandChange?.(next.keys, record, next.expanded);
   }
   function handleRowClick(record, index, key) {
     onRowClick?.(record, index);
@@ -401,43 +340,24 @@ function useTableState(input) {
     }
   }
   function handleSelectRow(key, checked) {
-    let newKeys;
-    if (rowSelection?.type === "radio") {
-      newKeys = checked ? [key] : [];
-    } else {
-      if (checked) {
-        newKeys = [...selectedRowKeys, key];
-      } else {
-        newKeys = selectedRowKeys.filter((k) => k !== key);
-      }
-    }
-    if (!isSelectionControlled) {
+    const newKeys = getNextTableSelectRowKeys({
+      selectedRowKeys,
+      key,
+      checked,
+      type: rowSelection?.type
+    });
+    if (!selectionControl.controlled) {
       setUncontrolledSelectedRowKeys(newKeys);
     }
     onSelectionChange?.(newKeys);
   }
-  const selectionState = useMemo(
-    () => getTableSelectionState({
-      records: paginatedData,
-      rowKeys: pageRowKeys,
-      selectedRowKeys,
-      getCheckboxProps: rowSelection?.getCheckboxProps
-    }),
-    [paginatedData, pageRowKeys, selectedRowKeys, rowSelection]
-  );
   function handleSelectAll(checked) {
-    const newKeys = getNextTableSelectAllKeys(
-      selectedRowKeys,
-      selectionState.selectableRowKeys,
-      checked
-    );
-    if (!isSelectionControlled) {
+    const newKeys = getNextTableSelectAllKeys(selectedRowKeys, view.selectableRowKeys, checked);
+    if (!selectionControl.controlled) {
       setUncontrolledSelectedRowKeys(newKeys);
     }
     onSelectionChange?.(newKeys);
   }
-  const allSelected = selectionState.allSelected;
-  const someSelected = selectionState.someSelected;
   const [editingCell, setEditingCell] = useState(
     null
   );
@@ -445,24 +365,26 @@ function useTableState(input) {
   function isCellEditable(columnKey, rowIndex) {
     if (!editable) return false;
     if (!editableCells) return true;
-    return !!editableCells.get(columnKey)?.has(rowIndex);
+    return editableCells[columnKey]?.includes(rowIndex) === true;
   }
   function startEditing(rowIndex, columnKey, currentValue) {
     setEditingCell({ rowIndex, columnKey });
     setEditingValue(String(currentValue ?? ""));
   }
   function commitEdit() {
-    if (editingCell) {
-      onCellChange?.(editingCell.rowIndex, editingCell.columnKey, editingValue);
-      setEditingCell(null);
-    }
+    if (!editingCell) return;
+    const column = columns.find((item) => item.key === editingCell.columnKey);
+    const nextData = commitTableCellEdit(effectiveData, editingCell.rowIndex, column, editingValue);
+    setInternalData(nextData);
+    onCellChange?.(editingCell.rowIndex, editingCell.columnKey, editingValue);
+    setEditingCell(null);
   }
   function cancelEdit() {
     setEditingCell(null);
   }
   function handleExport() {
-    const content = exportTableData(displayColumns, processedData, exportFormat);
-    downloadTableExport(content, exportFilename, exportFormat);
+    const content = exportTableData(view.displayColumns, view.processedData);
+    downloadTableExport(content, exportFilename);
     onExport?.(content);
   }
   const [dragColumnKey, setDragColumnKey] = useState(null);
@@ -471,14 +393,10 @@ function useTableState(input) {
   }
   function handleDrop(targetKey) {
     if (!dragColumnKey || dragColumnKey === targetKey) return;
-    const cols = [...displayColumns];
-    const fromIdx = cols.findIndex((c) => c.key === dragColumnKey);
-    const toIdx = cols.findIndex((c) => c.key === targetKey);
-    if (fromIdx >= 0 && toIdx >= 0) {
-      const [moved] = cols.splice(fromIdx, 1);
-      cols.splice(toIdx, 0, moved);
-      onColumnOrderChange?.(cols);
-    }
+    const fullColumns = applyTableColumnOrder(columns, columnOrder ?? void 0);
+    const nextColumns = reorderTableColumnsByKey(fullColumns, dragColumnKey, targetKey);
+    setColumnOrder(nextColumns.map((column) => column.key));
+    onColumnOrderChange?.(nextColumns);
     setDragColumnKey(null);
   }
   const [dragRowKey, setDragRowKey] = useState(null);
@@ -487,36 +405,34 @@ function useTableState(input) {
   }
   function handleRowDrop(targetKey) {
     if (dragRowKey === null || dragRowKey === targetKey) return;
-    const rows = [...paginatedData];
-    const fromIdx = pageRowKeys.findIndex((key) => key === dragRowKey);
-    const toIdx = pageRowKeys.findIndex((key) => key === targetKey);
-    if (fromIdx >= 0 && toIdx >= 0) {
-      const [moved] = rows.splice(fromIdx, 1);
-      rows.splice(toIdx, 0, moved);
-      onRowOrderChange?.(rows);
-    }
+    const nextRows = reorderTableRowsByKey(
+      effectiveData,
+      dragRowKey,
+      targetKey,
+      (record, sourceIndex) => resolveTableRecordKey(record, sourceIndex, rowKey, rowSelection?.getRowKey)
+    );
+    setInternalData(nextRows);
+    onRowOrderChange?.(nextRows);
     setDragRowKey(null);
   }
-  const groupedData = useMemo(() => {
-    if (!groupBy) return null;
-    return groupDataByColumn(paginatedData, groupBy);
-  }, [groupBy, paginatedData]);
   return {
-    paginationConfig,
-    displayColumns,
-    fixedColumnsInfo,
+    paginationConfig: view.paginationConfig ?? paginationConfig,
+    displayColumns: view.displayColumns,
+    fixedColumnsInfo: view.fixedColumnsInfo,
     frozenColumnWidths,
-    processedData,
-    paginatedData,
-    pageRowKeys,
+    processedData: view.processedData,
+    paginatedData: view.paginatedData,
+    pageRowKeys: view.pageRowKeys,
+    pageSourceIndices: view.pageSourceIndices,
     selectedRowKeySet,
     expandedRowKeySet,
-    totalColumnCount,
-    paginationInfo,
-    allSelected,
-    someSelected,
-    groupedData,
+    totalColumnCount: view.totalColumnCount,
+    paginationInfo: view.paginationInfo,
+    allSelected: view.allSelected,
+    someSelected: view.someSelected,
+    groupedData: view.groupedData,
     sortState,
+    filterState,
     currentPage,
     currentPageSize,
     hiddenColumnKeys: effectiveHiddenColumnKeys,
@@ -547,18 +463,78 @@ function useTableState(input) {
 }
 
 // src/components/Table/render-header.tsx
+import React from "react";
 import {
   classNames,
-  getTableHeaderClasses,
-  getTableHeaderCellClasses,
-  getTableFixedHeaderCellClasses,
-  getFixedColumnStyle,
+  formatTableFilterColumnAriaLabel,
+  formatTableSortByText,
   getCheckboxCellClasses,
   getExpandIconCellClasses,
-  formatTableSortByText,
+  getFixedColumnStyle,
+  getInputClasses,
+  getTableChromeSlots,
+  getTableFixedHeaderCellClasses,
+  getTableHeaderCellClasses,
+  getTableHeaderClasses,
+  hasTableSelectionColumn,
+  resolveTableExpandSlot,
   tableSortButtonClasses
 } from "@expcat/tigercat-core";
+
+// src/components/Table/icons.tsx
+import {
+  getSortIconClasses,
+  getExpandIconClasses,
+  icon16ViewBox,
+  icon24ViewBox,
+  sortAscIcon16PathD,
+  sortDescIcon16PathD,
+  sortBothIcon16PathD,
+  expandChevronIcon16PathD,
+  lockClosedIcon24PathD,
+  lockOpenIcon24PathD
+} from "@expcat/tigercat-core";
+import { jsx } from "react/jsx-runtime";
+var SortIcon = ({ direction }) => {
+  const active = direction !== null;
+  const pathD = direction === "asc" ? sortAscIcon16PathD : direction === "desc" ? sortDescIcon16PathD : sortBothIcon16PathD;
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: getSortIconClasses(active),
+      width: "16",
+      height: "16",
+      viewBox: icon16ViewBox,
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: pathD })
+    }
+  );
+};
+var LockIcon = ({ locked }) => {
+  return /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: icon24ViewBox, fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: locked ? lockClosedIcon24PathD : lockOpenIcon24PathD }) });
+};
+var ExpandIcon = ({ expanded }) => {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className: getExpandIconClasses(expanded),
+      width: "16",
+      height: "16",
+      viewBox: icon16ViewBox,
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: expandChevronIcon16PathD })
+    }
+  );
+};
+
+// src/components/Table/render-header.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+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, view) {
   const {
     size,
@@ -571,22 +547,26 @@ function renderTableHeader(ctx, view) {
     unlockColumnAriaLabel,
     labels
   } = view;
-  const expandHeaderTh = expandable ? /* @__PURE__ */ jsx2("th", { className: getExpandIconCellClasses(size), "aria-label": labels.expandText }) : null;
-  const expandAtStart = expandable?.expandIconPosition !== "end";
+  const chrome = getTableChromeSlots({
+    hasSelectionColumn: hasTableSelectionColumn(rowSelection),
+    expand: resolveTableExpandSlot(expandable)
+  });
+  const expandHeaderTh = /* @__PURE__ */ jsx2("th", { className: getExpandIconCellClasses(size), "aria-hidden": "true" });
+  const selectionHeaderTh = rowSelection?.type === "radio" ? /* @__PURE__ */ jsx2("th", { className: getCheckboxCellClasses(size), "aria-hidden": "true" }) : /* @__PURE__ */ jsx2("th", { className: getCheckboxCellClasses(size), children: /* @__PURE__ */ jsx2(
+    Checkbox,
+    {
+      size: "sm",
+      checked: ctx.allSelected,
+      indeterminate: ctx.someSelected,
+      "aria-label": labels.selectAllText,
+      onChange: (checked) => ctx.handleSelectAll(checked)
+    }
+  ) });
+  function renderChromeTh(slot) {
+    return slot === "expand" ? expandHeaderTh : selectionHeaderTh;
+  }
   return /* @__PURE__ */ jsx2("thead", { className: getTableHeaderClasses(stickyHeader), children: /* @__PURE__ */ jsxs("tr", { children: [
-    expandAtStart && expandHeaderTh,
-    rowSelection && rowSelection.showCheckbox !== false && rowSelection.type !== "radio" && /* @__PURE__ */ jsx2("th", { className: getCheckboxCellClasses(size), children: /* @__PURE__ */ jsx2(
-      "input",
-      {
-        type: "checkbox",
-        className: "rounded border-gray-300 text-[var(--tiger-primary,#2563eb)] focus:ring-[var(--tiger-primary,#2563eb)]",
-        checked: ctx.allSelected,
-        ref: (el) => {
-          if (el) el.indeterminate = ctx.someSelected;
-        },
-        onChange: (e) => ctx.handleSelectAll(e.target.checked)
-      }
-    ) }),
+    chrome.leading.map((slot) => /* @__PURE__ */ jsx2(React.Fragment, { children: renderChromeTh(slot) }, slot)),
     ctx.displayColumns.map((column) => {
       const isSorted = ctx.sortState.key === column.key;
       const sortDirection = isSorted ? ctx.sortState.direction : null;
@@ -597,9 +577,12 @@ function renderTableHeader(ctx, view) {
       } : void 0;
       const style = fixedStyle ? { ...widthStyle, ...fixedStyle } : widthStyle;
       const titleNode = column.renderHeader ? column.renderHeader() : column.title;
+      const filterValue = ctx.filterState[column.key];
+      const filterText = filterValue == null ? "" : String(filterValue);
       return /* @__PURE__ */ jsxs(
         "th",
         {
+          scope: "col",
           "data-tiger-table-column-key": column.key,
           "aria-sort": ariaSort,
           className: classNames(
@@ -618,6 +601,10 @@ function renderTableHeader(ctx, view) {
           ),
           style,
           draggable: columnDraggable ? true : void 0,
+          onClick: column.sortable ? (event) => {
+            if (isHeaderSortClickTarget(event.target)) return;
+            ctx.handleSort(column.key);
+          } : void 0,
           onDragStart: columnDraggable ? () => ctx.handleDragStart(column.key) : void 0,
           onDragOver: columnDraggable ? (e) => e.preventDefault() : void 0,
           onDrop: columnDraggable ? () => ctx.handleDrop(column.key) : void 0,
@@ -629,7 +616,11 @@ function renderTableHeader(ctx, view) {
                   type: "button",
                   "data-tiger-table-sort": "",
                   className: tableSortButtonClasses,
-                  onClick: () => ctx.handleSort(column.key),
+                  "aria-label": formatTableSortByText(labels.sortByText, String(column.title)),
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    ctx.handleSort(column.key);
+                  },
                   children: [
                     titleNode,
                     /* @__PURE__ */ jsx2(SortIcon, { direction: sortDirection })
@@ -646,7 +637,7 @@ function renderTableHeader(ctx, view) {
                   ),
                   className: 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)]"
                   ),
                   onClick: (e) => {
                     e.stopPropagation();
@@ -656,38 +647,60 @@ function renderTableHeader(ctx, view) {
                 }
               )
             ] }),
-            column.filter && /* @__PURE__ */ jsx2("div", { className: "mt-2", children: column.filter.type === "select" && column.filter.options ? /* @__PURE__ */ jsxs(
-              "select",
+            column.filter && /* @__PURE__ */ jsx2(
+              "div",
               {
-                className: "w-full px-2 py-1 text-sm border border-gray-300 rounded",
-                onChange: (e) => ctx.handleFilter(column.key, e.target.value),
+                className: "mt-2",
+                "data-tiger-table-filter": "",
+                draggable: false,
                 onClick: (e) => e.stopPropagation(),
-                children: [
-                  /* @__PURE__ */ jsx2("option", { value: "", children: labels.allText }),
-                  column.filter.options.map((opt) => /* @__PURE__ */ jsx2("option", { value: opt.value, children: opt.label }, opt.value))
-                ]
-              }
-            ) : /* @__PURE__ */ jsx2(
-              "input",
-              {
-                type: "text",
-                className: "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()
+                onDragStart: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                },
+                children: column.filter.type === "select" && column.filter.options ? /* @__PURE__ */ jsxs(
+                  "select",
+                  {
+                    className: getInputClasses({ size: "sm" }),
+                    "aria-label": formatTableFilterColumnAriaLabel(
+                      labels.filterColumnAriaLabel,
+                      String(column.title)
+                    ),
+                    value: filterText,
+                    draggable: false,
+                    onChange: (e) => ctx.handleFilter(column.key, e.target.value),
+                    children: [
+                      /* @__PURE__ */ jsx2("option", { value: "", children: labels.allText }),
+                      column.filter.options.map((opt) => /* @__PURE__ */ jsx2("option", { value: opt.value, children: opt.label }, String(opt.value)))
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsx2(
+                  Input,
+                  {
+                    size: "sm",
+                    value: filterText,
+                    "aria-label": formatTableFilterColumnAriaLabel(
+                      labels.filterColumnAriaLabel,
+                      String(column.title)
+                    ),
+                    placeholder: column.filter.placeholder || labels.filterPlaceholder,
+                    draggable: false,
+                    onChange: (e) => ctx.handleFilter(column.key, e.target.value)
+                  }
+                )
               }
-            ) })
+            )
           ]
         },
         column.key
       );
     }),
-    !expandAtStart && expandHeaderTh
+    chrome.trailing.map((slot) => /* @__PURE__ */ jsx2(React.Fragment, { children: renderChromeTh(slot) }, slot))
   ] }) });
 }
 
 // src/components/Table/render-body.tsx
-import React from "react";
+import React2 from "react";
 import {
   classNames as classNames2,
   isActivationKey,
@@ -703,7 +716,13 @@ import {
   getEditableCellClasses,
   editableCellInputClasses,
   tableGroupHeaderClasses,
-  getGroupHeaderCellClasses
+  getGroupHeaderCellClasses,
+  getTableChromeSlots as getTableChromeSlots2,
+  hasTableSelectionColumn as hasTableSelectionColumn2,
+  resolveTableExpandSlot as resolveTableExpandSlot2,
+  formatTableSelectRowAriaLabel,
+  formatTableGroupHeaderText,
+  tableVirtualSpacerCellClasses
 } from "@expcat/tigercat-core";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function renderTableBody(ctx, view) {
@@ -719,8 +738,14 @@ function renderTableBody(ctx, view) {
     rowClassName,
     rowDraggable,
     interactiveRows,
-    virtualWindow
+    virtualWindow,
+    selectionName
   } = view;
+  const hasRowControls = hasTableSelectionColumn2(rowSelection) || Boolean(expandable);
+  const chrome = getTableChromeSlots2({
+    hasSelectionColumn: hasTableSelectionColumn2(rowSelection),
+    expand: resolveTableExpandSlot2(expandable)
+  });
   if (loading) {
     return null;
   }
@@ -732,12 +757,14 @@ function renderTableBody(ctx, view) {
       "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[index];
-    const key = ctx.pageRowKeys[index];
+    const sourceIndex = Number(row.dataset.tigerTableRowIndex);
+    if (!Number.isInteger(sourceIndex)) return null;
+    const pageIndex = ctx.pageSourceIndices.indexOf(sourceIndex);
+    if (pageIndex < 0) return null;
+    const record = ctx.paginatedData[pageIndex];
+    const key = ctx.pageRowKeys[pageIndex];
     if (!record || key === void 0) return null;
-    return { key, record, index };
+    return { key, record, index: sourceIndex };
   }
   function handleBodyClick(event) {
     const row = getDelegatedRow(event);
@@ -761,12 +788,13 @@ function renderTableBody(ctx, view) {
     ctx.handleRowDrop(row.key);
   }
   function renderDataRow(record, index) {
+    const sourceIndex = ctx.pageSourceIndices[index] ?? index;
     const key = ctx.pageRowKeys[index];
     const isSelected = ctx.selectedRowKeySet.has(key);
     const isExpanded = ctx.expandedRowKeySet.has(key);
     const isRowExpandable = expandable ? expandable.rowExpandable ? expandable.rowExpandable(record) : true : false;
-    const rowClass = typeof rowClassName === "function" ? rowClassName(record, index) : rowClassName;
-    const expandToggleCell = expandable ? /* @__PURE__ */ jsx3("td", { className: getExpandIconCellClasses2(size), children: isRowExpandable && /* @__PURE__ */ jsx3(
+    const rowClass = typeof rowClassName === "function" ? rowClassName(record, sourceIndex) : rowClassName;
+    const expandToggleCell = /* @__PURE__ */ jsx3("td", { className: getExpandIconCellClasses2(size), children: isRowExpandable && /* @__PURE__ */ jsx3(
       "button",
       {
         type: "button",
@@ -779,39 +807,53 @@ function renderTableBody(ctx, view) {
         },
         children: /* @__PURE__ */ jsx3(ExpandIcon, { expanded: isExpanded })
       }
-    ) }) : null;
-    const expandAtStart = expandable?.expandIconPosition !== "end";
+    ) });
+    const selectionCell = /* @__PURE__ */ jsx3("td", { className: getCheckboxCellClasses2(size), onClick: (e) => e.stopPropagation(), children: rowSelection?.type === "radio" ? /* @__PURE__ */ jsx3(
+      Radio,
+      {
+        size: "sm",
+        name: selectionName,
+        value: key,
+        checked: isSelected,
+        disabled: rowSelection?.getCheckboxProps?.(record)?.disabled,
+        "aria-label": formatTableSelectRowAriaLabel(labels.selectRowAriaLabel, sourceIndex + 1),
+        onChange: (checked) => {
+          if (checked) ctx.handleSelectRow(key, true);
+        }
+      }
+    ) : /* @__PURE__ */ jsx3(
+      Checkbox,
+      {
+        size: "sm",
+        checked: isSelected,
+        disabled: rowSelection?.getCheckboxProps?.(record)?.disabled,
+        "aria-label": formatTableSelectRowAriaLabel(labels.selectRowAriaLabel, sourceIndex + 1),
+        onChange: (checked) => ctx.handleSelectRow(key, checked)
+      }
+    ) });
+    function renderChromeTd(slot) {
+      return slot === "expand" ? expandToggleCell : selectionCell;
+    }
     const rowNode = /* @__PURE__ */ jsxs2(
       "tr",
       {
-        "data-tiger-table-row-index": index,
+        "data-tiger-table-row-index": sourceIndex,
         className: classNames2(
           getTableRowClasses(hoverable, striped, index % 2 === 0, rowClass),
           ctx.fixedColumnsInfo.hasFixedColumns && "group"
         ),
         "aria-selected": rowSelection ? isSelected : void 0,
-        tabIndex: interactiveRows ? 0 : void 0,
-        onKeyDown: interactiveRows ? (e) => {
+        tabIndex: interactiveRows && !hasRowControls ? 0 : void 0,
+        onKeyDown: 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: rowDraggable ? true : void 0,
         children: [
-          expandAtStart && expandToggleCell,
-          rowSelection && rowSelection.showCheckbox !== false && /* @__PURE__ */ jsx3("td", { className: getCheckboxCellClasses2(size), children: /* @__PURE__ */ jsx3(
-            "input",
-            {
-              type: rowSelection?.type === "radio" ? "radio" : "checkbox",
-              className: 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: rowSelection?.getCheckboxProps?.(record)?.disabled,
-              onChange: (e) => ctx.handleSelectRow(key, e.target.checked),
-              onClick: (e) => e.stopPropagation()
-            }
-          ) }),
+          chrome.leading.map((slot) => /* @__PURE__ */ jsx3(React2.Fragment, { children: renderChromeTd(slot) }, slot)),
           ctx.displayColumns.map((column) => {
             const dataKey = column.dataKey || column.key;
             const cellValue = record[dataKey];
@@ -824,15 +866,15 @@ function renderTableBody(ctx, view) {
               view: "table",
               column,
               record,
-              rowIndex: index,
+              rowIndex: sourceIndex,
               striped,
               stripedActive: striped && index % 2 === 0,
               selected: isSelected,
               hoverable,
               fixedInfo: ctx.fixedColumnsInfo
             });
-            const isEditing = ctx.editingCell?.rowIndex === index && ctx.editingCell?.columnKey === column.key;
-            const cellEditable = ctx.isCellEditable(column.key, index);
+            const isEditing = ctx.editingCell?.rowIndex === sourceIndex && ctx.editingCell?.columnKey === column.key;
+            const cellEditable = ctx.isCellEditable(column.key, sourceIndex);
             return /* @__PURE__ */ jsx3(
               "td",
               {
@@ -842,7 +884,7 @@ function renderTableBody(ctx, view) {
                   cellEditable && getEditableCellClasses(!!isEditing)
                 ),
                 style,
-                onDoubleClick: cellEditable ? () => ctx.startEditing(index, column.key, cellValue) : void 0,
+                onDoubleClick: cellEditable ? () => ctx.startEditing(sourceIndex, column.key, cellValue) : void 0,
                 children: isEditing ? /* @__PURE__ */ jsx3(
                   "input",
                   {
@@ -856,19 +898,19 @@ function renderTableBody(ctx, view) {
                     },
                     autoFocus: true
                   }
-                ) : column.render ? column.render(record, index) : cellValue
+                ) : column.render ? column.render(record, sourceIndex) : cellValue
               },
               column.key
             );
           }),
-          !expandAtStart && expandToggleCell
+          chrome.trailing.map((slot) => /* @__PURE__ */ jsx3(React2.Fragment, { children: renderChromeTd(slot) }, slot))
         ]
       },
       key
     );
     if (expandable && isExpanded && isRowExpandable) {
-      const expandedContent = expandable.expandedRowRender ? expandable.expandedRowRender(record, index) : null;
-      return /* @__PURE__ */ jsxs2(React.Fragment, { children: [
+      const expandedContent = expandable.expandedRowRender ? expandable.expandedRowRender(record, sourceIndex) : null;
+      return /* @__PURE__ */ jsxs2(React2.Fragment, { children: [
         rowNode,
         /* @__PURE__ */ jsx3("tr", { className: getExpandedRowClasses(), children: /* @__PURE__ */ jsx3("td", { colSpan: ctx.totalColumnCount, className: getExpandedRowContentClasses(size), children: expandedContent }) }, `${key}-expanded`)
       ] }, key);
@@ -883,13 +925,8 @@ function renderTableBody(ctx, view) {
         onDragStart: rowDraggable ? handleBodyDragStart : void 0,
         onDragOver: rowDraggable ? handleBodyDragOver : void 0,
         onDrop: rowDraggable ? handleBodyDrop : void 0,
-        children: Array.from(ctx.groupedData.entries()).map(([groupKey, groupItems]) => /* @__PURE__ */ jsxs2(React.Fragment, { children: [
-          /* @__PURE__ */ jsx3("tr", { className: tableGroupHeaderClasses, children: /* @__PURE__ */ jsxs2("td", { colSpan: ctx.totalColumnCount, className: getGroupHeaderCellClasses(size), children: [
-            groupKey,
-            " (",
-            groupItems.length,
-            ")"
-          ] }) }),
+        children: Array.from(ctx.groupedData.entries()).map(([groupKey, groupItems]) => /* @__PURE__ */ jsxs2(React2.Fragment, { children: [
+          /* @__PURE__ */ jsx3("tr", { className: tableGroupHeaderClasses, children: /* @__PURE__ */ jsx3("td", { colSpan: ctx.totalColumnCount, className: getGroupHeaderCellClasses(size), children: formatTableGroupHeaderText(labels.groupHeaderText, groupKey, groupItems.length) }) }),
           groupItems.map((record, idx) => {
             const globalIndex = ctx.paginatedData.indexOf(record);
             return renderDataRow(record, globalIndex >= 0 ? globalIndex : idx);
@@ -898,20 +935,36 @@ function renderTableBody(ctx, view) {
       }
     );
   }
-  if (virtualWindow && virtualWindow.endIndex >= virtualWindow.startIndex) {
+  if (virtualWindow) {
     const { startIndex, endIndex, topPad, bottomPad } = virtualWindow;
     const windowed = [];
     if (topPad > 0) {
       windowed.push(
-        /* @__PURE__ */ jsx3("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx3("td", { colSpan: ctx.totalColumnCount, style: { height: `${topPad}px`, padding: 0 } }) }, "virtual-top")
+        /* @__PURE__ */ jsx3("tr", { "data-tiger-table-virtual-spacer": "", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(
+          "td",
+          {
+            colSpan: ctx.totalColumnCount,
+            className: tableVirtualSpacerCellClasses,
+            style: { height: `${topPad}px` }
+          }
+        ) }, "virtual-top")
       );
     }
     for (let index = startIndex; index <= endIndex; index++) {
-      windowed.push(renderDataRow(ctx.paginatedData[index], index));
+      const record = ctx.paginatedData[index];
+      if (record === void 0) continue;
+      windowed.push(renderDataRow(record, index));
     }
     if (bottomPad > 0) {
       windowed.push(
-        /* @__PURE__ */ jsx3("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx3("td", { colSpan: ctx.totalColumnCount, style: { height: `${bottomPad}px`, padding: 0 } }) }, "virtual-bottom")
+        /* @__PURE__ */ jsx3("tr", { "data-tiger-table-virtual-spacer": "", "aria-hidden": "true", children: /* @__PURE__ */ jsx3(
+          "td",
+          {
+            colSpan: ctx.totalColumnCount,
+            className: tableVirtualSpacerCellClasses,
+            style: { height: `${bottomPad}px` }
+          }
+        ) }, "virtual-bottom")
       );
     }
     return /* @__PURE__ */ jsx3(
@@ -940,22 +993,36 @@ function renderTableBody(ctx, view) {
 // src/components/Table/render-summary.tsx
 import {
   getTableCellClasses as getTableCellClasses2,
+  getTableChromeSlots as getTableChromeSlots3,
+  hasTableSelectionColumn as hasTableSelectionColumn3,
+  resolveTableExpandSlot as resolveTableExpandSlot3,
   tableSummaryRowClasses
 } from "@expcat/tigercat-core";
 import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function renderSummaryRow(ctx, view) {
   const { size, rowSelection, expandable, summaryRow } = view;
   if (!summaryRow?.show) return null;
+  const chrome = getTableChromeSlots3({
+    hasSelectionColumn: hasTableSelectionColumn3(rowSelection),
+    expand: resolveTableExpandSlot3(expandable)
+  });
+  const emptyCell = (key) => /* @__PURE__ */ jsx4("td", { className: getTableCellClasses2(size, "left") }, key);
   return /* @__PURE__ */ jsx4("tfoot", { children: /* @__PURE__ */ jsxs3("tr", { className: tableSummaryRowClasses, children: [
-    rowSelection && rowSelection.showCheckbox !== false && /* @__PURE__ */ jsx4("td", { className: getTableCellClasses2(size, "left") }),
-    expandable && /* @__PURE__ */ jsx4("td", { className: getTableCellClasses2(size, "left") }),
-    ctx.displayColumns.map((column) => /* @__PURE__ */ jsx4("td", { className: getTableCellClasses2(size, column.align || "left"), children: summaryRow.data[column.dataKey || column.key] ?? "" }, column.key))
+    chrome.leading.map((slot) => emptyCell(slot)),
+    ctx.displayColumns.map((column) => /* @__PURE__ */ jsx4(
+      "td",
+      {
+        className: getTableCellClasses2(size, column.align || "left", column.className),
+        children: summaryRow.data[column.dataKey || column.key] ?? ""
+      },
+      column.key
+    )),
+    chrome.trailing.map((slot) => emptyCell(`end-${slot}`))
   ] }) });
 }
 
 // src/components/Table/render-pagination.tsx
 import {
-  formatPaginationPageIndicator,
   formatPaginationTotal,
   getBuiltInPaginationContainerClasses,
   getPaginationLabels,
@@ -964,18 +1031,17 @@ import {
 import { jsx as jsx5 } from "react/jsx-runtime";
 function renderPagination(ctx, view) {
   const { pagination } = view;
-  if (pagination === false || !ctx.paginationInfo) {
+  const paginationConfig = ctx.paginationConfig;
+  if (pagination === false || !ctx.paginationInfo || !paginationConfig) {
     return null;
   }
-  const { totalPages } = ctx.paginationInfo;
-  const paginationConfig = pagination;
-  const total = paginationConfig.total !== void 0 && paginationConfig.total > 0 ? paginationConfig.total : ctx.processedData.length;
+  const { totalPages, total } = ctx.paginationInfo;
   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;
@@ -1018,18 +1084,10 @@ function renderPagination(ctx, view) {
 
 // src/components/Table.tsx
 import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var DEFAULT_TABLE_PAGINATION = {
-  defaultCurrent: 1,
-  defaultPageSize: 10,
-  total: 0,
-  pageSizeOptions: [10, 20, 50, 100],
-  showSizeChanger: true,
-  showTotal: true
-};
 function Table({
   columns,
   columnLockable = false,
-  dataSource = [],
+  dataSource,
   hiddenColumnKeys,
   defaultHiddenColumnKeys,
   sort,
@@ -1044,7 +1102,7 @@ function Table({
   locale,
   labels,
   emptyText,
-  pagination = DEFAULT_TABLE_PAGINATION,
+  pagination,
   rowSelection,
   expandable,
   rowKey = "id",
@@ -1062,14 +1120,14 @@ function Table({
   cardFieldGap = "gap-3",
   // v0.6.0 props
   virtual = false,
-  autoVirtual = true,
+  autoVirtual = false,
   virtualHeight = 400,
   virtualItemHeight = 40,
   virtualThreshold = 1e3,
   editable = false,
   editableCells,
   filterMode = "basic",
-  advancedFilterRules = [],
+  advancedFilterRules,
   columnDraggable = false,
   rowDraggable = false,
   summaryRow,
@@ -1087,16 +1145,20 @@ function Table({
   onExpandChange,
   onCellChange,
   onColumnOrderChange,
+  onColumnFixedChange,
   onRowOrderChange,
   onExport,
   className,
   ...props
 }) {
   const config = useTigerConfig();
-  const wrapperRef = useRef(null);
-  const tableRef = useRef(null);
+  const wrapperRef = useRef2(null);
+  const tableRef = useRef2(null);
   const [measuredColumnWidths, setMeasuredColumnWidths] = useState2({});
-  const [measuredRowHeights, setMeasuredRowHeights] = useState2([]);
+  const [measuredRowHeights, setMeasuredRowHeights] = useState2({});
+  const [measuredContainerSize, setMeasuredContainerSize] = useState2({ width: 0, height: 0 });
+  const [isCardViewport, setIsCardViewport] = useState2(false);
+  const selectionGroupName = useId();
   const internalRowSelection = rowSelection;
   const internalExpandable = expandable;
   const internalRowClassName = rowClassName;
@@ -1180,6 +1242,7 @@ function Table({
     exportFormat,
     exportFilename,
     measuredColumnWidths,
+    containerWidth: measuredContainerSize.width,
     onChange,
     onRowClick,
     onSelectionChange,
@@ -1190,6 +1253,7 @@ function Table({
     onExpandChange,
     onCellChange,
     onColumnOrderChange,
+    onColumnFixedChange,
     onRowOrderChange,
     onExport
   });
@@ -1209,22 +1273,41 @@ function Table({
     () => getTableVirtualRecommendation({
       virtual,
       autoVirtual,
-      dataLength: dataSource.length,
+      dataLength: ctx.processedData.length,
       threshold: virtualThreshold
     }),
-    [autoVirtual, dataSource.length, virtual, virtualThreshold]
+    [autoVirtual, ctx.processedData.length, virtual, virtualThreshold]
   );
-  const effectiveVirtual = virtualRecommendation.enabled;
+  const virtualAllowed = canUseTableVirtualWindow({ expandable: internalExpandable, groupBy });
+  const effectiveVirtual = virtualRecommendation.enabled && virtualAllowed;
+  const showCardTree = responsiveMode === "card" && isCardViewport;
+  const showTableTree = !showCardTree;
+  useEffect2(() => {
+    if (responsiveMode !== "card") {
+      setIsCardViewport(false);
+      return void 0;
+    }
+    return subscribeTableCardViewport(cardBreakpoint, setIsCardViewport);
+  }, [responsiveMode, cardBreakpoint]);
   const shouldObserveGeometry = effectiveVirtual || columnLockable || ctx.displayColumns.some((column) => column.fixed === "left" || column.fixed === "right");
   const [virtualScrollTop, setVirtualScrollTop] = useState2(0);
+  const measuredItemHeight = Object.values(measuredRowHeights)[0];
   const virtualWindow = useMemo2(
     () => effectiveVirtual ? getTableVirtualWindow(
       virtualScrollTop,
-      typeof virtualHeight === "number" ? virtualHeight : 400,
-      virtualItemHeight,
+      measuredContainerSize.height > 0 ? measuredContainerSize.height : typeof virtualHeight === "number" ? virtualHeight : 400,
+      measuredItemHeight > 0 ? measuredItemHeight : virtualItemHeight,
       ctx.paginatedData.length
     ) : void 0,
-    [effectiveVirtual, virtualScrollTop, virtualHeight, virtualItemHeight, ctx.paginatedData.length]
+    [
+      effectiveVirtual,
+      virtualScrollTop,
+      virtualHeight,
+      virtualItemHeight,
+      ctx.paginatedData.length,
+      measuredContainerSize.height,
+      measuredItemHeight
+    ]
   );
   const wrapperStyle = useMemo2(() => {
     return maxHeight ? {
@@ -1245,7 +1328,10 @@ function Table({
           (prev) => areNumberRecordsEqual(prev, snapshot.columnWidths) ? prev : snapshot.columnWidths
         );
         setMeasuredRowHeights(
-          (prev) => areNumberArraysEqual(prev, snapshot.rowHeights) ? prev : snapshot.rowHeights
+          (prev) => areNumberRecordsEqual(prev, snapshot.rowHeights) ? prev : snapshot.rowHeights
+        );
+        setMeasuredContainerSize(
+          (prev) => prev.width === snapshot.containerWidth && prev.height === snapshot.containerHeight ? prev : { width: snapshot.containerWidth, height: snapshot.containerHeight }
         );
       }
     });
@@ -1258,7 +1344,7 @@ function Table({
       ref: tableRef,
       className: classNames3(
         tableBaseClasses,
-        getTableResponsiveTableClasses(responsiveMode, cardBreakpoint),
+        responsiveMode === "scroll" ? getTableResponsiveTableClasses(responsiveMode, cardBreakpoint) : void 0,
         tableLayout === "fixed" ? "table-fixed" : "table-auto",
         className
       ),
@@ -1272,8 +1358,8 @@ function Table({
           columns: ctx.displayColumns,
           frozenWidths: ctx.frozenColumnWidths,
           size,
-          hasSelectionColumn: !!internalRowSelection && internalRowSelection.showCheckbox !== false,
-          expand: internalExpandable ? internalExpandable.expandIconPosition === "end" ? "end" : "start" : false
+          hasSelectionColumn: hasTableSelectionColumn4(internalRowSelection),
+          expand: resolveTableExpandSlot4(internalExpandable)
         }).map((entry, index) => /* @__PURE__ */ jsx6(
           "col",
           {
@@ -1290,7 +1376,8 @@ function Table({
           columnDraggable,
           lockColumnAriaLabel: tableLabels.lockColumnAriaLabel,
           unlockColumnAriaLabel: tableLabels.unlockColumnAriaLabel,
-          labels: tableLabels
+          labels: tableLabels,
+          selectionName: selectionGroupName
         }),
         renderTableBody(ctx, {
           size,
@@ -1304,7 +1391,8 @@ function Table({
           rowClassName: internalRowClassName,
           rowDraggable,
           interactiveRows: !!onRowClick || !!internalRowSelection,
-          virtualWindow
+          virtualWindow,
+          selectionName: selectionGroupName
         }),
         renderSummaryRow(ctx, {
           size,
@@ -1315,47 +1403,52 @@ function Table({
       ]
     }
   );
-  const tableContent = effectiveVirtual ? /* @__PURE__ */ jsx6(
+  const virtualScrollerStyle = {
+    height: typeof virtualHeight === "number" ? `${virtualHeight}px` : virtualHeight,
+    overflow: "auto"
+  };
+  const tableContent = showTableTree && (effectiveVirtual ? /* @__PURE__ */ jsx6(
     "div",
     {
-      style: {
-        height: typeof virtualHeight === "number" ? `${virtualHeight}px` : virtualHeight,
-        overflow: "auto"
-      },
+      style: virtualScrollerStyle,
       onScroll: (e) => setVirtualScrollTop(e.target.scrollTop),
       children: tableInner
     }
-  ) : tableInner;
+  ) : tableInner);
   return /* @__PURE__ */ jsxs4(
     "div",
     {
       ref: wrapperRef,
-      className: getTableWrapperClasses(bordered, maxHeight),
+      className: getTableWrapperClasses(bordered, 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[0] || void 0,
+      "data-tiger-measured-row-height": measuredItemHeight || void 0,
+      "data-tiger-table-layout": showCardTree ? "card" : "table",
       "aria-busy": loading,
       children: [
-        exportable && /* @__PURE__ */ jsx6("div", { className: "mb-2 flex justify-end", children: /* @__PURE__ */ jsx6(
-          "button",
+        exportable && /* @__PURE__ */ jsx6("div", { className: tableExportBarClasses, children: /* @__PURE__ */ jsx6(
+          Button,
           {
             type: "button",
-            className: tableExportButtonClasses,
-            "aria-label": exportFormat === "excel" ? tableLabels.exportExcelAriaLabel : tableLabels.exportCsvAriaLabel,
+            variant: "secondary",
+            size: "sm",
+            "aria-label": tableLabels.exportCsvAriaLabel,
             onClick: ctx.handleExport,
-            children: exportFormat === "excel" ? tableLabels.exportExcelText : tableLabels.exportCsvText
+            children: tableLabels.exportCsvText
           }
         ) }),
         tableContent,
-        responsiveMode === "card" && /* @__PURE__ */ jsxs4(
+        showCardTree && /* @__PURE__ */ jsxs4(
           "div",
           {
-            className: getTableResponsiveCardListClasses(cardBreakpoint),
+            className: tableCardListVisibleClasses,
             "data-tiger-table-mobile": "card",
+            style: effectiveVirtual ? virtualScrollerStyle : void 0,
+            onScroll: effectiveVirtual ? (e) => setVirtualScrollTop(e.target.scrollTop) : void 0,
             children: [
-              internalRowSelection?.type !== "radio" && internalRowSelection?.showCheckbox !== false && internalRowSelection && ctx.paginatedData.length > 0 ? /* @__PURE__ */ jsx6("div", { className: "flex items-center justify-between rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] px-3 py-2", children: /* @__PURE__ */ jsx6(
+              internalRowSelection?.type !== "radio" && internalRowSelection?.showCheckbox !== false && internalRowSelection && !loading && ctx.paginatedData.length > 0 ? /* @__PURE__ */ jsx6("div", { className: "flex items-center justify-between rounded-[var(--tiger-radius-md,0.5rem)] border border-[var(--tiger-border,#e5e7eb)] bg-[var(--tiger-surface,#ffffff)] px-3 py-2", children: /* @__PURE__ */ jsx6(
                 Checkbox,
                 {
                   size: "sm",
@@ -1369,9 +1462,10 @@ function Table({
                 Select,
                 {
                   size: "sm",
-                  value: ctx.sortState.key && ctx.sortState.direction ? `${ctx.sortState.key}:${ctx.sortState.direction}` : "",
+                  "aria-label": tableLabels.sortMenuAriaLabel,
+                  value: getTableCardSortValue(ctx.sortState),
                   options: [
-                    { label: tableLabels.clearSortText, value: "" },
+                    { label: tableLabels.clearSortText, value: TABLE_CARD_SORT_NONE },
                     ...ctx.displayColumns.filter((column) => column.sortable).flatMap((column) => [
                       {
                         label: `${formatTableSortByText2(tableLabels.sortByText, column.title)} \u2191`,
@@ -1385,94 +1479,211 @@ function Table({
                   ],
                   clearable: false,
                   onChange: (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));
                   }
                 }
               ) }) : null,
-              ctx.paginatedData.length === 0 ? /* @__PURE__ */ jsx6("div", { className: getTableResponsiveCardClasses(cardPadding), children: /* @__PURE__ */ jsx6(Empty, { showImage: false, description: tableLabels.emptyText }) }) : ctx.paginatedData.map((record, index) => {
-                const key = ctx.pageRowKeys[index];
-                const isExpanded = ctx.expandedRowKeySet.has(key);
-                const isSelected = ctx.selectedRowKeySet.has(key);
-                const isRowExpandable = internalExpandable ? internalExpandable.rowExpandable ? internalExpandable.rowExpandable(record) : true : false;
-                const expandedContent = internalExpandable && isExpanded && isRowExpandable ? internalExpandable.expandedRowRender?.(record, index) : null;
-                const expandedNode = expandedContent;
-                const renderContext = {
-                  record,
-                  index,
-                  columns: ctx.displayColumns,
-                  selected: isSelected,
-                  expanded: isExpanded,
-                  toggleExpand: () => ctx.handleToggleExpand(key, record),
-                  selectRow: (checked) => ctx.handleSelectRow(key, checked)
-                };
-                const customCard = renderCard?.(renderContext);
-                const resolvedCardClassName = typeof cardClassName === "function" ? cardClassName(record, index) : cardClassName;
-                const controlsNode = internalRowSelection?.showCheckbox !== false && internalRowSelection || internalExpandable && isRowExpandable ? /* @__PURE__ */ jsxs4(Fragment, { children: [
-                  internalRowSelection && internalRowSelection.showCheckbox !== false && /* @__PURE__ */ jsx6("span", { onClick: (event) => event.stopPropagation(), children: internalRowSelection.type === "radio" ? /* @__PURE__ */ jsx6(
-                    Radio,
-                    {
-                      value: key,
-                      checked: isSelected,
-                      disabled: internalRowSelection.getCheckboxProps?.(record)?.disabled,
-                      "aria-label": formatTableSelectRowAriaLabel(
-                        tableLabels.selectRowAriaLabel,
-                        index + 1,
-                        tableLocale?.locale
-                      ),
-                      onChange: () => ctx.handleSelectRow(key, true)
-                    }
-                  ) : /* @__PURE__ */ jsx6(
-                    Checkbox,
+              loading ? null : ctx.paginatedData.length === 0 ? /* @__PURE__ */ jsx6("div", { className: getTableResponsiveCardClasses(cardPadding), children: /* @__PURE__ */ jsx6(Empty, { showImage: false, description: tableLabels.emptyText }) }) : /* @__PURE__ */ jsxs4(Fragment, { children: [
+                effectiveVirtual && virtualWindow && virtualWindow.topPad > 0 ? /* @__PURE__ */ jsx6("div", { "aria-hidden": "true", style: { height: `${virtualWindow.topPad}px` } }) : null,
+                ctx.paginatedData.slice(
+                  effectiveVirtual && virtualWindow ? virtualWindow.startIndex : 0,
+                  effectiveVirtual && virtualWindow ? virtualWindow.endIndex + 1 : ctx.paginatedData.length
+                ).map((record, offset) => {
+                  const index = (effectiveVirtual && virtualWindow ? virtualWindow.startIndex : 0) + offset;
+                  const sourceIndex = ctx.pageSourceIndices[index] ?? index;
+                  const key = ctx.pageRowKeys[index];
+                  const isExpanded = ctx.expandedRowKeySet.has(key);
+                  const isSelected = ctx.selectedRowKeySet.has(key);
+                  const isRowExpandable = internalExpandable ? internalExpandable.rowExpandable ? internalExpandable.rowExpandable(record) : true : false;
+                  const expandedContent = internalExpandable && isExpanded && isRowExpandable ? internalExpandable.expandedRowRender?.(record, sourceIndex) : null;
+                  const expandedNode = expandedContent;
+                  const renderContext = {
+                    record,
+                    index: sourceIndex,
+                    columns: ctx.displayColumns,
+                    selected: isSelected,
+                    expanded: isExpanded,
+                    toggleExpand: () => ctx.handleToggleExpand(key, record),
+                    selectRow: (checked) => ctx.handleSelectRow(key, checked)
+                  };
+                  const customCard = renderCard?.(renderContext);
+                  const resolvedCardClassName = typeof cardClassName === "function" ? cardClassName(record, sourceIndex) : cardClassName;
+                  const controlsNode = internalRowSelection?.showCheckbox !== false && internalRowSelection || internalExpandable && isRowExpandable ? /* @__PURE__ */ jsxs4(Fragment, { children: [
+                    internalRowSelection && internalRowSelection.showCheckbox !== false && /* @__PURE__ */ jsx6("span", { onClick: (event) => event.stopPropagation(), children: internalRowSelection.type === "radio" ? /* @__PURE__ */ jsx6(
+                      Radio,
+                      {
+                        name: selectionGroupName,
+                        value: key,
+                        checked: isSelected,
+                        disabled: internalRowSelection.getCheckboxProps?.(record)?.disabled,
+                        "aria-label": formatTableSelectRowAriaLabel2(
+                          tableLabels.selectRowAriaLabel,
+                          sourceIndex + 1,
+                          tableLocale?.locale
+                        ),
+                        onChange: () => ctx.handleSelectRow(key, true)
+                      }
+                    ) : /* @__PURE__ */ jsx6(
+                      Checkbox,
+                      {
+                        size: "sm",
+                        checked: isSelected,
+                        disabled: internalRowSelection.getCheckboxProps?.(record)?.disabled,
+                        "aria-label": formatTableSelectRowAriaLabel2(
+                          tableLabels.selectRowAriaLabel,
+                          sourceIndex + 1,
+                          tableLocale?.locale
+                        ),
+                        onChange: (checked) => ctx.handleSelectRow(key, checked)
+                      }
+                    ) }),
+                    internalExpandable && isRowExpandable && /* @__PURE__ */ jsx6(
+                      "button",
+                      {
+                        type: "button",
+                        className: "text-sm text-[var(--tiger-primary,#2563eb)]",
+                        "aria-expanded": isExpanded,
+                        onClick: (event) => {
+                          event.stopPropagation();
+                          ctx.handleToggleExpand(key, record);
+                        },
+                        children: isExpanded ? tableLabels.collapseText : tableLabels.expandText
+                      }
+                    )
+                  ] }) : null;
+                  const hasCardControls = Boolean(controlsNode);
+                  const cardInteractive = Boolean(onRowClick || internalRowSelection);
+                  return /* @__PURE__ */ jsx6(
+                    "div",
                     {
-                      size: "sm",
-                      checked: isSelected,
-                      disabled: internalRowSelection.getCheckboxProps?.(record)?.disabled,
-                      "aria-label": formatTableSelectRowAriaLabel(
-                        tableLabels.selectRowAriaLabel,
-                        index + 1,
-                        tableLocale?.locale
+                      className: classNames3(
+                        getTableResponsiveCardClasses(cardPadding),
+                        resolvedCardClassName
                       ),
-                      onChange: (checked) => ctx.handleSelectRow(key, checked)
-                    }
-                  ) }),
-                  internalExpandable && isRowExpandable && /* @__PURE__ */ jsx6(
-                    "button",
-                    {
-                      type: "button",
-                      className: "text-sm text-[var(--tiger-primary,#2563eb)]",
-                      "aria-expanded": isExpanded,
-                      onClick: (event) => {
-                        event.stopPropagation();
-                        ctx.handleToggleExpand(key, record);
-                      },
-                      children: isExpanded ? tableLabels.collapseText : tableLabels.expandText
-                    }
-                  )
-                ] }) : null;
-                return /* @__PURE__ */ jsx6(
-                  "div",
-                  {
-                    className: classNames3(
-                      getTableResponsiveCardClasses(cardPadding),
-                      resolvedCardClassName
-                    ),
-                    onClick: () => ctx.handleRowClick(record, index, key),
-                    children: customCard !== void 0 && customCard !== null ? customCard : /* @__PURE__ */ jsxs4(Fragment, { children: [
-                      (() => {
-                        const { titleColumn, bodyColumns } = getCardColumns(ctx.displayColumns);
-                        const renderCellContent = (column) => {
-                          const dataKey = column.dataKey || column.key;
-                          return column.render ? column.render(record, index) : record[dataKey];
-                        };
-                        if (hasCustomCardLayout) {
+                      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,
+                      children: customCard !== void 0 && customCard !== null ? customCard : /* @__PURE__ */ jsxs4(Fragment, { children: [
+                        (() => {
+                          const { titleColumn, bodyColumns } = getCardColumns(ctx.displayColumns);
+                          const renderCellContent = (column) => {
+                            const dataKey = column.dataKey || column.key;
+                            return column.render ? column.render(record, sourceIndex) : record[dataKey];
+                          };
+                          if (hasCustomCardLayout) {
+                            return /* @__PURE__ */ jsxs4(Fragment, { children: [
+                              titleColumn && /* @__PURE__ */ jsxs4(
+                                "div",
+                                {
+                                  className: classNames3(
+                                    tableResponsiveCardTitleClasses,
+                                    cardSelectionPosition === "title-inline" && controlsNode && "flex items-center gap-3"
+                                  ),
+                                  children: [
+                                    cardSelectionPosition === "title-inline" && controlsNode,
+                                    /* @__PURE__ */ jsx6("span", { className: "min-w-0 flex-1", children: renderCellContent(titleColumn) })
+                                  ]
+                                }
+                              ),
+                              (!titleColumn || cardSelectionPosition !== "title-inline") && controlsNode && /* @__PURE__ */ jsx6("div", { className: "mb-2 flex items-center gap-3", children: controlsNode }),
+                              /* @__PURE__ */ jsx6(
+                                "div",
+                                {
+                                  className: classNames3("grid grid-cols-12 mt-2", cardFieldGap),
+                                  children: bodyColumns.map((column) => {
+                                    const layoutItem = cardLayoutMap.get(column.key);
+                                    const gridInfo = getCardGridInfo(column, layoutItem);
+                                    if (gridInfo.hideLabel) {
+                                      return /* @__PURE__ */ jsx6(
+                                        "div",
+                                        {
+                                          className: classNames3(
+                                            gridInfo.className,
+                                            gridInfo.divider && "border-t border-[var(--tiger-border,#e5e7eb)] pt-3"
+                                          ),
+                                          children: renderCellContent(column)
+                                        },
+                                        column.key
+                                      );
+                                    }
+                                    if (gridInfo.labelPosition === "top") {
+                                      return /* @__PURE__ */ jsxs4(
+                                        "div",
+                                        {
+                                          className: classNames3(
+                                            gridInfo.className,
+                                            gridInfo.divider && "border-t border-[var(--tiger-border,#e5e7eb)] pt-3"
+                                          ),
+                                          children: [
+                                            /* @__PURE__ */ jsx6(
+                                              "div",
+                                              {
+                                                className: classNames3(
+                                                  "text-xs font-medium uppercase tracking-wider text-[var(--tiger-text-muted,#6b7280)] mb-1",
+                                                  gridInfo.labelClassName
+                                                ),
+                                                children: column.title
+                                              }
+                                            ),
+                                            /* @__PURE__ */ jsx6(
+                                              "div",
+                                              {
+                                                className: classNames3(
+                                                  "min-w-0 text-sm text-[var(--tiger-text,#111827)] break-words",
+                                                  gridInfo.valueClassName
+                                                ),
+                                                children: renderCellContent(column)
+                                              }
+                                            )
+                                          ]
+                                        },
+                                        column.key
+                                      );
+                                    }
+                                    return /* @__PURE__ */ jsxs4(
+                                      "div",
+                                      {
+                                        className: classNames3(
+                                          gridInfo.className,
+                                          "grid grid-cols-[auto_1fr] gap-2 items-baseline",
+                                          gridInfo.divider && "border-t border-[var(--tiger-border,#e5e7eb)] pt-3"
+                                        ),
+                                        children: [
+                                          /* @__PURE__ */ jsx6(
+                                            "div",
+                                            {
+                                              className: classNames3(
+                                                "text-xs font-medium uppercase tracking-wider text-[var(--tiger-text-muted,#6b7280)] shrink-0",
+                                                gridInfo.labelClassName
+                                              ),
+                                              children: column.title
+                                            }
+                                          ),
+                                          /* @__PURE__ */ jsx6(
+                                            "div",
+                                            {
+                                              className: classNames3(
+                                                "min-w-0 text-sm text-[var(--tiger-text,#111827)] break-words",
+                                                gridInfo.valueClassName
+                                              ),
+                                              children: renderCellContent(column)
+                                            }
+                                          )
+                                        ]
+                                      },
+                                      column.key
+                                    );
+                                  })
+                                }
+                              )
+                            ] });
+                          }
                           return /* @__PURE__ */ jsxs4(Fragment, { children: [
                             titleColumn && /* @__PURE__ */ jsxs4(
                               "div",
@@ -1488,119 +1699,20 @@ function Table({
                               }
                             ),
                             (!titleColumn || cardSelectionPosition !== "title-inline") && controlsNode && /* @__PURE__ */ jsx6("div", { className: "mb-2 flex items-center gap-3", children: controlsNode }),
-                            /* @__PURE__ */ jsx6("div", { className: classNames3("grid grid-cols-12 mt-2", cardFieldGap), children: bodyColumns.map((column) => {
-                              const layoutItem = cardLayoutMap.get(column.key);
-                              const gridInfo = getCardGridInfo(column, layoutItem);
-                              if (gridInfo.hideLabel) {
-                                return /* @__PURE__ */ jsx6(
-                                  "div",
-                                  {
-                                    className: classNames3(
-                                      gridInfo.className,
-                                      gridInfo.divider && "border-t border-[var(--tiger-border,#e5e7eb)] pt-3"
-                                    ),
-                                    children: renderCellContent(column)
-                                  },
-                                  column.key
-                                );
-                              }
-                              if (gridInfo.labelPosition === "top") {
-                                return /* @__PURE__ */ jsxs4(
-                                  "div",
-                                  {
-                                    className: classNames3(
-                                      gridInfo.className,
-                                      gridInfo.divider && "border-t border-[var(--tiger-border,#e5e7eb)] pt-3"
-                                    ),
-                                    children: [
-                                      /* @__PURE__ */ jsx6(
-                                        "div",
-                                        {
-                                          className: classNames3(
-                                            "text-xs font-medium uppercase tracking-wider text-[var(--tiger-text-muted,#6b7280)] mb-1",
-                                            gridInfo.labelClassName
-                                          ),
-                                          children: column.title
-                                        }
-                                      ),
-                                      /* @__PURE__ */ jsx6(
-                                        "div",
-                                        {
-                                          className: classNames3(
-                                            "min-w-0 text-sm text-[var(--tiger-text,#111827)] break-words",
-                                            gridInfo.valueClassName
-                                          ),
-                                          children: renderCellContent(column)
-                                        }
-                                      )
-                                    ]
-                                  },
-                                  column.key
-                                );
-                              }
-                              return /* @__PURE__ */ jsxs4(
-                                "div",
-                                {
-                                  className: classNames3(
-                                    gridInfo.className,
-                                    "grid grid-cols-[auto_1fr] gap-2 items-baseline",
-                                    gridInfo.divider && "border-t border-[var(--tiger-border,#e5e7eb)] pt-3"
-                                  ),
-                                  children: [
-                                    /* @__PURE__ */ jsx6(
-                                      "div",
-                                      {
-                                        className: classNames3(
-                                          "text-xs font-medium uppercase tracking-wider text-[var(--tiger-text-muted,#6b7280)] shrink-0",
-                                          gridInfo.labelClassName
-                                        ),
-                                        children: column.title
-                                      }
-                                    ),
-                                    /* @__PURE__ */ jsx6(
-                                      "div",
-                                      {
-                                        className: classNames3(
-                                          "min-w-0 text-sm text-[var(--tiger-text,#111827)] break-words",
-                                          gridInfo.valueClassName
-                                        ),
-                                        children: renderCellContent(column)
-                                      }
-                                    )
-                                  ]
-                                },
-                                column.key
-                              );
-                            }) })
+                            bodyColumns.map((column) => /* @__PURE__ */ jsxs4("div", { className: tableResponsiveCardRowClasses, children: [
+                              /* @__PURE__ */ jsx6("div", { className: tableResponsiveCardLabelClasses, children: column.title }),
+                              /* @__PURE__ */ jsx6("div", { className: tableResponsiveCardValueClasses, children: renderCellContent(column) })
+                            ] }, column.key))
                           ] });
-                        }
-                        return /* @__PURE__ */ jsxs4(Fragment, { children: [
-                          titleColumn && /* @__PURE__ */ jsxs4(
-                            "div",
-                            {
-                              className: classNames3(
-                                tableResponsiveCardTitleClasses,
-                                cardSelectionPosition === "title-inline" && controlsNode && "flex items-center gap-3"
-                              ),
-                              children: [
-                                cardSelectionPosition === "title-inline" && controlsNode,
-                                /* @__PURE__ */ jsx6("span", { className: "min-w-0 flex-1", children: renderCellContent(titleColumn) })
-                              ]
-                            }
-                          ),
-                          (!titleColumn || cardSelectionPosition !== "title-inline") && controlsNode && /* @__PURE__ */ jsx6("div", { className: "mb-2 flex items-center gap-3", children: controlsNode }),
-                          bodyColumns.map((column) => /* @__PURE__ */ jsxs4("div", { className: tableResponsiveCardRowClasses, children: [
-                            /* @__PURE__ */ jsx6("div", { className: tableResponsiveCardLabelClasses, children: column.title }),
-                            /* @__PURE__ */ jsx6("div", { className: tableResponsiveCardValueClasses, children: renderCellContent(column) })
-                          ] }, column.key))
-                        ] });
-                      })(),
-                      expandedNode && /* @__PURE__ */ jsx6("div", { className: "mt-3 border-t border-[var(--tiger-border,#e5e7eb)] pt-3", children: expandedNode })
-                    ] })
-                  },
-                  key
-                );
-              })
+                        })(),
+                        expandedNode && /* @__PURE__ */ jsx6("div", { className: "mt-3 border-t border-[var(--tiger-border,#e5e7eb)] pt-3", children: expandedNode })
+                      ] })
+                    },
+                    key
+                  );
+                }),
+                effectiveVirtual && virtualWindow && virtualWindow.bottomPad > 0 ? /* @__PURE__ */ jsx6("div", { "aria-hidden": "true", style: { height: `${virtualWindow.bottomPad}px` } }) : null
+              ] })
             ]
           }
         ),
@@ -1612,7 +1724,7 @@ function Table({
             "aria-live": "polite",
             "aria-label": tableLabels.loadingText,
             children: [
-              /* @__PURE__ */ jsx6(LoadingSpinner, {}),
+              /* @__PURE__ */ jsx6(Loading, { "aria-hidden": true, role: "presentation" }),
               /* @__PURE__ */ jsx6("span", { className: "sr-only", children: tableLabels.loadingText })
             ]
           }
@@ -1631,9 +1743,6 @@ 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 {
   Table