@hanwenbo/x-taro-ui 0.0.1

package/lib/components/table/table.js

@@ -0,0 +1,1983 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/table/table.tsx
+var table_exports = {};
+__export(table_exports, {
+  TableColumn: () => TableColumn,
+  TableColumnGroup: () => TableColumnGroup,
+  default: () => table_default
+});
+module.exports = __toCommonJS(table_exports);
+var import_react = __toESM(require("react"));
+var import_components = require("@tarojs/components");
+var import_theme = require("../../theme");
+var import_utils = require("../../utils");
+var import_checkbox = require("../checkbox");
+var import_configProvider = require("../configProvider");
+var import_dimensions = require("../dimensions");
+var import_icon = require("../icon");
+var import_pagination = require("../pagination");
+var import_radio = require("../radio");
+var sizeMetrics = {
+  mini: {
+    rowMinHeight: 32,
+    paddingX: 8,
+    paddingY: 6,
+    fontSize: 12,
+    lineHeight: 18,
+    iconSize: 14
+  },
+  small: {
+    rowMinHeight: 36,
+    paddingX: 12,
+    paddingY: 8,
+    fontSize: 14,
+    lineHeight: 20,
+    iconSize: 14
+  },
+  middle: {
+    rowMinHeight: 40,
+    paddingX: 16,
+    paddingY: 10,
+    fontSize: 14,
+    lineHeight: 20,
+    iconSize: 16
+  },
+  large: {
+    rowMinHeight: 48,
+    paddingX: 20,
+    paddingY: 14,
+    fontSize: 14,
+    lineHeight: 20,
+    iconSize: 18
+  }
+};
+function TableColumn(_props) {
+  return null;
+}
+TableColumn.displayName = "Table.Column";
+function TableColumnGroup(_props) {
+  return null;
+}
+TableColumnGroup.displayName = "Table.ColumnGroup";
+function renderNode(node, style) {
+  return typeof node === "string" || typeof node === "number" ? /* @__PURE__ */ import_react.default.createElement(import_components.Text, { style }, node) : node;
+}
+function toCssSize(value) {
+  return typeof value === "number" ? `${value}px` : value;
+}
+function getValueByDataIndex(record, dataIndex) {
+  if (dataIndex === void 0) return void 0;
+  const path = Array.isArray(dataIndex) ? dataIndex : String(dataIndex).split(".");
+  return path.reduce((current, part) => current == null ? void 0 : current[part], record);
+}
+function getColumnKey(column, index) {
+  if (column.key !== void 0) return String(column.key);
+  if (column.dataIndex !== void 0) {
+    return Array.isArray(column.dataIndex) ? column.dataIndex.map(String).join(".") : String(column.dataIndex);
+  }
+  return `column-${index}`;
+}
+function flattenColumns(columns) {
+  return columns.flatMap(
+    (column) => {
+      var _a;
+      return ((_a = column.children) == null ? void 0 : _a.length) ? flattenColumns(column.children) : [column];
+    }
+  );
+}
+function getActiveBreakpoints(viewportWidth) {
+  if (viewportWidth <= 0) {
+    return /* @__PURE__ */ new Set(["xs", "sm", "md", "lg", "xl", "xxl"]);
+  }
+  const active = /* @__PURE__ */ new Set();
+  if (viewportWidth < 576) active.add("xs");
+  if (viewportWidth >= 576) active.add("sm");
+  if (viewportWidth >= 768) active.add("md");
+  if (viewportWidth >= 992) active.add("lg");
+  if (viewportWidth >= 1200) active.add("xl");
+  if (viewportWidth >= 1600) active.add("xxl");
+  return active;
+}
+function filterVisibleColumnTree(columns, activeBreakpoints) {
+  return columns.flatMap((column) => {
+    var _a, _b;
+    if (column.hidden || ((_a = column.responsive) == null ? void 0 : _a.length) && !column.responsive.some((breakpoint) => activeBreakpoints.has(breakpoint))) {
+      return [];
+    }
+    if (!((_b = column.children) == null ? void 0 : _b.length)) return [column];
+    const children = filterVisibleColumnTree(column.children, activeBreakpoints);
+    return children.length ? [{ ...column, children }] : [];
+  });
+}
+function getColumnDepth(column) {
+  var _a;
+  return ((_a = column.children) == null ? void 0 : _a.length) ? 1 + Math.max(...column.children.map(getColumnDepth)) : 1;
+}
+function getHeaderBandCells(columns, targetDepth, currentDepth = 0) {
+  return columns.flatMap((column) => {
+    var _a, _b;
+    const leaves = flattenColumns([column]);
+    if (currentDepth === targetDepth) {
+      return [{ column, leaves, placeholder: !((_a = column.children) == null ? void 0 : _a.length) }];
+    }
+    return ((_b = column.children) == null ? void 0 : _b.length) ? getHeaderBandCells(column.children, targetDepth, currentDepth + 1) : [{ column, leaves, placeholder: true }];
+  });
+}
+function isActivationKey(event) {
+  const key = event == null ? void 0 : event.key;
+  return key === "Enter" || key === " " || key === "Spacebar";
+}
+function convertChildrenToColumns(children) {
+  const columns = [];
+  import_react.default.Children.forEach(children, (child) => {
+    if (!import_react.default.isValidElement(child)) return;
+    if (child.type === TableColumn) {
+      const { children: _children, ...columnProps } = child.props;
+      columns.push({
+        ...columnProps,
+        key: child.key ?? void 0
+      });
+      return;
+    }
+    if (child.type === TableColumnGroup) {
+      const props = child.props;
+      columns.push({
+        ...props,
+        key: child.key ?? void 0,
+        children: convertChildrenToColumns(props.children)
+      });
+    }
+  });
+  return columns;
+}
+function flattenFilterItems(items) {
+  return items.flatMap((item) => [item, ...item.children ? flattenFilterItems(item.children) : []]);
+}
+function resolveRowKey(record, index, rowKey) {
+  if (typeof rowKey === "function") return rowKey(record, index);
+  const dataIndex = rowKey === void 0 ? "key" : String(rowKey);
+  return getValueByDataIndex(record, dataIndex) ?? index;
+}
+function resolveSemanticValue(value, props) {
+  return typeof value === "function" ? value({ props }) : value;
+}
+function getSorterCompare(column) {
+  if (typeof (column == null ? void 0 : column.sorter) === "function") return column.sorter;
+  if ((column == null ? void 0 : column.sorter) && typeof column.sorter === "object") return column.sorter.compare;
+  return void 0;
+}
+function getSorterMultiple(column) {
+  return (column == null ? void 0 : column.sorter) && typeof column.sorter === "object" ? column.sorter.multiple : void 0;
+}
+function applyTransforms(data, columns, filters, sortState) {
+  const filtered = columns.reduce(
+    (current, column, index) => {
+      const values = filters[getColumnKey(column, index)];
+      if (!(values == null ? void 0 : values.length) || !column.onFilter) return current;
+      return current.filter((record) => values.some((value) => {
+        var _a;
+        return (_a = column.onFilter) == null ? void 0 : _a.call(column, value, record);
+      }));
+    },
+    [...data]
+  );
+  if (!sortState.length) return filtered;
+  return [...filtered].sort((a, b) => {
+    for (const state of sortState) {
+      const column = columns.find((item, index) => getColumnKey(item, index) === state.columnKey);
+      const compare = getSorterCompare(column);
+      if (!compare) continue;
+      const result = compare(a, b);
+      if (result !== 0) return state.order === "ascend" ? result : -result;
+    }
+    return 0;
+  });
+}
+function stopPropagation(event) {
+  var _a;
+  (_a = event == null ? void 0 : event.stopPropagation) == null ? void 0 : _a.call(event);
+}
+function isInteractiveEventTarget(event) {
+  var _a;
+  const target = event == null ? void 0 : event.target;
+  return Boolean((_a = target == null ? void 0 : target.closest) == null ? void 0 : _a.call(target, 'button,a,input,label,select,textarea,[role="button"]'));
+}
+function normalizeFixed(fixed) {
+  if (fixed === true || fixed === "start") return "left";
+  if (fixed === "end") return "right";
+  return fixed;
+}
+function InternalTable(props, ref) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const {
+    bordered = false,
+    children,
+    className,
+    classNames: semanticClassNamesProp,
+    columns: propColumns,
+    components,
+    dataSource = [],
+    defaultExpandedRowKeys = [],
+    defaultSelectedRowKeys = [],
+    emptyText,
+    expandable,
+    expandedRowRender,
+    footer,
+    loading = false,
+    locale,
+    onChange,
+    onHeaderRow,
+    onRow,
+    onScroll,
+    onSelectionChange,
+    pagination = {},
+    paginationVariant = "section",
+    rowClassName,
+    rowHoverable = true,
+    rowKey,
+    rowSelection,
+    scroll,
+    selectable = false,
+    selectedRowKeys: legacySelectedRowKeys,
+    showHeader = true,
+    showSorterTooltip = { target: "full-header" },
+    size: sizeProp,
+    sortDirections = ["ascend", "descend"],
+    sticky = false,
+    striped = false,
+    style,
+    styles: semanticStylesProp,
+    summary,
+    tableLayout = "auto",
+    testID,
+    title,
+    virtual = false
+  } = props;
+  const { theme } = (0, import_theme.useTheme)();
+  const providerSize = (0, import_configProvider.useSize)();
+  const providerDisabled = (0, import_configProvider.useDisabled)();
+  const { width: viewportWidth } = (0, import_dimensions.useWindowDimensions)();
+  const size = sizeProp ?? providerSize;
+  const disabled = Boolean(providerDisabled);
+  const metrics = sizeMetrics[size];
+  const rootRef = (0, import_react.useRef)(null);
+  const cellRenderCacheRef = (0, import_react.useRef)(
+    /* @__PURE__ */ new Map()
+  );
+  const selectionRecordCacheRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
+  const [scrollTop, setScrollTop] = (0, import_react.useState)(0);
+  const [scrollTarget, setScrollTarget] = (0, import_react.useState)("");
+  const [virtualScrollTop, setVirtualScrollTop] = (0, import_react.useState)(0);
+  const [horizontalScrollState, setHorizontalScrollState] = (0, import_react.useState)({
+    canScrollLeft: false,
+    canScrollRight: Boolean(scroll == null ? void 0 : scroll.x)
+  });
+  const [hoveredRowKey, setHoveredRowKey] = (0, import_react.useState)(null);
+  const [focusedControlKey, setFocusedControlKey] = (0, import_react.useState)(null);
+  const declaredColumns = (0, import_react.useMemo)(
+    () => (propColumns == null ? void 0 : propColumns.length) ? propColumns : convertChildrenToColumns(children),
+    [children, propColumns]
+  );
+  const activeBreakpoints = (0, import_react.useMemo)(() => getActiveBreakpoints(viewportWidth), [viewportWidth]);
+  const resolvedColumns = (0, import_react.useMemo)(
+    () => filterVisibleColumnTree(declaredColumns, activeBreakpoints),
+    [activeBreakpoints, declaredColumns]
+  );
+  const visibleColumns = (0, import_react.useMemo)(() => flattenColumns(resolvedColumns), [resolvedColumns]);
+  const headerDepth = (0, import_react.useMemo)(
+    () => Math.max(1, ...resolvedColumns.map(getColumnDepth)),
+    [resolvedColumns]
+  );
+  const semanticClassNames = resolveSemanticValue(semanticClassNamesProp, props) ?? {};
+  const semanticStyles = resolveSemanticValue(semanticStylesProp, props) ?? {};
+  const interactiveControlProps = (controlKey, onActivate, controlDisabled = disabled) => ({
+    tabIndex: controlDisabled ? -1 : 0,
+    "aria-disabled": controlDisabled,
+    "data-focused": focusedControlKey === controlKey ? "true" : "false",
+    onFocus: () => {
+      if (!controlDisabled) setFocusedControlKey(controlKey);
+    },
+    onBlur: () => setFocusedControlKey((current2) => current2 === controlKey ? null : current2),
+    onKeyDown: (event) => {
+      var _a2, _b2;
+      if (controlDisabled || !isActivationKey(event)) return;
+      const keyboardEvent = event;
+      (_a2 = keyboardEvent.preventDefault) == null ? void 0 : _a2.call(keyboardEvent);
+      (_b2 = keyboardEvent.stopPropagation) == null ? void 0 : _b2.call(keyboardEvent);
+      onActivate(event);
+    }
+  });
+  const interactiveFocusStyle = (controlKey) => focusedControlKey === controlKey ? { boxShadow: "0 0 0 2px var(--x-table-focus-ring)" } : void 0;
+  const controlledSortColumns = visibleColumns.filter((column) => column.sortOrder !== void 0);
+  const controlledSortState = controlledSortColumns.length ? controlledSortColumns.flatMap(
+    (column) => column.sortOrder ? [
+      {
+        columnKey: getColumnKey(column, visibleColumns.indexOf(column)),
+        order: column.sortOrder
+      }
+    ] : []
+  ) : void 0;
+  const [innerSortState, setInnerSortState] = (0, import_react.useState)(() => {
+    const defaults = visibleColumns.flatMap(
+      (column, index) => column.defaultSortOrder ? [{ columnKey: getColumnKey(column, index), order: column.defaultSortOrder }] : []
+    );
+    return defaults.sort((first, second) => {
+      const firstColumn = visibleColumns.find(
+        (column, index) => getColumnKey(column, index) === first.columnKey
+      );
+      const secondColumn = visibleColumns.find(
+        (column, index) => getColumnKey(column, index) === second.columnKey
+      );
+      return (getSorterMultiple(secondColumn) ?? 0) - (getSorterMultiple(firstColumn) ?? 0);
+    });
+  });
+  const sortState = controlledSortState ?? innerSortState;
+  const [innerFilters, setInnerFilters] = (0, import_react.useState)(
+    () => visibleColumns.reduce((current2, column, index) => {
+      var _a2;
+      if ((_a2 = column.defaultFilteredValue) == null ? void 0 : _a2.length) {
+        current2[getColumnKey(column, index)] = column.defaultFilteredValue;
+      }
+      return current2;
+    }, {})
+  );
+  const filtersForChange = (0, import_react.useMemo)(
+    () => visibleColumns.reduce((current2, column, index) => {
+      if (!column.filters && column.filteredValue === void 0) return current2;
+      const key = getColumnKey(column, index);
+      current2[key] = column.filteredValue !== void 0 ? column.filteredValue : innerFilters[key] ?? null;
+      return current2;
+    }, {}),
+    [innerFilters, visibleColumns]
+  );
+  const [openFilterKey, setOpenFilterKey] = (0, import_react.useState)(null);
+  const [draftFilters, setDraftFilters] = (0, import_react.useState)({});
+  const draftFiltersRef = (0, import_react.useRef)({});
+  draftFiltersRef.current = draftFilters;
+  const paginationConfig = pagination === false ? false : pagination;
+  const paginationEnabled = paginationConfig !== false;
+  const [innerCurrent, setInnerCurrent] = (0, import_react.useState)(
+    paginationEnabled ? paginationConfig.defaultCurrent ?? 1 : 1
+  );
+  const [innerPageSize, setInnerPageSize] = (0, import_react.useState)(
+    paginationEnabled ? paginationConfig.defaultPageSize ?? paginationConfig.pageSize ?? 10 : 10
+  );
+  const current = paginationEnabled ? paginationConfig.current ?? innerCurrent : 1;
+  const pageSize = paginationEnabled ? paginationConfig.pageSize ?? innerPageSize : dataSource.length || 1;
+  const transformedData = (0, import_react.useMemo)(
+    () => applyTransforms(dataSource, visibleColumns, filtersForChange, sortState),
+    [dataSource, filtersForChange, sortState, visibleColumns]
+  );
+  const isRemotePagination = paginationEnabled && paginationConfig.total !== void 0 && paginationConfig.total > transformedData.length;
+  const total = paginationEnabled ? paginationConfig.total ?? transformedData.length : transformedData.length;
+  const totalPages = Math.max(1, Math.ceil(Math.max(total, 1) / Math.max(pageSize, 1)));
+  const safeCurrent = Math.min(Math.max(current, 1), totalPages);
+  const currentPageData = (0, import_react.useMemo)(() => {
+    if (!paginationEnabled || isRemotePagination) return transformedData;
+    const start = (safeCurrent - 1) * pageSize;
+    return transformedData.slice(start, start + pageSize);
+  }, [isRemotePagination, pageSize, paginationEnabled, safeCurrent, transformedData]);
+  (0, import_react.useEffect)(() => {
+    if (paginationEnabled && paginationConfig.current === void 0 && safeCurrent !== innerCurrent) {
+      setInnerCurrent(safeCurrent);
+    }
+  }, [innerCurrent, paginationConfig, paginationEnabled, safeCurrent]);
+  const resolvedRowSelection = rowSelection ? rowSelection : selectable ? {
+    selectedRowKeys: legacySelectedRowKeys,
+    defaultSelectedRowKeys
+  } : void 0;
+  const selectionControlled = (resolvedRowSelection == null ? void 0 : resolvedRowSelection.selectedRowKeys) !== void 0;
+  const [innerSelectedKeys, setInnerSelectedKeys] = (0, import_react.useState)(
+    (resolvedRowSelection == null ? void 0 : resolvedRowSelection.defaultSelectedRowKeys) ?? defaultSelectedRowKeys
+  );
+  const selectedKeys = (resolvedRowSelection == null ? void 0 : resolvedRowSelection.selectedRowKeys) ?? innerSelectedKeys;
+  const selectedKeySet = (0, import_react.useMemo)(() => new Set(selectedKeys.map(String)), [selectedKeys]);
+  const resolvedExpandable = expandable ? expandable : expandedRowRender ? {
+    defaultExpandedRowKeys,
+    expandedRowRender: (record, index) => expandedRowRender(record, index)
+  } : void 0;
+  const childrenColumnName = (resolvedExpandable == null ? void 0 : resolvedExpandable.childrenColumnName) ?? "children";
+  const allRows = (0, import_react.useMemo)(() => {
+    const result = [];
+    const visit = (records, indent = 0, prefix = "") => {
+      records.forEach((record, index) => {
+        const absoluteIndex = result.length;
+        const key = resolveRowKey(record, absoluteIndex, rowKey);
+        result.push({ key, record, index: absoluteIndex, indent });
+        const nested = record[childrenColumnName];
+        if (Array.isArray(nested)) visit(nested, indent + 1, `${prefix}-${index}`);
+      });
+    };
+    visit(dataSource);
+    return result;
+  }, [childrenColumnName, dataSource, rowKey]);
+  const [innerExpandedKeys, setInnerExpandedKeys] = (0, import_react.useState)(() => {
+    if (resolvedExpandable == null ? void 0 : resolvedExpandable.defaultExpandAllRows) {
+      return allRows.filter((row) => {
+        if (resolvedExpandable.rowExpandable && !resolvedExpandable.rowExpandable(row.record)) {
+          return false;
+        }
+        return Boolean(
+          resolvedExpandable.expandedRowRender || Array.isArray(row.record[childrenColumnName]) && row.record[childrenColumnName].length
+        );
+      }).map((row) => row.key);
+    }
+    return (resolvedExpandable == null ? void 0 : resolvedExpandable.defaultExpandedRowKeys) ?? defaultExpandedRowKeys;
+  });
+  const expandedKeys = (resolvedExpandable == null ? void 0 : resolvedExpandable.expandedRowKeys) ?? innerExpandedKeys;
+  const expandedKeySet = (0, import_react.useMemo)(() => new Set(expandedKeys.map(String)), [expandedKeys]);
+  (0, import_react.useEffect)(() => {
+    allRows.forEach((row) => selectionRecordCacheRef.current.set(String(row.key), row.record));
+    if (!(resolvedRowSelection == null ? void 0 : resolvedRowSelection.preserveSelectedRowKeys)) {
+      const availableKeys = new Set(allRows.map((row) => String(row.key)));
+      selectionRecordCacheRef.current.forEach((_record, key) => {
+        if (!availableKeys.has(key)) selectionRecordCacheRef.current.delete(key);
+      });
+    }
+  }, [allRows, resolvedRowSelection == null ? void 0 : resolvedRowSelection.preserveSelectedRowKeys]);
+  (0, import_react.useEffect)(() => {
+    if (selectionControlled || (resolvedRowSelection == null ? void 0 : resolvedRowSelection.preserveSelectedRowKeys)) return;
+    const availableKeys = new Set(allRows.map((row) => String(row.key)));
+    setInnerSelectedKeys((current2) => {
+      const next = current2.filter((key) => availableKeys.has(String(key)));
+      return next.length === current2.length ? current2 : next;
+    });
+  }, [allRows, resolvedRowSelection == null ? void 0 : resolvedRowSelection.preserveSelectedRowKeys, selectionControlled]);
+  (0, import_react.useEffect)(() => {
+    if (!resolvedExpandable || resolvedExpandable.expandedRowKeys !== void 0) return;
+    const availableKeys = new Set(allRows.map((row) => String(row.key)));
+    setInnerExpandedKeys((current2) => {
+      const next = current2.filter((key) => availableKeys.has(String(key)));
+      return next.length === current2.length ? current2 : next;
+    });
+  }, [allRows, resolvedExpandable]);
+  const isRowExpandable = (0, import_react.useCallback)(
+    (record) => {
+      if ((resolvedExpandable == null ? void 0 : resolvedExpandable.rowExpandable) && !resolvedExpandable.rowExpandable(record))
+        return false;
+      return Boolean(
+        (resolvedExpandable == null ? void 0 : resolvedExpandable.expandedRowRender) || Array.isArray(record[childrenColumnName]) && record[childrenColumnName].length
+      );
+    },
+    [childrenColumnName, resolvedExpandable]
+  );
+  const visibleRows = (0, import_react.useMemo)(() => {
+    const result = [];
+    const visit = (records, indent = 0) => {
+      records.forEach((record) => {
+        const sourceMeta = allRows.find((item) => item.record === record);
+        const index = sourceMeta.index;
+        const key = sourceMeta.key;
+        result.push({ key, record, index, indent });
+        const nested = record[childrenColumnName];
+        if (expandedKeySet.has(String(key)) && Array.isArray(nested)) {
+          visit(nested, indent + 1);
+        }
+      });
+    };
+    visit(currentPageData);
+    return result;
+  }, [allRows, childrenColumnName, currentPageData, expandedKeySet, rowKey]);
+  const canVirtualize = virtual && typeof (scroll == null ? void 0 : scroll.y) === "number" && !(resolvedExpandable == null ? void 0 : resolvedExpandable.expandedRowRender);
+  const virtualRange = (0, import_react.useMemo)(() => {
+    if (!canVirtualize || typeof (scroll == null ? void 0 : scroll.y) !== "number") {
+      return { start: 0, end: visibleRows.length };
+    }
+    const overscan = 3;
+    const start = Math.max(0, Math.floor(virtualScrollTop / metrics.rowMinHeight) - overscan);
+    const count = Math.ceil(scroll.y / metrics.rowMinHeight) + overscan * 2;
+    return { start, end: Math.min(visibleRows.length, start + count) };
+  }, [canVirtualize, metrics.rowMinHeight, scroll == null ? void 0 : scroll.y, virtualScrollTop, visibleRows.length]);
+  const renderedRows = visibleRows.slice(virtualRange.start, virtualRange.end);
+  const loadingState = typeof loading === "boolean" ? { spinning: loading, delay: 0, tip: (locale == null ? void 0 : locale.loadingText) ?? "加载中..." } : {
+    ...loading,
+    spinning: loading.spinning ?? true,
+    delay: loading.delay ?? 0,
+    tip: loading.tip ?? (locale == null ? void 0 : locale.loadingText) ?? "加载中..."
+  };
+  const [showLoading, setShowLoading] = (0, import_react.useState)(
+    Boolean(loadingState.spinning && !loadingState.delay)
+  );
+  (0, import_react.useEffect)(() => {
+    if (!loadingState.spinning) {
+      setShowLoading(false);
+      return;
+    }
+    if (!loadingState.delay) {
+      setShowLoading(true);
+      return;
+    }
+    setShowLoading(false);
+    const timer = setTimeout(() => setShowLoading(true), loadingState.delay);
+    return () => clearTimeout(timer);
+  }, [loadingState.delay, loadingState.spinning]);
+  const scrollToFirstRow = (0, import_react.useCallback)(() => {
+    if (!(scroll == null ? void 0 : scroll.scrollToFirstRowOnChange)) return;
+    setScrollTarget("");
+    setScrollTop(0);
+    setVirtualScrollTop(0);
+  }, [scroll == null ? void 0 : scroll.scrollToFirstRowOnChange]);
+  const buildSorterResult = (0, import_react.useCallback)(
+    (nextSortState) => {
+      const results = nextSortState.map((state) => {
+        const column = visibleColumns.find(
+          (item, index) => getColumnKey(item, index) === state.columnKey
+        );
+        return {
+          column,
+          columnKey: state.columnKey,
+          field: column == null ? void 0 : column.dataIndex,
+          order: state.order
+        };
+      });
+      if (!results.length) return {};
+      return results.length === 1 ? results[0] : results;
+    },
+    [visibleColumns]
+  );
+  const notifyChange = (0, import_react.useCallback)(
+    (action, nextCurrent, nextPageSize, nextFilters, nextSortState) => {
+      const nextData = applyTransforms(dataSource, visibleColumns, nextFilters, nextSortState);
+      const nextTotal = paginationEnabled ? paginationConfig.total ?? nextData.length : nextData.length;
+      const remote = paginationEnabled && paginationConfig.total !== void 0 && paginationConfig.total > nextData.length;
+      const nextCurrentData = !paginationEnabled || remote ? nextData : nextData.slice((nextCurrent - 1) * nextPageSize, nextCurrent * nextPageSize);
+      onChange == null ? void 0 : onChange(
+        {
+          ...paginationConfig || {},
+          current: nextCurrent,
+          pageSize: nextPageSize,
+          total: nextTotal
+        },
+        nextFilters,
+        buildSorterResult(nextSortState),
+        { action, currentDataSource: nextCurrentData }
+      );
+    },
+    [buildSorterResult, dataSource, onChange, paginationConfig, paginationEnabled, visibleColumns]
+  );
+  const changePagination = (nextCurrent, nextPageSize) => {
+    var _a2;
+    if (disabled) return;
+    if (paginationEnabled) {
+      if (paginationConfig.current === void 0) setInnerCurrent(nextCurrent);
+      if (paginationConfig.pageSize === void 0) setInnerPageSize(nextPageSize);
+      (_a2 = paginationConfig.onChange) == null ? void 0 : _a2.call(paginationConfig, nextCurrent, nextPageSize);
+    }
+    scrollToFirstRow();
+    notifyChange("paginate", nextCurrent, nextPageSize, filtersForChange, sortState);
+  };
+  const cycleSort = (column, columnIndex) => {
+    var _a2;
+    if (disabled || !column.sorter) return;
+    const columnKey = getColumnKey(column, columnIndex);
+    const directions = column.sortDirections ?? sortDirections;
+    const currentOrder = ((_a2 = sortState.find((state) => state.columnKey === columnKey)) == null ? void 0 : _a2.order) ?? null;
+    const currentIndex = currentOrder ? directions.indexOf(currentOrder) : -1;
+    const nextOrder = currentIndex < directions.length - 1 ? directions[currentIndex + 1] : null;
+    const multiple = getSorterMultiple(column);
+    const retained = multiple === void 0 ? [] : sortState.filter((state) => {
+      if (state.columnKey === columnKey) return false;
+      const stateColumn = visibleColumns.find(
+        (item, index) => getColumnKey(item, index) === state.columnKey
+      );
+      return getSorterMultiple(stateColumn) !== void 0;
+    });
+    const nextSortState = nextOrder ? [...retained, { columnKey, order: nextOrder }] : retained;
+    nextSortState.sort((first, second) => {
+      const firstColumn = visibleColumns.find(
+        (item, index) => getColumnKey(item, index) === first.columnKey
+      );
+      const secondColumn = visibleColumns.find(
+        (item, index) => getColumnKey(item, index) === second.columnKey
+      );
+      return (getSorterMultiple(secondColumn) ?? 0) - (getSorterMultiple(firstColumn) ?? 0);
+    });
+    if (!controlledSortColumns.length) setInnerSortState(nextSortState);
+    if (paginationEnabled && paginationConfig.current === void 0) setInnerCurrent(1);
+    scrollToFirstRow();
+    notifyChange("sort", 1, pageSize, filtersForChange, nextSortState);
+  };
+  const openFilter = (column, columnIndex) => {
+    if (disabled) return;
+    const key = getColumnKey(column, columnIndex);
+    if (openFilterKey === key) {
+      setOpenFilterKey(null);
+      return;
+    }
+    const nextDraftFilters = {
+      ...draftFiltersRef.current,
+      [key]: [...filtersForChange[key] ?? []]
+    };
+    draftFiltersRef.current = nextDraftFilters;
+    setDraftFilters(nextDraftFilters);
+    setOpenFilterKey(key);
+  };
+  const commitFilter = (column, columnIndex, reset = false) => {
+    if (disabled) return;
+    const key = getColumnKey(column, columnIndex);
+    const values = reset ? [] : draftFiltersRef.current[key] ?? [];
+    const nextFilters = { ...filtersForChange, [key]: values.length ? values : null };
+    if (column.filteredValue === void 0) {
+      setInnerFilters((current2) => ({ ...current2, [key]: values }));
+    }
+    if (paginationEnabled && paginationConfig.current === void 0) setInnerCurrent(1);
+    setOpenFilterKey(null);
+    scrollToFirstRow();
+    notifyChange("filter", 1, pageSize, nextFilters, sortState);
+  };
+  const selectedRowsForKeys = (0, import_react.useCallback)(
+    (keys) => {
+      const currentRecords = new Map(allRows.map((item) => [String(item.key), item.record]));
+      return keys.flatMap((key) => {
+        const record = currentRecords.get(String(key)) ?? ((resolvedRowSelection == null ? void 0 : resolvedRowSelection.preserveSelectedRowKeys) ? selectionRecordCacheRef.current.get(String(key)) : void 0);
+        return record ? [record] : [];
+      });
+    },
+    [allRows, resolvedRowSelection == null ? void 0 : resolvedRowSelection.preserveSelectedRowKeys]
+  );
+  const updateSelection = (nextKeys, type, changedRows = []) => {
+    var _a2, _b2;
+    const normalized = Array.from(new Map(nextKeys.map((key) => [String(key), key])).values());
+    if (!selectionControlled) setInnerSelectedKeys(normalized);
+    const nextRows = selectedRowsForKeys(normalized);
+    (_a2 = resolvedRowSelection == null ? void 0 : resolvedRowSelection.onChange) == null ? void 0 : _a2.call(resolvedRowSelection, normalized, nextRows, { type });
+    onSelectionChange == null ? void 0 : onSelectionChange(normalized, nextRows);
+    if (type === "all" || type === "none") {
+      (_b2 = resolvedRowSelection == null ? void 0 : resolvedRowSelection.onSelectAll) == null ? void 0 : _b2.call(resolvedRowSelection, type === "all", nextRows, changedRows);
+    }
+    return nextRows;
+  };
+  const toggleRowSelection = (row) => {
+    var _a2;
+    const selection = resolvedRowSelection;
+    const checked = selectedKeySet.has(String(row.key));
+    const nextKeys = selection.type === "radio" ? [row.key] : checked ? selectedKeys.filter((key) => String(key) !== String(row.key)) : [...selectedKeys, row.key];
+    const nextRows = updateSelection(nextKeys, "single");
+    (_a2 = selection.onSelect) == null ? void 0 : _a2.call(selection, row.record, !checked, nextRows);
+  };
+  const selectableRows = visibleRows.filter(
+    (row) => {
+      var _a2;
+      return !((_a2 = resolvedRowSelection == null ? void 0 : resolvedRowSelection.getCheckboxProps) == null ? void 0 : _a2.call(resolvedRowSelection, row.record).disabled);
+    }
+  );
+  const allPageSelected = selectableRows.length > 0 && selectableRows.every((row) => selectedKeySet.has(String(row.key)));
+  const somePageSelected = selectableRows.some((row) => selectedKeySet.has(String(row.key)));
+  const toggleSelectAll = () => {
+    const pageKeys = selectableRows.map((row) => row.key);
+    const pageKeySet = new Set(pageKeys.map(String));
+    const nextKeys = allPageSelected ? selectedKeys.filter((key) => !pageKeySet.has(String(key))) : [...selectedKeys, ...pageKeys.filter((key) => !selectedKeySet.has(String(key)))];
+    updateSelection(
+      nextKeys,
+      allPageSelected ? "none" : "all",
+      selectableRows.map((row) => row.record)
+    );
+  };
+  const toggleExpand = (row) => {
+    var _a2, _b2;
+    if (disabled || !resolvedExpandable || !isRowExpandable(row.record)) return;
+    const expanded = expandedKeySet.has(String(row.key));
+    const nextKeys = expanded ? expandedKeys.filter((key) => String(key) !== String(row.key)) : [...expandedKeys, row.key];
+    if (resolvedExpandable.expandedRowKeys === void 0) setInnerExpandedKeys(nextKeys);
+    (_a2 = resolvedExpandable.onExpand) == null ? void 0 : _a2.call(resolvedExpandable, !expanded, row.record);
+    (_b2 = resolvedExpandable.onExpandedRowsChange) == null ? void 0 : _b2.call(resolvedExpandable, nextKeys);
+  };
+  (0, import_react.useImperativeHandle)(
+    ref,
+    () => ({
+      nativeElement: rootRef.current,
+      scrollTo: ({ index, key, offset = 0, top }) => {
+        var _a2;
+        if (top !== void 0) {
+          setScrollTarget("");
+          setScrollTop(top);
+          setVirtualScrollTop(top);
+          return;
+        }
+        if (key === void 0 && index === void 0) return;
+        let targetIndex = key !== void 0 ? visibleRows.findIndex((row) => String(row.key) === String(key)) : index;
+        if (key !== void 0 && targetIndex < 0 && paginationEnabled && !isRemotePagination) {
+          const absoluteIndex = transformedData.findIndex(
+            (record, recordIndex) => String(resolveRowKey(record, recordIndex, rowKey)) === String(key)
+          );
+          if (absoluteIndex >= 0) {
+            const targetPage = Math.floor(absoluteIndex / pageSize) + 1;
+            if (paginationConfig.current === void 0) setInnerCurrent(targetPage);
+            (_a2 = paginationConfig.onChange) == null ? void 0 : _a2.call(paginationConfig, targetPage, pageSize);
+            targetIndex = absoluteIndex % pageSize;
+          }
+        }
+        if (targetIndex < 0 || targetIndex >= visibleRows.length) return;
+        const nextTop = targetIndex * metrics.rowMinHeight + offset;
+        setScrollTop(nextTop);
+        setVirtualScrollTop(nextTop);
+        setScrollTarget(`x-table-row-${String(key ?? visibleRows[targetIndex].key)}`);
+      }
+    }),
+    [
+      isRemotePagination,
+      metrics.rowMinHeight,
+      pageSize,
+      paginationConfig,
+      paginationEnabled,
+      rowKey,
+      transformedData,
+      visibleRows
+    ]
+  );
+  const selectionWidth = (resolvedRowSelection == null ? void 0 : resolvedRowSelection.columnWidth) ?? 44;
+  const showExpandColumn = Boolean(resolvedExpandable) && (resolvedExpandable == null ? void 0 : resolvedExpandable.showExpandColumn) !== false;
+  const expandWidth = (resolvedExpandable == null ? void 0 : resolvedExpandable.columnWidth) ?? 40;
+  const getFixedStyle = (column, columnIndex) => {
+    var _a2, _b2;
+    const fixed = normalizeFixed(column.fixed);
+    if (!fixed) return void 0;
+    if (fixed === "left") {
+      let left = resolvedRowSelection ? Number(selectionWidth) || 44 : 0;
+      if (showExpandColumn) left += Number(expandWidth) || 40;
+      for (let index = 0; index < columnIndex; index += 1) {
+        left += Number((_a2 = visibleColumns[index]) == null ? void 0 : _a2.width) || 120;
+      }
+      return {
+        position: "sticky",
+        left,
+        zIndex: 4,
+        backgroundColor: "var(--x-table-row-surface)",
+        boxShadow: horizontalScrollState.canScrollLeft ? "4px 0 8px var(--x-table-fixed-edge-shadow-start)" : "none"
+      };
+    }
+    let right = 0;
+    for (let index = visibleColumns.length - 1; index > columnIndex; index -= 1) {
+      right += Number((_b2 = visibleColumns[index]) == null ? void 0 : _b2.width) || 120;
+    }
+    return {
+      position: "sticky",
+      right,
+      zIndex: 4,
+      backgroundColor: "var(--x-table-row-surface)",
+      boxShadow: horizontalScrollState.canScrollRight ? "-4px 0 8px var(--x-table-fixed-edge-shadow-start)" : "none"
+    };
+  };
+  const tableMinWidth = (() => {
+    if (typeof (scroll == null ? void 0 : scroll.x) === "number") return `${scroll.x}px`;
+    if (typeof (scroll == null ? void 0 : scroll.x) === "string" && scroll.x !== "max-content") return scroll.x;
+    if ((scroll == null ? void 0 : scroll.x) === true || (scroll == null ? void 0 : scroll.x) === "max-content") {
+      const controls = (resolvedRowSelection ? Number(selectionWidth) || 44 : 0) + (showExpandColumn ? Number(expandWidth) || 40 : 0);
+      return `${visibleColumns.reduce((sum, column) => sum + (Number(column.width) || 120), controls)}px`;
+    }
+    return "100%";
+  })();
+  const cellBaseStyle = (column, columnIndex) => ({
+    boxSizing: "border-box",
+    display: "flex",
+    minWidth: toCssSize(column.minWidth) ?? (column.width ? toCssSize(column.width) : 0),
+    width: toCssSize(column.width),
+    minHeight: metrics.rowMinHeight,
+    flex: column.width ? "0 0 auto" : 1,
+    alignItems: "center",
+    justifyContent: column.align === "right" ? "flex-end" : column.align === "center" ? "center" : "flex-start",
+    padding: `${metrics.paddingY}px ${metrics.paddingX}px`,
+    overflow: column.ellipsis ? "hidden" : void 0,
+    borderRight: bordered ? "1px solid var(--x-table-border)" : "none",
+    ...getFixedStyle(column, columnIndex),
+    ...semanticStyles.cell,
+    ...column.style
+  });
+  const renderCellContent = (column, record, index, indent, columnIndex, selected) => {
+    const value = getValueByDataIndex(record, column.dataIndex);
+    const cacheKey = `${String(resolveRowKey(record, index, rowKey))}:${getColumnKey(
+      column,
+      columnIndex
+    )}`;
+    const cached = cellRenderCacheRef.current.get(cacheKey);
+    const shouldUpdate = !cached || !column.shouldCellUpdate || column.shouldCellUpdate(record, cached.record);
+    const content = shouldUpdate ? column.render ? column.render(value, record, index) : value : cached.content;
+    if (shouldUpdate) cellRenderCacheRef.current.set(cacheKey, { content, record });
+    const primitiveStyle = {
+      maxWidth: "100%",
+      fontSize: metrics.fontSize,
+      lineHeight: `${metrics.lineHeight}px`,
+      color: selected ? "var(--x-table-row-selected-foreground)" : "var(--x-table-body-foreground)",
+      textAlign: column.align ?? "left",
+      ...column.ellipsis ? { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } : void 0,
+      ...columnIndex === 0 && indent > 0 ? { paddingLeft: indent * ((resolvedExpandable == null ? void 0 : resolvedExpandable.indentSize) ?? 16) } : void 0
+    };
+    return renderNode(content ?? "-", primitiveStyle);
+  };
+  const HeaderWrapper = ((_a = components == null ? void 0 : components.header) == null ? void 0 : _a.wrapper) ?? import_components.View;
+  const HeaderRow = ((_b = components == null ? void 0 : components.header) == null ? void 0 : _b.row) ?? import_components.View;
+  const HeaderCell = ((_c = components == null ? void 0 : components.header) == null ? void 0 : _c.cell) ?? import_components.View;
+  const BodyWrapper = ((_d = components == null ? void 0 : components.body) == null ? void 0 : _d.wrapper) ?? import_components.View;
+  const BodyRow = ((_e = components == null ? void 0 : components.body) == null ? void 0 : _e.row) ?? import_components.View;
+  const BodyCell = ((_f = components == null ? void 0 : components.body) == null ? void 0 : _f.cell) ?? import_components.View;
+  const TableSurface = (components == null ? void 0 : components.table) ?? import_components.View;
+  const headerSpanStyle = (leaves) => {
+    const fixedWidths = leaves.map((column) => toCssSize(column.width)).filter((width) => Boolean(width));
+    const flexibleCount = leaves.length - fixedWidths.length;
+    const fixedBasis = fixedWidths.length ? `calc(${fixedWidths.join(" + ")})` : 0;
+    return flexibleCount > 0 ? { minWidth: 0, flexGrow: flexibleCount, flexShrink: 1, flexBasis: fixedBasis } : { width: fixedBasis, flex: "0 0 auto" };
+  };
+  const renderHeaderRowShell = (content, rowIndex) => {
+    const headerRowProps = (onHeaderRow == null ? void 0 : onHeaderRow(visibleColumns, rowIndex)) ?? {};
+    const {
+      className: headerRowClassName,
+      style: headerRowStyle,
+      ...headerRowRest
+    } = headerRowProps;
+    return /* @__PURE__ */ import_react.default.createElement(
+      HeaderRow,
+      {
+        ...headerRowRest,
+        key: `header-row-${rowIndex}`,
+        "data-slot": "table-header-row",
+        "data-header-row": rowIndex,
+        className: (0, import_utils.classNames)("x-table__header-row", headerRowClassName),
+        style: {
+          display: "flex",
+          minWidth: tableMinWidth,
+          flexDirection: "row",
+          borderBottom: "1px solid var(--x-table-border)",
+          ...headerRowStyle
+        }
+      },
+      content
+    );
+  };
+  const utilityHeaderStyle = (kind, placeholder = false) => ({
+    boxSizing: "border-box",
+    display: "flex",
+    width: toCssSize(kind === "selection" ? selectionWidth : expandWidth),
+    minHeight: metrics.rowMinHeight,
+    flexShrink: 0,
+    alignItems: "center",
+    justifyContent: "center",
+    visibility: placeholder ? "hidden" : void 0,
+    borderRight: bordered ? "1px solid var(--x-table-border)" : "none",
+    backgroundColor: "var(--x-table-header-surface)",
+    ...kind === "selection" && (resolvedRowSelection == null ? void 0 : resolvedRowSelection.fixed) ? { position: "sticky", left: 0, zIndex: 6 } : void 0,
+    ...kind === "expand" && (resolvedExpandable == null ? void 0 : resolvedExpandable.fixed) ? {
+      position: "sticky",
+      left: resolvedRowSelection ? Number(selectionWidth) || 44 : 0,
+      zIndex: 6
+    } : void 0,
+    ...semanticStyles.cell
+  });
+  const renderSelectionHeader = () => {
+    if (!resolvedRowSelection) return null;
+    let originalNode = null;
+    if (resolvedRowSelection.type !== "radio" && !resolvedRowSelection.hideSelectAll) {
+      originalNode = /* @__PURE__ */ import_react.default.createElement(
+        import_checkbox.Checkbox,
+        {
+          checked: allPageSelected,
+          indeterminate: somePageSelected && !allPageSelected,
+          disabled: disabled || selectableRows.length === 0,
+          size,
+          ariaLabel: "选择当前页全部行",
+          onChange: toggleSelectAll
+        }
+      );
+    }
+    const content = typeof resolvedRowSelection.columnTitle === "function" ? resolvedRowSelection.columnTitle(originalNode) : resolvedRowSelection.columnTitle ?? originalNode;
+    return /* @__PURE__ */ import_react.default.createElement(
+      HeaderCell,
+      {
+        "data-slot": "table-selection-cell",
+        className: (0, import_utils.classNames)("x-table__selection-cell", semanticClassNames.cell),
+        style: {
+          ...utilityHeaderStyle("selection"),
+          justifyContent: resolvedRowSelection.align === "right" ? "flex-end" : resolvedRowSelection.align === "left" ? "flex-start" : "center"
+        }
+      },
+      content
+    );
+  };
+  const renderHeader = () => {
+    if (!showHeader) return null;
+    const groupRows = Array.from({ length: Math.max(0, headerDepth - 1) }, (_, depth) => {
+      const cells = getHeaderBandCells(resolvedColumns, depth);
+      return renderHeaderRowShell(
+        /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, resolvedRowSelection ? /* @__PURE__ */ import_react.default.createElement(
+          HeaderCell,
+          {
+            "data-slot": "table-selection-placeholder",
+            "aria-hidden": "true",
+            style: utilityHeaderStyle("selection", true)
+          }
+        ) : null, showExpandColumn ? /* @__PURE__ */ import_react.default.createElement(
+          HeaderCell,
+          {
+            "data-slot": "table-expand-placeholder",
+            "aria-hidden": "true",
+            style: utilityHeaderStyle("expand", true)
+          }
+        ) : null, cells.map((cell, cellIndex) => {
+          const groupKey = `${depth}-${getColumnKey(cell.column, cellIndex)}`;
+          const groupTitle = typeof cell.column.title === "function" ? cell.column.title({ filters: filtersForChange }) : cell.column.title;
+          return /* @__PURE__ */ import_react.default.createElement(
+            HeaderCell,
+            {
+              key: groupKey,
+              "data-slot": cell.placeholder ? "table-column-group-placeholder" : "table-column-group",
+              "data-column-group-key": groupKey,
+              "aria-hidden": cell.placeholder ? "true" : void 0,
+              className: (0, import_utils.classNames)(
+                "x-table__cell",
+                "x-table__header-cell",
+                "x-table__column-group-cell",
+                semanticClassNames.cell,
+                cell.column.className
+              ),
+              style: {
+                boxSizing: "border-box",
+                display: "flex",
+                minHeight: metrics.rowMinHeight,
+                alignItems: "center",
+                justifyContent: cell.column.align === "right" ? "flex-end" : cell.column.align === "center" ? "center" : "flex-start",
+                padding: `${metrics.paddingY}px ${metrics.paddingX}px`,
+                visibility: cell.placeholder ? "hidden" : void 0,
+                borderRight: bordered ? "1px solid var(--x-table-border)" : "none",
+                backgroundColor: "var(--x-table-header-surface)",
+                color: "var(--x-table-header-foreground)",
+                fontSize: metrics.fontSize,
+                lineHeight: `${metrics.lineHeight}px`,
+                fontWeight: 600,
+                ...headerSpanStyle(cell.leaves),
+                ...semanticStyles.cell,
+                ...cell.column.style
+              }
+            },
+            cell.placeholder ? null : renderNode(groupTitle)
+          );
+        })),
+        depth
+      );
+    });
+    const leafRow = renderHeaderRowShell(
+      /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, renderSelectionHeader(), showExpandColumn ? /* @__PURE__ */ import_react.default.createElement(
+        HeaderCell,
+        {
+          "data-slot": "table-expand-cell",
+          className: (0, import_utils.classNames)("x-table__expand-cell", semanticClassNames.cell),
+          style: utilityHeaderStyle("expand")
+        },
+        resolvedExpandable == null ? void 0 : resolvedExpandable.columnTitle
+      ) : null, visibleColumns.map((column, columnIndex) => {
+        var _a2, _b2, _c2;
+        const key = getColumnKey(column, columnIndex);
+        const order = ((_a2 = sortState.find((state) => state.columnKey === key)) == null ? void 0 : _a2.order) ?? null;
+        const filtered = Boolean((_b2 = filtersForChange[key]) == null ? void 0 : _b2.length);
+        const sorterResult = buildSorterResult(sortState);
+        const sortColumns = Array.isArray(sorterResult) ? sorterResult : sorterResult.order ? [sorterResult] : [];
+        const titleContent2 = typeof column.title === "function" ? column.title({
+          sortOrder: order,
+          sortColumn: order ? column : void 0,
+          sortColumns,
+          filters: filtersForChange
+        }) : column.title;
+        const titleLabel = typeof titleContent2 === "string" || typeof titleContent2 === "number" ? String(titleContent2) : key;
+        const headerCellProps = ((_c2 = column.onHeaderCell) == null ? void 0 : _c2.call(column, column)) ?? {};
+        const {
+          className: headerCellClassName,
+          style: headerCellStyle,
+          onClick: headerCellOnClick,
+          ...headerCellRest
+        } = headerCellProps;
+        const sortControlKey = `${key}-sort`;
+        const filterControlKey = `${key}-filter`;
+        return /* @__PURE__ */ import_react.default.createElement(
+          HeaderCell,
+          {
+            ...headerCellRest,
+            ...column.sorter ? interactiveControlProps(sortControlKey, (event) => {
+              headerCellOnClick == null ? void 0 : headerCellOnClick(event);
+              cycleSort(column, columnIndex);
+            }) : {},
+            key,
+            "data-slot": "table-cell",
+            "data-column-key": key,
+            "data-sort-order": order ?? "none",
+            "data-sorter-tooltip": column.sorter && showSorterTooltip !== false ? String((locale == null ? void 0 : locale.sortTitle) ?? "点击排序") : void 0,
+            className: (0, import_utils.classNames)(
+              "x-table__cell",
+              "x-table__header-cell",
+              semanticClassNames.cell,
+              column.className,
+              headerCellClassName
+            ),
+            role: column.sorter ? "button" : void 0,
+            ariaRole: column.sorter ? "button" : void 0,
+            ariaLabel: titleLabel,
+            style: {
+              ...cellBaseStyle(column, columnIndex),
+              fontWeight: 600,
+              color: "var(--x-table-header-foreground)",
+              backgroundColor: "var(--x-table-header-surface)",
+              ...interactiveFocusStyle(sortControlKey),
+              ...headerCellStyle
+            },
+            onClick: (event) => {
+              headerCellOnClick == null ? void 0 : headerCellOnClick(event);
+              cycleSort(column, columnIndex);
+            }
+          },
+          /* @__PURE__ */ import_react.default.createElement(
+            import_components.View,
+            {
+              style: {
+                display: "flex",
+                minWidth: 0,
+                flex: 1,
+                alignItems: "center",
+                justifyContent: column.align === "right" ? "flex-end" : column.align === "center" ? "center" : "flex-start",
+                gap: 6
+              }
+            },
+            renderNode(titleContent2, {
+              minWidth: 0,
+              fontSize: metrics.fontSize,
+              lineHeight: `${metrics.lineHeight}px`,
+              fontWeight: 600,
+              color: "var(--x-table-header-foreground)",
+              textAlign: column.align ?? "left"
+            }),
+            column.sorter ? /* @__PURE__ */ import_react.default.createElement(
+              import_components.View,
+              {
+                "data-slot": "table-sorter",
+                "data-active": order ? "true" : "false",
+                className: "x-table__sorter",
+                style: {
+                  display: "flex",
+                  width: 28,
+                  height: 28,
+                  flexShrink: 0,
+                  alignItems: "center",
+                  justifyContent: "center",
+                  borderRadius: "var(--x-table-toolbar-radius)",
+                  backgroundColor: order ? "var(--x-table-toolbar-active-surface)" : "transparent"
+                }
+              },
+              /* @__PURE__ */ import_react.default.createElement(
+                import_icon.Icon,
+                {
+                  name: order === "ascend" ? "ArrowUp" : order === "descend" ? "ArrowDown" : "ChevronsUpDown",
+                  size: metrics.iconSize,
+                  color: order ? "var(--x-table-toolbar-active-foreground)" : "var(--x-table-toolbar-foreground)",
+                  block: true
+                }
+              )
+            ) : null,
+            column.filters || column.filterDropdown ? /* @__PURE__ */ import_react.default.createElement(
+              import_components.View,
+              {
+                ...interactiveControlProps(filterControlKey, (event) => {
+                  stopPropagation(event);
+                  openFilter(column, columnIndex);
+                }),
+                "data-slot": "table-filter-trigger",
+                "data-active": filtered ? "true" : "false",
+                "data-open": openFilterKey === key ? "true" : "false",
+                className: "x-table__filter-trigger",
+                role: "button",
+                ariaRole: "button",
+                "aria-expanded": openFilterKey === key,
+                ariaLabel: `${titleLabel}，${String((locale == null ? void 0 : locale.filterTitle) ?? "筛选")}`,
+                style: {
+                  display: "flex",
+                  width: 28,
+                  height: 28,
+                  flexShrink: 0,
+                  alignItems: "center",
+                  justifyContent: "center",
+                  borderRadius: "var(--x-table-toolbar-radius)",
+                  backgroundColor: filtered ? "var(--x-table-toolbar-active-surface)" : "transparent",
+                  ...interactiveFocusStyle(filterControlKey)
+                },
+                onClick: (event) => {
+                  stopPropagation(event);
+                  openFilter(column, columnIndex);
+                }
+              },
+              /* @__PURE__ */ import_react.default.createElement(
+                import_icon.Icon,
+                {
+                  name: "Filter",
+                  size: metrics.iconSize,
+                  color: filtered ? "var(--x-table-toolbar-active-foreground)" : "var(--x-table-toolbar-foreground)",
+                  block: true
+                }
+              )
+            ) : null
+          )
+        );
+      })),
+      headerDepth - 1
+    );
+    return /* @__PURE__ */ import_react.default.createElement(
+      HeaderWrapper,
+      {
+        "data-slot": "table-header",
+        className: (0, import_utils.classNames)("x-table__header", semanticClassNames.header),
+        style: {
+          position: sticky ? "sticky" : "relative",
+          top: typeof sticky === "object" ? sticky.offsetHeader ?? 0 : 0,
+          zIndex: sticky ? 8 : 2,
+          backgroundColor: "var(--x-table-header-surface)",
+          ...semanticStyles.header
+        }
+      },
+      groupRows,
+      leafRow
+    );
+  };
+  const renderFilterPanel = () => {
+    if (!openFilterKey) return null;
+    const columnIndex = visibleColumns.findIndex(
+      (column2, index) => getColumnKey(column2, index) === openFilterKey
+    );
+    const column = visibleColumns[columnIndex];
+    if (!column) return null;
+    const selected = draftFilters[openFilterKey];
+    const setSelectedKeys = (keys) => {
+      const nextDraftFilters = { ...draftFiltersRef.current, [openFilterKey]: keys };
+      draftFiltersRef.current = nextDraftFilters;
+      setDraftFilters(nextDraftFilters);
+    };
+    const customProps = {
+      clearFilters: () => commitFilter(column, columnIndex, true),
+      close: () => setOpenFilterKey(null),
+      column,
+      confirm: () => commitFilter(column, columnIndex),
+      filters: column.filters,
+      selectedKeys: selected,
+      setSelectedKeys,
+      visible: true
+    };
+    const customContent = typeof column.filterDropdown === "function" ? column.filterDropdown(customProps) : column.filterDropdown;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        "data-slot": "table-filter-panel",
+        "data-column-key": openFilterKey,
+        className: "x-table__filter-panel",
+        role: "dialog",
+        ariaRole: "dialog",
+        ariaLabel: `${String(column.title ?? openFilterKey)}筛选`,
+        style: {
+          boxSizing: "border-box",
+          display: "flex",
+          position: "absolute",
+          top: headerDepth * metrics.rowMinHeight + 8,
+          right: 12,
+          zIndex: 20,
+          width: 224,
+          maxWidth: "calc(100% - 24px)",
+          flexDirection: "column",
+          gap: 8,
+          padding: 12,
+          border: "1px solid var(--x-table-filter-border)",
+          borderRadius: "var(--x-table-filter-radius)",
+          backgroundColor: "var(--x-table-filter-surface)",
+          color: "var(--x-table-filter-foreground)",
+          boxShadow: "var(--x-table-filter-shadow)"
+        }
+      },
+      customContent ?? (column.filters ? /* @__PURE__ */ import_react.default.createElement(import_components.View, { style: { display: "flex", flexDirection: "column", gap: 6 } }, flattenFilterItems(column.filters).map((item) => {
+        const checked = selected.some((value) => String(value) === String(item.value));
+        const optionControlKey = `${openFilterKey}-option-${String(item.value)}`;
+        const toggleOption = () => {
+          if (disabled) return;
+          const next = column.filterMultiple === false ? [item.value] : checked ? selected.filter((value) => String(value) !== String(item.value)) : [...selected, item.value];
+          setSelectedKeys(next);
+        };
+        return /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            ...interactiveControlProps(optionControlKey, toggleOption),
+            key: String(item.value),
+            "data-slot": "table-filter-option",
+            "data-value": String(item.value),
+            "data-checked": checked ? "true" : "false",
+            className: "x-table__filter-option",
+            role: "button",
+            ariaRole: "button",
+            "aria-pressed": checked,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 8,
+              padding: "6px 8px",
+              borderRadius: "var(--x-table-toolbar-radius)",
+              backgroundColor: checked ? "var(--x-table-toolbar-active-surface)" : "transparent",
+              ...interactiveFocusStyle(optionControlKey)
+            },
+            onClick: toggleOption
+          },
+          /* @__PURE__ */ import_react.default.createElement(import_checkbox.Checkbox, { checked, size, ariaLabel: String(item.text) }),
+          renderNode(item.text, {
+            fontSize: metrics.fontSize,
+            lineHeight: `${metrics.lineHeight}px`,
+            color: "var(--x-table-filter-foreground)"
+          })
+        );
+      })) : null),
+      /* @__PURE__ */ import_react.default.createElement(import_components.View, { style: { display: "flex", justifyContent: "flex-end", gap: 8 } }, /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          ...interactiveControlProps(
+            `${openFilterKey}-reset`,
+            () => commitFilter(column, columnIndex, true)
+          ),
+          "data-slot": "table-filter-reset",
+          className: "x-table__filter-reset",
+          role: "button",
+          ariaRole: "button",
+          style: {
+            padding: "6px 10px",
+            borderRadius: "var(--x-table-toolbar-radius)",
+            ...interactiveFocusStyle(`${openFilterKey}-reset`)
+          },
+          onClick: () => commitFilter(column, columnIndex, true)
+        },
+        renderNode((locale == null ? void 0 : locale.filterReset) ?? "重置", {
+          fontSize: metrics.fontSize,
+          lineHeight: `${metrics.lineHeight}px`,
+          color: "var(--x-table-toolbar-foreground)"
+        })
+      ), /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          ...interactiveControlProps(
+            `${openFilterKey}-confirm`,
+            () => commitFilter(column, columnIndex)
+          ),
+          "data-slot": "table-filter-confirm",
+          className: "x-table__filter-confirm",
+          role: "button",
+          ariaRole: "button",
+          style: {
+            padding: "6px 10px",
+            borderRadius: "var(--x-table-toolbar-radius)",
+            backgroundColor: theme.colors.primary,
+            ...interactiveFocusStyle(`${openFilterKey}-confirm`)
+          },
+          onClick: () => commitFilter(column, columnIndex)
+        },
+        renderNode((locale == null ? void 0 : locale.filterConfirm) ?? "确定", {
+          fontSize: metrics.fontSize,
+          lineHeight: `${metrics.lineHeight}px`,
+          color: theme.colors["primary-foreground"]
+        })
+      ))
+    );
+  };
+  const renderSelectionActions = () => {
+    if (!(resolvedRowSelection == null ? void 0 : resolvedRowSelection.selections) || resolvedRowSelection.type === "radio") return null;
+    const changeableKeys = selectableRows.map((row) => row.key);
+    const actions = Array.isArray(resolvedRowSelection.selections) ? resolvedRowSelection.selections : [
+      { key: "all", text: (locale == null ? void 0 : locale.selectAll) ?? "全选" },
+      { key: "invert", text: (locale == null ? void 0 : locale.selectInvert) ?? "反选" },
+      { key: "none", text: (locale == null ? void 0 : locale.selectNone) ?? "清空" }
+    ];
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        "data-slot": "table-selection-actions",
+        style: { display: "flex", flexWrap: "wrap", gap: 8, padding: "8px 12px" }
+      },
+      actions.map((action) => {
+        const controlKey = `selection-${String(action.key ?? action.text)}`;
+        const activate = () => {
+          var _a2, _b2;
+          if (disabled) return;
+          if (action.onSelect) {
+            action.onSelect(changeableKeys);
+            return;
+          }
+          if (action.key === "all") {
+            toggleSelectAll();
+          } else if (action.key === "invert") {
+            const changeableSet = new Set(changeableKeys.map(String));
+            const retained = selectedKeys.filter((key) => !changeableSet.has(String(key)));
+            const inverted = changeableKeys.filter((key) => !selectedKeySet.has(String(key)));
+            const nextKeys = [...retained, ...inverted];
+            updateSelection(nextKeys, "invert");
+            (_a2 = resolvedRowSelection.onSelectInvert) == null ? void 0 : _a2.call(resolvedRowSelection, nextKeys);
+          } else if (action.key === "none") {
+            updateSelection([], "none");
+            (_b2 = resolvedRowSelection.onSelectNone) == null ? void 0 : _b2.call(resolvedRowSelection);
+          }
+        };
+        return /* @__PURE__ */ import_react.default.createElement(
+          import_components.View,
+          {
+            ...interactiveControlProps(controlKey, activate),
+            key: String(action.key ?? action.text),
+            "data-selection-action": String(action.key ?? ""),
+            role: "button",
+            ariaRole: "button",
+            style: {
+              padding: "4px 8px",
+              borderRadius: "var(--x-table-toolbar-radius)",
+              ...interactiveFocusStyle(controlKey)
+            },
+            onClick: activate
+          },
+          renderNode(action.text, {
+            fontSize: metrics.fontSize,
+            lineHeight: `${metrics.lineHeight}px`,
+            color: theme.colors.primary
+          })
+        );
+      })
+    );
+  };
+  const renderSelectionCell = (row) => {
+    var _a2, _b2;
+    if (!resolvedRowSelection) return null;
+    const checked = selectedKeySet.has(String(row.key));
+    const disabled2 = Boolean((_a2 = resolvedRowSelection.getCheckboxProps) == null ? void 0 : _a2.call(resolvedRowSelection, row.record).disabled);
+    const originNode = resolvedRowSelection.type === "radio" ? /* @__PURE__ */ import_react.default.createElement(
+      import_radio.Radio,
+      {
+        checked,
+        disabled: disabled2 || providerDisabled,
+        size,
+        ariaLabel: `选择第 ${row.index + 1} 行`,
+        onChange: () => toggleRowSelection(row)
+      }
+    ) : /* @__PURE__ */ import_react.default.createElement(
+      import_checkbox.Checkbox,
+      {
+        checked,
+        disabled: disabled2 || providerDisabled,
+        size,
+        ariaLabel: `选择第 ${row.index + 1} 行`,
+        onChange: () => toggleRowSelection(row)
+      }
+    );
+    return /* @__PURE__ */ import_react.default.createElement(
+      BodyCell,
+      {
+        "data-slot": "table-selection-cell",
+        className: (0, import_utils.classNames)("x-table__selection-cell", semanticClassNames.cell),
+        style: {
+          boxSizing: "border-box",
+          display: "flex",
+          width: toCssSize(selectionWidth),
+          minHeight: metrics.rowMinHeight,
+          flexShrink: 0,
+          alignItems: "center",
+          justifyContent: resolvedRowSelection.align === "right" ? "flex-end" : resolvedRowSelection.align === "left" ? "flex-start" : "center",
+          borderRight: bordered ? "1px solid var(--x-table-border)" : "none",
+          ...resolvedRowSelection.fixed ? {
+            position: "sticky",
+            left: 0,
+            zIndex: 5,
+            backgroundColor: "var(--x-table-row-surface)"
+          } : void 0,
+          ...semanticStyles.cell
+        },
+        onClick: stopPropagation
+      },
+      ((_b2 = resolvedRowSelection.renderCell) == null ? void 0 : _b2.call(resolvedRowSelection, checked, row.record, row.index, originNode)) ?? originNode
+    );
+  };
+  const renderExpandCell = (row) => {
+    var _a2;
+    if (!showExpandColumn || !resolvedExpandable) return null;
+    const expandableRow = isRowExpandable(row.record);
+    const expanded = expandedKeySet.has(String(row.key));
+    const originNode = expandableRow ? /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        ...interactiveControlProps(`expand-${String(row.key)}`, (event) => {
+          stopPropagation(event);
+          toggleExpand(row);
+        }),
+        "data-slot": "table-expand-trigger",
+        "data-expanded": expanded ? "true" : "false",
+        className: "x-table__expand-trigger",
+        role: "button",
+        ariaRole: "button",
+        ariaLabel: String(expanded ? (locale == null ? void 0 : locale.collapse) ?? "收起" : (locale == null ? void 0 : locale.expand) ?? "展开"),
+        style: {
+          display: "flex",
+          width: 28,
+          height: 28,
+          alignItems: "center",
+          justifyContent: "center",
+          borderRadius: "var(--x-table-toolbar-radius)",
+          ...interactiveFocusStyle(`expand-${String(row.key)}`)
+        },
+        onClick: (event) => {
+          stopPropagation(event);
+          toggleExpand(row);
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_icon.Icon,
+        {
+          name: expanded ? "ChevronDown" : "ChevronRight",
+          size: metrics.iconSize,
+          color: theme.colors["muted-foreground"],
+          block: true
+        }
+      )
+    ) : null;
+    return /* @__PURE__ */ import_react.default.createElement(
+      BodyCell,
+      {
+        "data-slot": "table-expand-cell",
+        className: (0, import_utils.classNames)("x-table__expand-cell", semanticClassNames.cell),
+        style: {
+          boxSizing: "border-box",
+          display: "flex",
+          width: toCssSize(expandWidth),
+          minHeight: metrics.rowMinHeight,
+          flexShrink: 0,
+          alignItems: "center",
+          justifyContent: "center",
+          borderRight: bordered ? "1px solid var(--x-table-border)" : "none",
+          ...resolvedExpandable.fixed ? {
+            position: "sticky",
+            left: resolvedRowSelection ? Number(selectionWidth) || 44 : 0,
+            zIndex: 5,
+            backgroundColor: "var(--x-table-row-surface)"
+          } : void 0,
+          ...semanticStyles.cell
+        }
+      },
+      ((_a2 = resolvedExpandable.expandIcon) == null ? void 0 : _a2.call(resolvedExpandable, {
+        expanded,
+        expandable: expandableRow,
+        onExpand: () => toggleExpand(row),
+        record: row.record
+      })) ?? originNode
+    );
+  };
+  const renderRow = (row, renderedIndex) => {
+    const selected = selectedKeySet.has(String(row.key));
+    const expanded = expandedKeySet.has(String(row.key));
+    const rowProps = (onRow == null ? void 0 : onRow(row.record, row.index)) ?? {};
+    const {
+      className: rowPropClassName,
+      style: rowPropStyle,
+      onClick: rowOnClick,
+      onMouseEnter: rowOnMouseEnter,
+      onMouseLeave: rowOnMouseLeave,
+      onTouchStart: rowOnTouchStart,
+      onTouchEnd: rowOnTouchEnd,
+      onTouchCancel: rowOnTouchCancel,
+      ...rowRest
+    } = rowProps;
+    const resolvedRowClassName = typeof rowClassName === "function" ? rowClassName(row.record, row.index) : rowClassName;
+    return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, { key: String(row.key) }, /* @__PURE__ */ import_react.default.createElement(
+      BodyRow,
+      {
+        ...rowRest,
+        id: `x-table-row-${String(row.key)}`,
+        "data-slot": "table-row",
+        "data-row-key": String(row.key),
+        "data-row-index": row.index,
+        "data-selected": selected ? "true" : "false",
+        "data-expanded": expanded ? "true" : "false",
+        "data-hoverable": rowHoverable ? "true" : "false",
+        "data-hovered": hoveredRowKey === String(row.key) ? "true" : "false",
+        className: (0, import_utils.classNames)(
+          "x-table__row",
+          selected && "x-table__row--selected",
+          rowHoverable && "x-table__row--hoverable",
+          semanticClassNames.row,
+          resolvedRowClassName,
+          rowPropClassName
+        ),
+        style: {
+          display: "flex",
+          minWidth: tableMinWidth,
+          flexDirection: "row",
+          borderBottom: "1px solid var(--x-table-border)",
+          backgroundColor: selected ? "var(--x-table-row-selected-surface)" : hoveredRowKey === String(row.key) ? "var(--x-table-row-hover-surface)" : striped && (virtualRange.start + renderedIndex) % 2 === 1 ? "var(--x-table-row-surface-alt)" : "var(--x-table-row-surface)",
+          boxShadow: selected ? "inset 0 0 0 1px var(--x-table-row-selected-ring)" : void 0,
+          cursor: (resolvedExpandable == null ? void 0 : resolvedExpandable.expandRowByClick) ? "pointer" : void 0,
+          transition: "background-color var(--x-motion-duration-standard) ease",
+          ...semanticStyles.row,
+          ...rowPropStyle
+        },
+        onClick: (event) => {
+          rowOnClick == null ? void 0 : rowOnClick(event);
+          if ((resolvedExpandable == null ? void 0 : resolvedExpandable.expandRowByClick) && !event.defaultPrevented && !isInteractiveEventTarget(event)) {
+            toggleExpand(row);
+          }
+        },
+        onMouseEnter: (event) => {
+          rowOnMouseEnter == null ? void 0 : rowOnMouseEnter(event);
+          if (rowHoverable) setHoveredRowKey(String(row.key));
+        },
+        onMouseLeave: (event) => {
+          rowOnMouseLeave == null ? void 0 : rowOnMouseLeave(event);
+          setHoveredRowKey((current2) => current2 === String(row.key) ? null : current2);
+        },
+        onTouchStart: (event) => {
+          rowOnTouchStart == null ? void 0 : rowOnTouchStart(event);
+          if (rowHoverable) setHoveredRowKey(String(row.key));
+        },
+        onTouchEnd: (event) => {
+          rowOnTouchEnd == null ? void 0 : rowOnTouchEnd(event);
+          setHoveredRowKey((current2) => current2 === String(row.key) ? null : current2);
+        },
+        onTouchCancel: (event) => {
+          rowOnTouchCancel == null ? void 0 : rowOnTouchCancel(event);
+          setHoveredRowKey((current2) => current2 === String(row.key) ? null : current2);
+        }
+      },
+      renderSelectionCell(row),
+      renderExpandCell(row),
+      visibleColumns.map((column, columnIndex) => {
+        var _a2;
+        const cellProps = ((_a2 = column.onCell) == null ? void 0 : _a2.call(column, row.record, row.index)) ?? {};
+        const {
+          className: cellPropClassName,
+          style: cellPropStyle,
+          ...cellRest
+        } = cellProps;
+        return /* @__PURE__ */ import_react.default.createElement(
+          BodyCell,
+          {
+            ...cellRest,
+            key: getColumnKey(column, columnIndex),
+            "data-slot": "table-cell",
+            "data-column-key": getColumnKey(column, columnIndex),
+            className: (0, import_utils.classNames)(
+              "x-table__cell",
+              "x-table__body-cell",
+              semanticClassNames.cell,
+              column.className,
+              cellPropClassName
+            ),
+            style: {
+              ...cellBaseStyle(column, columnIndex),
+              backgroundColor: selected ? "var(--x-table-row-selected-surface)" : void 0,
+              ...cellPropStyle
+            }
+          },
+          renderCellContent(
+            column,
+            row.record,
+            row.index,
+            row.indent,
+            columnIndex,
+            selected
+          )
+        );
+      })
+    ), expanded && isRowExpandable(row.record) && (resolvedExpandable == null ? void 0 : resolvedExpandable.expandedRowRender) ? /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        "data-slot": "table-expanded-row",
+        className: (0, import_utils.classNames)(
+          "x-table__expanded-row",
+          typeof resolvedExpandable.expandedRowClassName === "function" ? resolvedExpandable.expandedRowClassName(row.record, row.index, row.indent) : resolvedExpandable.expandedRowClassName
+        ),
+        style: {
+          boxSizing: "border-box",
+          minWidth: tableMinWidth,
+          padding: `${metrics.paddingY}px ${metrics.paddingX}px`,
+          borderBottom: "1px solid var(--x-table-border)",
+          backgroundColor: "var(--x-table-row-surface-alt)"
+        }
+      },
+      resolvedExpandable.expandedRowRender(row.record, row.index, row.indent, expanded)
+    ) : null);
+  };
+  const renderBody = () => /* @__PURE__ */ import_react.default.createElement(
+    BodyWrapper,
+    {
+      "data-slot": "table-body",
+      className: (0, import_utils.classNames)(
+        "x-table__body",
+        semanticClassNames.body,
+        typeof loading === "object" && loading.wrapperClassName
+      ),
+      style: {
+        position: "relative",
+        minHeight: showLoading ? 160 : void 0,
+        ...semanticStyles.body
+      }
+    },
+    canVirtualize && virtualRange.start > 0 ? /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        "data-slot": "table-virtual-spacer-top",
+        style: { height: virtualRange.start * metrics.rowMinHeight }
+      }
+    ) : null,
+    !showLoading && visibleRows.length === 0 ? /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        "data-slot": "table-empty",
+        className: (0, import_utils.classNames)("x-table__empty", semanticClassNames.empty),
+        style: {
+          boxSizing: "border-box",
+          display: "flex",
+          minHeight: 220,
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 12,
+          padding: 24,
+          ...semanticStyles.empty
+        }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          "data-slot": "table-empty-icon",
+          "aria-hidden": "true",
+          style: {
+            display: "flex",
+            width: 48,
+            height: 48,
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: 16,
+            backgroundColor: "var(--x-table-empty-icon-surface)"
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(import_icon.Icon, { name: "FileX", size: 24, color: "var(--x-table-empty-icon-foreground)", block: true })
+      ),
+      renderNode((locale == null ? void 0 : locale.emptyText) ?? emptyText ?? "暂无数据", {
+        fontSize: metrics.fontSize,
+        lineHeight: `${metrics.lineHeight}px`,
+        color: "var(--x-table-empty-foreground)"
+      })
+    ) : renderedRows.map(renderRow),
+    canVirtualize && virtualRange.end < visibleRows.length ? /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        "data-slot": "table-virtual-spacer-bottom",
+        style: { height: (visibleRows.length - virtualRange.end) * metrics.rowMinHeight }
+      }
+    ) : null,
+    showLoading ? /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        "data-slot": "table-loading",
+        className: (0, import_utils.classNames)(
+          "x-table__loading",
+          typeof loading === "object" && loading.className,
+          typeof loading === "object" && loading.wrapperClassName
+        ),
+        role: "status",
+        ariaRole: "status",
+        "aria-live": "polite",
+        style: {
+          boxSizing: "border-box",
+          display: "flex",
+          position: "absolute",
+          top: 0,
+          right: 0,
+          bottom: 0,
+          left: 0,
+          zIndex: 12,
+          minHeight: 160,
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: 12,
+          padding: 24,
+          backgroundColor: "var(--x-table-loading-surface)",
+          ...typeof loading === "object" ? loading.style : void 0
+        }
+      },
+      (typeof loading === "object" && loading.indicator) ?? /* @__PURE__ */ import_react.default.createElement(
+        import_icon.Icon,
+        {
+          name: "Loader2",
+          size: typeof loading === "object" && loading.size === "small" ? 16 : typeof loading === "object" && loading.size === "large" ? 28 : 20,
+          color: "var(--x-table-loading-spinner)",
+          spin: true,
+          block: true
+        }
+      ),
+      renderNode(loadingState.tip, {
+        fontSize: metrics.fontSize,
+        lineHeight: `${metrics.lineHeight}px`,
+        color: "var(--x-table-loading-foreground)"
+      })
+    ) : null
+  );
+  const paginationPositions = paginationEnabled ? ((_g = paginationConfig.placement) == null ? void 0 : _g.map(
+    (position) => position === "topStart" ? "topLeft" : position === "topEnd" ? "topRight" : position === "bottomStart" ? "bottomLeft" : position === "bottomEnd" ? "bottomRight" : position
+  )) ?? paginationConfig.position : void 0;
+  const showTopPagination = Boolean(
+    paginationEnabled && (paginationPositions == null ? void 0 : paginationPositions.some((position) => position.startsWith("top")))
+  );
+  const showBottomPagination = Boolean(
+    paginationEnabled && (!(paginationPositions == null ? void 0 : paginationPositions.length) || paginationPositions.some((position) => position.startsWith("bottom")))
+  );
+  const range = total === 0 || currentPageData.length === 0 ? [0, 0] : [(safeCurrent - 1) * pageSize + 1, (safeCurrent - 1) * pageSize + currentPageData.length];
+  const renderPagination = (placement) => {
+    if (!paginationEnabled) return null;
+    if (placement === "top" ? !showTopPagination : !showBottomPagination) return null;
+    const shouldShow = totalPages > 1 || paginationConfig.showTotal || paginationConfig.showSizeChanger;
+    if (!shouldShow) return null;
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        "data-slot": "table-pagination",
+        "data-placement": placement,
+        className: (0, import_utils.classNames)(
+          "x-table__pagination",
+          `x-table__pagination--${paginationVariant}`,
+          semanticClassNames.pagination
+        ),
+        style: {
+          boxSizing: "border-box",
+          display: "flex",
+          flexWrap: "wrap",
+          alignItems: "center",
+          justifyContent: (paginationPositions == null ? void 0 : paginationPositions.some((position) => position.endsWith("Center"))) ? "center" : (paginationPositions == null ? void 0 : paginationPositions.some((position) => position.endsWith("Left"))) ? "flex-start" : "flex-end",
+          gap: 12,
+          padding: paginationVariant === "section" ? 16 : "12px 0",
+          borderTop: placement === "bottom" && paginationVariant === "section" ? "1px solid var(--x-table-border)" : void 0,
+          borderBottom: placement === "top" && paginationVariant === "section" ? "1px solid var(--x-table-border)" : void 0,
+          backgroundColor: paginationVariant === "section" ? "var(--x-table-section-surface)" : "transparent",
+          ...semanticStyles.pagination
+        }
+      },
+      paginationConfig.showSizeChanger ? /* @__PURE__ */ import_react.default.createElement(import_components.View, { "data-slot": "table-page-size", style: { display: "flex", flexWrap: "wrap", gap: 4 } }, (paginationConfig.pageSizeOptions ?? [10, 20, 50, 100]).map((option) => /* @__PURE__ */ import_react.default.createElement(
+        import_components.View,
+        {
+          ...interactiveControlProps(
+            `page-size-${option}`,
+            () => changePagination(1, option)
+          ),
+          key: option,
+          "data-page-size": option,
+          "data-active": option === pageSize ? "true" : "false",
+          role: "button",
+          ariaRole: "button",
+          ariaLabel: `每页 ${option} 条`,
+          style: {
+            padding: "5px 8px",
+            border: "1px solid var(--x-table-border)",
+            borderRadius: "var(--x-table-toolbar-radius)",
+            backgroundColor: option === pageSize ? theme.colors.primary : "var(--x-table-section-surface)",
+            ...interactiveFocusStyle(`page-size-${option}`)
+          },
+          onClick: () => changePagination(1, option)
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          import_components.Text,
+          {
+            style: {
+              fontSize: 12,
+              lineHeight: "18px",
+              color: option === pageSize ? theme.colors["primary-foreground"] : "var(--x-table-body-foreground)"
+            }
+          },
+          option,
+          " / 页"
+        )
+      ))) : null,
+      paginationConfig.showTotal ? /* @__PURE__ */ import_react.default.createElement(import_components.View, { "data-slot": "table-pagination-total" }, renderNode(paginationConfig.showTotal(total, range), {
+        fontSize: metrics.fontSize,
+        lineHeight: `${metrics.lineHeight}px`,
+        color: "var(--x-table-section-foreground)"
+      })) : null,
+      totalPages > 1 ? /* @__PURE__ */ import_react.default.createElement(
+        import_pagination.Pagination,
+        {
+          current: safeCurrent,
+          total,
+          pageSize,
+          size: paginationConfig.size ?? size,
+          showQuickJumper: paginationConfig.showQuickJumper,
+          onChange: (page) => changePagination(page, pageSize)
+        }
+      ) : null
+    );
+  };
+  const titleContent = typeof title === "function" ? title(currentPageData) : title;
+  const summaryContent = typeof summary === "function" ? summary(currentPageData) : summary;
+  const footerContent = typeof footer === "function" ? footer(currentPageData) : footer;
+  const scrollHeight = toCssSize(scroll == null ? void 0 : scroll.y);
+  return /* @__PURE__ */ import_react.default.createElement(
+    import_components.View,
+    {
+      ref: rootRef,
+      "data-slot": "table-root",
+      "data-size": size,
+      "data-bordered": bordered ? "true" : "false",
+      "data-disabled": disabled ? "true" : "false",
+      "data-loading": showLoading ? "true" : "false",
+      "data-virtual": canVirtualize ? "true" : "false",
+      "data-testid": testID,
+      "aria-disabled": disabled,
+      "aria-busy": showLoading,
+      className: (0, import_utils.classNames)(
+        "x-table",
+        `x-table--${size}`,
+        bordered && "x-table--bordered",
+        semanticClassNames.root,
+        className
+      ),
+      style: {
+        boxSizing: "border-box",
+        position: "relative",
+        overflow: "hidden",
+        border: bordered ? "1px solid var(--x-table-border)" : "none",
+        borderRadius: "var(--x-table-root-radius)",
+        backgroundColor: "var(--x-table-surface)",
+        color: "var(--x-table-foreground)",
+        ...semanticStyles.root,
+        ...style
+      }
+    },
+    titleContent !== void 0 && titleContent !== null ? /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        "data-slot": "table-title",
+        className: (0, import_utils.classNames)("x-table__title", semanticClassNames.title),
+        style: {
+          boxSizing: "border-box",
+          display: "flex",
+          alignItems: "center",
+          minHeight: metrics.rowMinHeight,
+          padding: `${metrics.paddingY}px ${metrics.paddingX}px`,
+          borderBottom: "1px solid var(--x-table-border)",
+          backgroundColor: "var(--x-table-section-surface)",
+          color: "var(--x-table-section-foreground)",
+          ...semanticStyles.title
+        }
+      },
+      titleContent
+    ) : null,
+    renderPagination("top"),
+    /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        "data-slot": "table-container",
+        className: (0, import_utils.classNames)("x-table__container", semanticClassNames.container),
+        style: { position: "relative", minWidth: 0, ...semanticStyles.container }
+      },
+      /* @__PURE__ */ import_react.default.createElement(
+        import_components.ScrollView,
+        {
+          scrollX: true,
+          scrollY: (scroll == null ? void 0 : scroll.y) !== void 0,
+          scrollTop,
+          scrollIntoView: scrollTarget,
+          "data-slot": "table-scroll",
+          "data-scroll-top": scrollTop,
+          "data-scroll-target": scrollTarget,
+          style: { width: "100%", height: scrollHeight, maxHeight: scrollHeight },
+          onScroll: (event) => {
+            var _a2, _b2, _c2, _d2, _e2, _f2, _g2;
+            const scrollEvent = event;
+            const nextTop = ((_a2 = scrollEvent.detail) == null ? void 0 : _a2.scrollTop) ?? ((_b2 = scrollEvent.currentTarget) == null ? void 0 : _b2.scrollTop) ?? 0;
+            const nextLeft = ((_c2 = scrollEvent.detail) == null ? void 0 : _c2.scrollLeft) ?? ((_d2 = scrollEvent.currentTarget) == null ? void 0 : _d2.scrollLeft) ?? 0;
+            const scrollWidth = ((_e2 = scrollEvent.detail) == null ? void 0 : _e2.scrollWidth) ?? ((_f2 = scrollEvent.currentTarget) == null ? void 0 : _f2.scrollWidth) ?? 0;
+            const clientWidth = ((_g2 = scrollEvent.currentTarget) == null ? void 0 : _g2.clientWidth) ?? 0;
+            setVirtualScrollTop(nextTop);
+            setHorizontalScrollState({
+              canScrollLeft: nextLeft > 1,
+              canScrollRight: scrollWidth > 0 && clientWidth > 0 ? nextLeft + clientWidth < scrollWidth - 1 : Boolean(scroll == null ? void 0 : scroll.x)
+            });
+            onScroll == null ? void 0 : onScroll(event);
+          }
+        },
+        /* @__PURE__ */ import_react.default.createElement(
+          TableSurface,
+          {
+            "data-slot": "table-table",
+            "data-layout": tableLayout,
+            className: (0, import_utils.classNames)("x-table__table", semanticClassNames.table),
+            style: { position: "relative", minWidth: tableMinWidth, ...semanticStyles.table }
+          },
+          renderHeader(),
+          renderFilterPanel(),
+          renderSelectionActions(),
+          renderBody(),
+          summaryContent !== void 0 && summaryContent !== null ? /* @__PURE__ */ import_react.default.createElement(
+            import_components.View,
+            {
+              "data-slot": "table-summary",
+              style: {
+                boxSizing: "border-box",
+                minWidth: tableMinWidth,
+                padding: `${metrics.paddingY}px ${metrics.paddingX}px`,
+                borderTop: "1px solid var(--x-table-border)",
+                backgroundColor: "var(--x-table-row-surface-alt)"
+              }
+            },
+            renderNode(summaryContent, {
+              fontSize: metrics.fontSize,
+              lineHeight: `${metrics.lineHeight}px`,
+              color: "var(--x-table-body-foreground)"
+            })
+          ) : null
+        )
+      )
+    ),
+    footerContent !== void 0 && footerContent !== null ? /* @__PURE__ */ import_react.default.createElement(
+      import_components.View,
+      {
+        "data-slot": "table-footer",
+        className: (0, import_utils.classNames)("x-table__footer", semanticClassNames.footer),
+        style: {
+          boxSizing: "border-box",
+          display: "flex",
+          alignItems: "center",
+          minHeight: metrics.rowMinHeight,
+          padding: `${metrics.paddingY}px ${metrics.paddingX}px`,
+          borderTop: "1px solid var(--x-table-border)",
+          backgroundColor: "var(--x-table-section-surface)",
+          color: "var(--x-table-section-foreground)",
+          ...semanticStyles.footer
+        }
+      },
+      footerContent
+    ) : null,
+    renderPagination("bottom")
+  );
+}
+var ForwardTable = (0, import_react.forwardRef)(InternalTable);
+var Table = ForwardTable;
+Table.Column = TableColumn;
+Table.ColumnGroup = TableColumnGroup;
+var table_default = Table;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TableColumn,
+  TableColumnGroup
+});