@vtable-guild/vtable-guild 2.4.1 → 2.6.0

package/dist/table/src/components/Table.mjs

@@ -1,41 +1,45 @@
-import { defineComponent as Et, inject as Rt, computed as n, provide as de, ref as E, onMounted as It, onBeforeUnmount as Tt, watch as j, createVNode as a, Fragment as Lt, isVNode as Ht } from "vue";
+import { defineComponent as Nt, inject as Ft, computed as n, provide as ye, ref as T, onMounted as Ot, onBeforeUnmount as Pt, watch as b, createVNode as a, Fragment as zt, isVNode as At } from "vue";
 import "../../../core/src/utils/tv.mjs";
-import { prefixVtgClassNames as R } from "../../../core/src/utils/classPrefix.mjs";
-import { mergeThemeConfigs as C, useTheme as Nt } from "../../../core/src/composables/useTheme.mjs";
-import { mergeDeep as I } from "../../../core/src/utils/mergeDeep.mjs";
-import ie from "../../../core/src/components/Scrollbar.mjs";
-import { VTABLE_GUILD_INJECTION_KEY as se } from "../../../core/src/plugin/index.mjs";
-import { resolveTooltipThemePreset as Bt, resolveScrollbarThemePreset as Ot, resolveRadioThemePreset as Pt, resolveInputThemePreset as zt, resolveCheckboxThemePreset as At, resolveButtonThemePreset as Ft, resolveTableThemePreset as Kt, resolveTableLocalePreset as Wt, resolveBuiltInTableLocale as _t } from "../../../theme/src/presets/index.mjs";
-import { getEllipsisConfig as kt } from "../utils/cell.mjs";
-import { useScroll as jt } from "../composables/useScroll.mjs";
-import { useExpand as Mt } from "../composables/useExpand.mjs";
-import { useResize as Vt } from "../composables/useResize.mjs";
-import { useVirtual as Ut } from "../composables/useVirtual.mjs";
-import { useTreeData as Gt } from "../composables/useTreeData.mjs";
-import { useHoverState as Yt } from "../composables/useHoverState.mjs";
-import { TABLE_CONTEXT_KEY as Xt } from "../context.mjs";
-import { EXPAND_COLUMN as $t, SELECTION_COLUMN as Jt } from "../constants.mjs";
-import { resolveTablePresetConfig as qt } from "../preset-config.mjs";
-import ue from "./TableHeader.mjs";
-import ce from "./TableBody.mjs";
-import Qt from "./VirtualTableBody.mjs";
-import fe from "./TableLoading.mjs";
-import T from "./ColGroup.mjs";
-import { antdvTableTheme as Zt } from "../../../theme/src/presets/antdv/table.mjs";
-import { useColumns as pe } from "../composables/useColumns.mjs";
-import { useSorter as el } from "../composables/useSorter.mjs";
-import { useFilter as tl } from "../composables/useFilter.mjs";
-import { useSelection as ll } from "../composables/useSelection.mjs";
-import { cn as L } from "tailwind-variants";
-function me(l) {
-  return typeof l == "function" || Object.prototype.toString.call(l) === "[object Object]" && !Ht(l);
+import { prefixVtgClassNames as H } from "../../../core/src/utils/classPrefix.mjs";
+import { mergeThemeConfigs as x, useTheme as Kt } from "../../../core/src/composables/useTheme.mjs";
+import { mergeDeep as L } from "../../../core/src/utils/mergeDeep.mjs";
+import he from "../../../core/src/components/Scrollbar.mjs";
+import { VTABLE_GUILD_INJECTION_KEY as Ce } from "../../../core/src/plugin/index.mjs";
+import { resolveTooltipThemePreset as Wt, resolveScrollbarThemePreset as kt, resolveRadioThemePreset as _t, resolveInputThemePreset as Mt, resolveCheckboxThemePreset as jt, resolveButtonThemePreset as Vt, resolveTableThemePreset as Ut, resolveTableLocalePreset as Gt, resolveBuiltInTableLocale as Yt } from "../../../theme/src/presets/index.mjs";
+import { antdvTableCompatClasses as Xt } from "../../../theme/src/compat/antdv-table.mjs";
+import { getEllipsisConfig as $t } from "../utils/cell.mjs";
+import { getRootCompatClass as Jt } from "../utils/compat.mjs";
+import { useScroll as qt } from "../composables/useScroll.mjs";
+import { useColumnMetrics as Qt } from "../composables/useColumnMetrics.mjs";
+import { resolveFixedColumnRanges as Zt } from "../composables/useColumnWindow.mjs";
+import { useExpand as el } from "../composables/useExpand.mjs";
+import { useResize as tl } from "../composables/useResize.mjs";
+import { useVirtual as ll } from "../composables/useVirtual.mjs";
+import { useTreeData as ol } from "../composables/useTreeData.mjs";
+import { useHoverState as nl } from "../composables/useHoverState.mjs";
+import { TABLE_CONTEXT_KEY as al } from "../context.mjs";
+import { EXPAND_COLUMN as rl, SELECTION_COLUMN as dl } from "../constants.mjs";
+import { resolveTablePresetConfig as il } from "../preset-config.mjs";
+import xe from "./TableHeader.mjs";
+import ge from "./TableBody.mjs";
+import sl from "./VirtualTableBody.mjs";
+import Se from "./TableLoading.mjs";
+import B from "./ColGroup.mjs";
+import { antdvTableTheme as ul } from "../../../theme/src/presets/antdv/table.mjs";
+import { useColumns as be } from "../composables/useColumns.mjs";
+import { useSorter as cl } from "../composables/useSorter.mjs";
+import { useFilter as fl } from "../composables/useFilter.mjs";
+import { useSelection as ml } from "../composables/useSelection.mjs";
+import { cn as g } from "tailwind-variants";
+function Re(l) {
+  return typeof l == "function" || Object.prototype.toString.call(l) === "[object Object]" && !At(l);
 }
-const ol = [["xxxl", 2e3], ["xxl", 1600], ["xl", 1200], ["lg", 992], ["md", 768], ["sm", 576], ["xs", 0]];
-function we() {
+const pl = [["xxxl", 2e3], ["xxl", 1600], ["xl", 1200], ["lg", 992], ["md", 768], ["sm", 576], ["xs", 0]];
+function De() {
   if (typeof window > "u")
     return /* @__PURE__ */ new Set(["md", "sm", "xs"]);
   const l = window.innerWidth, d = /* @__PURE__ */ new Set();
-  return ol.forEach(([i, r]) => {
+  return pl.forEach(([i, r]) => {
     if (i === "xs") {
       l < 576 && d.add("xs");
       return;
@@ -43,28 +47,28 @@ function we() {
     l >= r && d.add(i);
   }), d;
 }
-function ye(l, d) {
+function Ee(l, d) {
   return l.reduce((i, r) => {
     if (typeof r == "symbol")
       return i.push(r), i;
     if (r.responsive?.length && !r.responsive.some((w) => d.has(w)))
       return i;
-    const m = r.fixed === !0 ? "left" : r.fixed;
+    const v = r.fixed === !0 ? "left" : r.fixed;
     if ("children" in r && Array.isArray(r.children)) {
-      const w = ye(r.children, d);
+      const w = Ee(r.children, d);
       return w.length === 0 || i.push({
         ...r,
-        fixed: m,
+        fixed: v,
         children: w
       }), i;
     }
-    return i.push(m === r.fixed ? r : {
+    return i.push(v === r.fixed ? r : {
       ...r,
-      fixed: m
+      fixed: v
     }), i;
   }, []);
 }
-const Ol = /* @__PURE__ */ Et({
+const $l = /* @__PURE__ */ Nt({
   name: "VTable",
   props: {
     dataSource: {
@@ -187,6 +191,36 @@ const Ol = /* @__PURE__ */ Et({
       type: Boolean,
       default: !1
     },
+    /**
+     * 固定行高（px），仅在 `virtual` 下生效。
+     *
+     * 声明后表格进入**定高快路径**：跳过全部行高测量，可视区计算恒为 O(1)，
+     * 挂载与滚动不再随总行数增长。前提是每行实际高度确实等于该值——
+     * 若行内有换行文本、`ellipsis: false` 的长内容或自定义高度渲染，请**不要**传，
+     * 交给默认的实测路径。dev 构建会实测首行并在不符时告警。
+     */
+    rowHeight: {
+      type: Number,
+      default: void 0
+    },
+    /**
+     * 横向虚拟化：只渲染视口内的列，仅在 `virtual` 下生效，默认关闭。
+     *
+     * 开启后可见单元格数从「行 × 总列数」降到「行 × 可视列数」。列数很多
+     * （百列量级）时这是唯一能真正降低耗时的手段——`TableCell` 的组件实例数
+     * 就是宽表的瓶颈本身。列数不多时收益为零，还多一次表头测量，所以默认关闭。
+     *
+     * 以下情况会被忽略（dev 构建给出告警），表体回落到渲染全部列：
+     * - 未开启 `virtual`
+     * - 列上有 `customCell` / `customRender`（可能返回 colSpan / rowSpan，
+     *   单元格合并会破坏列宽不变量，虚拟模式本就不支持）
+     * - 固定列没有分别待在两端
+     * - `showHeader: false` 且存在非数字列宽（没有表头可量，也算不出来）
+     */
+    virtualColumn: {
+      type: Boolean,
+      default: !1
+    },
     childrenColumnName: {
       type: String,
       default: void 0
@@ -225,30 +259,30 @@ const Ol = /* @__PURE__ */ Et({
     slots: d,
     emit: i
   }) {
-    const r = Rt(se, null), m = n(() => r?.themePreset ?? "antdv"), w = n(() => r?.cssMode ?? "prebuilt"), x = n(() => r?.classPrefix ?? "vtg"), ve = n(() => {
-      const t = r?.theme ?? {}, o = m.value;
+    const r = Ft(Ce, null), v = n(() => r?.themePreset ?? "antdv"), w = n(() => r?.cssMode ?? "prebuilt"), C = n(() => r?.classPrefix ?? "vtg"), Ie = n(() => {
+      const t = r?.theme ?? {}, o = v.value;
       return {
         ...t,
-        button: C(Ft(o), t.button),
-        checkbox: C(At(o), t.checkbox),
-        input: C(zt(o), t.input),
-        radio: C(Pt(o), t.radio),
-        scrollbar: C(Ot(o), t.scrollbar),
-        tooltip: C(Bt(o), t.tooltip)
+        button: x(Vt(o), t.button),
+        checkbox: x(jt(o), t.checkbox),
+        input: x(Mt(o), t.input),
+        radio: x(_t(o), t.radio),
+        scrollbar: x(kt(o), t.scrollbar),
+        tooltip: x(Wt(o), t.tooltip)
       };
     });
-    de(se, {
+    ye(Ce, {
       get themePreset() {
-        return m.value;
+        return v.value;
       },
       get cssMode() {
         return w.value;
       },
       get classPrefix() {
-        return x.value;
+        return C.value;
       },
       get theme() {
-        return ve.value;
+        return Ie.value;
       },
       get locale() {
         return r?.locale ?? "zh-CN";
@@ -260,176 +294,184 @@ const Ol = /* @__PURE__ */ Et({
         return r?.localeOverrides ?? {};
       }
     });
-    const he = n(() => Kt(m.value) ?? Zt), {
+    const Te = n(() => Ut(v.value) ?? ul), {
       slots: e
-    } = Nt("table", he, l), H = n(() => l.locale ?? r?.locale ?? "zh-CN"), xe = n(() => ({
+    } = Kt("table", Te, l, {
+      compatClasses: Xt
+    }), V = r?.compatClass === !0 ? (t) => `ant-table-${t}` : void 0, N = n(() => l.locale ?? r?.locale ?? "zh-CN"), He = n(() => ({
       ...r?.locales ?? {},
       ...l.locales ?? {}
-    })), Ce = n(() => {
-      const t = Wt(m.value), o = _t(m.value, H.value), u = xe.value[H.value]?.table, s = I(I(t, o), u);
-      return I(s, I(r?.localeOverrides?.table ?? {}, l.localeOverrides));
-    }), M = E(we());
-    function N() {
-      M.value = we();
+    })), Le = n(() => {
+      const t = Gt(v.value), o = Yt(v.value, N.value), u = He.value[N.value]?.table, s = L(L(t, o), u);
+      return L(s, L(r?.localeOverrides?.table ?? {}, l.localeOverrides));
+    }), U = T(De());
+    function F() {
+      U.value = De();
     }
-    It(() => {
-      N(), window.addEventListener("resize", N);
-    }), Tt(() => {
-      window.removeEventListener("resize", N);
+    Ot(() => {
+      F(), window.addEventListener("resize", F);
+    }), Pt(() => {
+      window.removeEventListener("resize", F);
     });
-    const V = n(() => ye(l.columns, M.value)), g = n(() => l.sticky === !0 ? {} : typeof l.sticky == "object" ? l.sticky : void 0), {
-      leafColumns: b
-    } = pe(() => V.value), {
-      getSortOrder: B,
-      toggleSortOrder: Se,
-      sortData: ge,
-      sorterState: be,
-      sorterResult: U,
-      sortColumns: De
-    } = el({
-      columns: () => b.value,
+    const G = n(() => Ee(l.columns, U.value)), R = n(() => l.sticky === !0 ? {} : typeof l.sticky == "object" ? l.sticky : void 0), {
+      leafColumns: D
+    } = be(() => G.value), {
+      getSortOrder: O,
+      toggleSortOrder: Be,
+      sortData: Ne,
+      sorterState: Fe,
+      sorterResult: Y,
+      sortColumns: Oe
+    } = cl({
+      columns: () => D.value,
       tableSortDirections: () => l.sortDirections,
       onSorterChange(t) {
-        const o = P();
-        i("change", O(), t, {
+        const o = z();
+        i("change", P(), t, {
           action: "sort",
           currentDataSource: o
         });
       }
     }), {
-      getFilteredValue: Ee,
-      confirmFilter: Re,
-      resetFilter: Ie,
-      getAllFilters: O,
-      filterData: Te
-    } = tl({
-      columns: () => b.value,
+      getFilteredValue: Pe,
+      confirmFilter: ze,
+      resetFilter: Ae,
+      getAllFilters: P,
+      filterData: Ke
+    } = fl({
+      columns: () => D.value,
       onFilterChange(t) {
-        const o = P();
-        i("change", t, U.value, {
+        const o = z();
+        i("change", t, Y.value, {
           action: "filter",
           currentDataSource: o
         });
       }
     });
-    function P() {
+    function z() {
       let t = l.dataSource;
-      return t = Te(t), t = ge(t), t;
+      return t = Ke(t), t = Ne(t), t;
     }
-    const z = n(() => P());
-    function D(t, o) {
+    const A = n(() => z());
+    function E(t, o) {
       return typeof l.rowKey == "function" ? l.rowKey(t) : typeof l.rowKey == "string" && l.rowKey in t ? t[l.rowKey] : o;
     }
     const {
-      flattenData: G,
-      rowMetaMap: Y,
-      isTreeData: A,
-      toggleTreeExpand: Le,
-      isTreeExpanded: He,
-      indentSize: Ne
-    } = Gt({
-      data: () => z.value,
+      flattenData: X,
+      rowMetaMap: $,
+      isTreeData: K,
+      toggleTreeExpand: We,
+      isTreeExpanded: ke,
+      indentSize: _e
+    } = ol({
+      data: () => A.value,
       childrenColumnName: () => l.childrenColumnName,
       indentSize: () => l.indentSize,
-      getRowKey: D,
+      getRowKey: E,
       defaultExpandedRowKeys: () => l.defaultExpandedRowKeys,
       expandedRowKeys: () => l.expandedRowKeys,
       defaultExpandAllRows: () => l.defaultExpandAllRows,
       onExpand: l.onExpand,
       onExpandedRowsChange: l.onExpandedRowsChange
     }), {
-      hoverRange: Be,
-      setHoverRange: Oe,
-      clearHoverRange: Pe
-    } = Yt(100), v = n(() => A.value ? G.value.map((t) => t.record) : z.value), {
-      isSelected: ze,
-      isDisabled: Ae,
-      getSelectionState: Fe,
-      toggleRow: Ke,
-      toggleAll: We,
-      allCheckedState: _e,
-      invertSelection: ke,
-      clearSelection: je,
-      getChangeableRowKeys: Me
-    } = ll({
+      hoverRange: Me,
+      setHoverRange: je,
+      clearHoverRange: Ve
+    } = nl(100), y = n(() => K.value ? X.value.map((t) => t.record) : A.value), {
+      isSelected: Ue,
+      isDisabled: Ge,
+      getSelectionState: Ye,
+      toggleRow: Xe,
+      toggleAll: $e,
+      allCheckedState: Je,
+      invertSelection: qe,
+      clearSelection: Qe,
+      getChangeableRowKeys: Ze
+    } = ml({
       rowSelection: () => l.rowSelection,
-      getRowKey: D,
-      data: () => z.value,
-      visibleData: () => v.value,
+      getRowKey: E,
+      data: () => A.value,
+      visibleData: () => y.value,
       childrenColumnName: () => l.childrenColumnName,
       onSelectionChange() {
-        i("change", O(), U.value, {
+        i("change", P(), Y.value, {
           action: "select",
-          currentDataSource: v.value
+          currentDataSource: y.value
         });
       }
     }), {
-      isExpanded: Ve,
-      toggleExpand: Ue
-    } = Mt({
+      isExpanded: et,
+      toggleExpand: tt
+    } = el({
       expandable: () => l.expandable,
-      getRowKey: D,
-      data: () => v.value
-    }), X = (t) => {
+      getRowKey: E,
+      data: () => y.value
+    }), J = (t) => {
       const o = l.expandable;
       return o ? o.rowExpandable ? o.rowExpandable(t) : !!o.expandedRowRender : !1;
-    }, Ge = (t, o) => {
-      X(t) && Ue(t, o);
-    }, Ye = "__vtg_selection__", Xe = "__vtg_expand__", $e = n(() => {
+    }, lt = (t, o) => {
+      J(t) && tt(t, o);
+    }, ot = "__vtg_selection__", nt = "__vtg_expand__", at = n(() => {
       const t = l.expandable, o = l.rowSelection, u = t && t.showExpandColumn !== !1 ? {
-        key: Xe,
+        key: nt,
         title: "",
         width: t.columnWidth ?? 48,
         align: "center",
         fixed: t.fixed === !0 ? "left" : t.fixed
       } : null, s = o ? {
-        key: Ye,
+        key: ot,
         title: "",
         width: o.columnWidth ?? 48,
         align: "center",
         fixed: o.fixed === !0 ? "left" : o.fixed || void 0
       } : null, h = [];
-      let f = !1, p = !1;
-      for (const c of V.value) {
-        if (c === $t) {
-          u && !f && (h.push(u), f = !0);
+      let m = !1, p = !1;
+      for (const c of G.value) {
+        if (c === rl) {
+          u && !m && (h.push(u), m = !0);
           continue;
         }
-        if (c === Jt) {
+        if (c === dl) {
           s && !p && (h.push(s), p = !0);
           continue;
         }
         h.push(c);
       }
-      return u && !f && h.unshift(u), s && !p && h.unshift(s), h;
+      return u && !m && h.unshift(u), s && !p && h.unshift(s), h;
     }), {
-      leafColumns: y,
-      headerRows: F
-    } = pe(() => $e.value), Je = n(() => F.value.length > 1), {
-      headerWrapRef: qe,
-      bodyWrapRef: $,
-      scrollState: Qe,
-      handleBodyScroll: J,
-      fixedOffsets: Ze,
-      syncHorizontalScroll: et
-    } = jt({
-      displayColumns: () => y.value
-    }), tt = n(() => l.showHeader !== !1 && (!!l.scroll?.y || !!l.sticky)), q = n(() => y.value.some((t) => t.fixed === "left" || t.fixed === "right")), lt = n(() => b.value.some((t) => kt(t).enabled)), ot = n(() => l.scroll?.x !== void 0 || q.value), Q = n(() => l.tableLayout ? l.tableLayout : l.scroll?.y || l.scroll?.x || q.value || lt.value ? "fixed" : "auto"), nt = n(() => {
-      if (g.value)
+      leafColumns: f,
+      headerRows: W
+    } = be(() => at.value), rt = n(() => W.value.length > 1), {
+      headerWrapRef: q,
+      bodyWrapRef: Q,
+      scrollState: Z,
+      handleBodyScroll: ee,
+      fixedOffsets: te,
+      syncHorizontalScroll: dt
+    } = qt({
+      displayColumns: () => f.value
+    }), le = n(() => Jt({
+      compatClass: V,
+      fixedOffsets: te,
+      scrollState: Z
+    })), it = n(() => l.showHeader !== !1 && (!!l.scroll?.y || !!l.sticky)), oe = n(() => f.value.some((t) => t.fixed === "left" || t.fixed === "right")), st = n(() => D.value.some((t) => $t(t).enabled)), ut = n(() => l.scroll?.x !== void 0 || oe.value), ne = n(() => l.tableLayout ? l.tableLayout : l.scroll?.y || l.scroll?.x || oe.value || st.value ? "fixed" : "auto"), ct = n(() => {
+      if (R.value)
         return {
           position: "sticky",
-          top: `${g.value.offsetHeader ?? 0}px`,
+          top: `${R.value.offsetHeader ?? 0}px`,
           zIndex: "4"
         };
     }), {
-      enabled: K,
-      itemHeight: at,
-      listHeight: rt
-    } = Ut({
+      enabled: I,
+      itemHeight: ft,
+      listHeight: mt,
+      fixedHeight: pt
+    } = ll({
       virtual: () => l.virtual,
       scrollY: () => l.scroll?.y,
-      size: () => l.size
-    }), dt = n(() => b.value.some((t) => !!t.customCell || !!t.customRender)), W = n(() => !Je.value || l.bordered ? {
+      size: () => l.size,
+      rowHeight: () => l.rowHeight
+    }), ae = n(() => D.value.some((t) => !!t.customCell || !!t.customRender)), k = n(() => !rt.value || l.bordered ? {
       table: "",
       th: "",
       td: ""
@@ -437,56 +479,74 @@ const Ol = /* @__PURE__ */ Et({
       table: e.groupedHeaderTable(),
       th: e.groupedHeaderTh(),
       td: e.groupedHeaderTd()
-    }), S = n(() => L(e.table(), W.value.table) ?? ""), Z = n(() => L(e.th(), W.value.th) ?? ""), _ = n(() => L(e.td(), W.value.td) ?? "");
-    j([K, dt], ([t, o]) => {
+    }), S = n(() => g(e.table(), k.value.table) ?? ""), re = n(() => g(e.th(), k.value.th) ?? ""), _ = n(() => g(e.td(), k.value.td) ?? "");
+    b([I, ae], ([t, o]) => {
     }, {
       immediate: !0
     });
-    const ee = E(null), te = E(null);
-    j(() => ee.value?.wrapRef, (t) => {
-      t && ($.value = t);
-    }), j(() => te.value?.wrapRef, (t) => {
-      t && ($.value = t);
+    const de = T(null), ie = T(null);
+    b(() => de.value?.wrapRef, (t) => {
+      t && (Q.value = t);
+    }), b(() => ie.value?.wrapRef, (t) => {
+      t && (Q.value = t);
     });
     const {
-      columnWidths: it,
-      startResize: st,
-      isResizing: ut
-    } = Vt({
+      columnWidths: se,
+      startResize: vt,
+      isResizing: wt
+    } = tl({
       onResizeColumn(t, o) {
         i("resizeColumn", t, o);
       }
+    }), yt = n(() => Zt(f.value)), ue = n(() => l.virtualColumn ? I.value ? ae.value ? "列上有 customCell / customRender，可能返回 colSpan / rowSpan；单元格合并会让某个 td 缺席，进而破坏列宽不变量（虚拟模式本就不支持合并）" : yt.value.contiguous ? null : "固定列必须分列两端：左固定连成前缀、右固定连成后缀，中间夹着的固定列会被窗口跳过" : "它只作用于虚拟表体，需要同时开启 virtual 与 scroll.y" : null), M = n(() => l.virtualColumn && ue.value === null);
+    b(ue, (t) => {
+    }, {
+      immediate: !0
+    });
+    const {
+      metrics: ce
+    } = Qt({
+      enabled: () => M.value,
+      headerEl: () => q.value,
+      columns: () => f.value,
+      columnWidths: se,
+      hasHeader: () => l.showHeader !== !1
+    });
+    b([M, ce], ([t, o]) => {
+      !t || o || l.showHeader;
+    }, {
+      immediate: !0
     });
-    function ct(t) {
-      return A.value ? Y.value.get(t)?.level ?? 0 : 0;
+    function ht(t) {
+      return K.value ? $.value.get(t)?.level ?? 0 : 0;
     }
-    function ft(t, o) {
-      return l.rowClassName ? typeof l.rowClassName == "function" ? l.rowClassName(t, o, ct(t)) : l.rowClassName : "";
+    function Ct(t, o) {
+      return l.rowClassName ? typeof l.rowClassName == "function" ? l.rowClassName(t, o, ht(t)) : l.rowClassName : "";
     }
-    function pt(t, o) {
+    function xt(t, o) {
       return l.customRow?.(t, o);
     }
-    function mt(t, o) {
+    function gt(t, o) {
       return l.customHeaderRow?.(t, o);
     }
-    function wt(t) {
+    function St(t) {
       if (typeof t.title != "function")
         return t.title ?? "";
-      const o = t, u = De.value.filter((s) => !!s.column);
+      const o = t, u = Oe.value.filter((s) => !!s.column);
       return t.title({
-        sortOrder: o.sorter ? B(o) ?? void 0 : void 0,
-        sortColumn: be.value.column,
+        sortOrder: o.sorter ? O(o) ?? void 0 : void 0,
+        sortColumn: Fe.value.column,
         sortColumns: u.length > 0 ? u : void 0,
-        filters: O()
+        filters: P()
       });
     }
-    function yt(t) {
-      return !!(t.sorter && B(t));
+    function bt(t) {
+      return !!(t.sorter && O(t));
     }
-    const le = {
+    const fe = {
       width: "100%",
       minWidth: "100%"
-    }, vt = {
+    }, Rt = {
       thSortable: e.thSortable,
       thSorted: e.thSorted,
       tdSorted: e.tdSorted,
@@ -563,113 +623,114 @@ const Ol = /* @__PURE__ */ Et({
       resizeHandle: e.resizeHandle,
       tdRowHover: e.tdRowHover,
       tdRowSelectedHover: e.tdRowSelectedHover
-    }, oe = n(() => qt(m.value)), ne = E(!1);
-    return de(Xt, {
+    }, me = n(() => il(v.value)), pe = T(!1);
+    return ye(al, {
       bodyCell: d.bodyCell,
       headerCell: d.headerCell,
       empty: d.empty,
-      getSortOrder: B,
-      toggleSortOrder: Se,
-      isColumnSorted: yt,
-      getFilteredValue: Ee,
-      confirmFilter: Re,
-      resetFilter: Ie,
+      getSortOrder: O,
+      toggleSortOrder: Be,
+      isColumnSorted: bt,
+      getFilteredValue: Pe,
+      confirmFilter: ze,
+      resetFilter: Ae,
       customFilterDropdown: d.customFilterDropdown,
       customFilterIcon: d.customFilterIcon,
-      showSorterTooltip: n(() => l.showSorterTooltip ?? oe.value.showSorterTooltip),
+      showSorterTooltip: n(() => l.showSorterTooltip ?? me.value.showSorterTooltip),
       headerEllipsis: n(() => l.headerEllipsis),
-      subThemeSlots: vt,
-      presetConfig: oe,
-      themePreset: m,
+      subThemeSlots: Rt,
+      presetConfig: me,
+      themePreset: v,
       cssMode: w,
-      classPrefix: x,
-      vtgClass: (t) => R(t, w.value, x.value),
-      localeName: H,
-      locale: Ce,
+      classPrefix: C,
+      vtgClass: (t) => H(t, w.value, C.value),
+      compatClass: V,
+      localeName: N,
+      locale: Le,
       rowSelection: () => l.rowSelection,
-      isSelected: ze,
-      isDisabledRow: Ae,
-      getSelectionState: Fe,
-      toggleRow: Ke,
-      toggleAll: We,
-      allCheckedState: () => _e.value,
-      getRowKey: D,
-      invertSelection: ke,
-      clearSelection: je,
-      getChangeableRowKeys: Me,
-      fixedOffsets: Ze,
-      scrollState: Qe,
-      leafColumnCount: n(() => y.value.length),
+      isSelected: Ue,
+      isDisabledRow: Ge,
+      getSelectionState: Ye,
+      toggleRow: Xe,
+      toggleAll: $e,
+      allCheckedState: () => Je.value,
+      getRowKey: E,
+      invertSelection: qe,
+      clearSelection: Qe,
+      getChangeableRowKeys: Ze,
+      fixedOffsets: te,
+      scrollState: Z,
+      leafColumnCount: n(() => f.value.length),
       bordered: n(() => l.bordered),
-      tableLayout: Q,
+      tableLayout: ne,
       sticky: n(() => l.sticky),
-      getRowProps: pt,
-      getRowClassName: ft,
-      getHeaderRowProps: mt,
-      getColumnTitle: wt,
+      getRowProps: xt,
+      getRowClassName: Ct,
+      getHeaderRowProps: gt,
+      getColumnTitle: St,
       getPopupContainer: l.getPopupContainer,
       transformCellText: l.transformCellText,
       expandable: () => l.expandable,
-      isExpanded: Ve,
-      toggleExpand: Ge,
-      isRowExpandable: X,
-      columnWidths: it,
-      startResize: st,
-      isResizing: () => ut.value,
-      displayColumns: n(() => y.value),
+      isExpanded: et,
+      toggleExpand: lt,
+      isRowExpandable: J,
+      columnWidths: se,
+      startResize: vt,
+      isResizing: () => wt.value,
+      displayColumns: n(() => f.value),
       registerSummaryFixed: (t) => {
-        ne.value = t;
+        pe.value = t;
       },
-      isTreeData: A,
-      treeFlattenData: G,
-      getFlattenRow: (t) => Y.value.get(t),
-      toggleTreeExpand: Le,
-      isTreeExpanded: He,
-      treeIndentSize: Ne,
-      hoverRange: Be,
-      setHoverRange: Oe,
-      clearHoverRange: Pe,
+      isTreeData: K,
+      treeFlattenData: X,
+      getFlattenRow: (t) => $.value.get(t),
+      toggleTreeExpand: We,
+      isTreeExpanded: ke,
+      treeIndentSize: _e,
+      hoverRange: Me,
+      setHoverRange: je,
+      clearHoverRange: Ve,
       hoverable: n(() => l.hoverable !== !1)
     }), () => {
       let t;
-      const o = l.title ? l.title(v.value) : d.title ? d.title({
-        data: v.value
-      }) : null, u = l.footer ? l.footer(v.value) : d.footer ? d.footer({
-        data: v.value
-      }) : null, s = d.summary ? d.summary() : null, h = ne.value !== !1, f = l.scroll, p = {
-        tableLayout: Q.value
+      const o = l.title ? l.title(y.value) : d.title ? d.title({
+        data: y.value
+      }) : null, u = l.footer ? l.footer(y.value) : d.footer ? d.footer({
+        data: y.value
+      }) : null, s = d.summary ? d.summary() : null, h = pe.value !== !1, m = l.scroll, p = {
+        tableLayout: ne.value
       };
-      f?.x ? (p.width = typeof f.x == "number" ? `${f.x}px` : f.x, p.minWidth = "100%") : p.width = ot.value ? "max-content" : "100%";
-      const c = l.loading, ht = c === !0 || typeof c == "object" && c !== null && c.spinning !== !1, xt = typeof c == "object" && c !== null ? c.indicator : void 0, Ct = typeof c == "object" && c !== null ? c.tip : void 0, ae = ht && (d.loading ? a(fe, {
+      m?.x ? (p.width = typeof m.x == "number" ? `${m.x}px` : m.x, p.minWidth = "100%") : p.width = ut.value ? "max-content" : "100%";
+      const c = l.loading, Dt = c === !0 || typeof c == "object" && c !== null && c.spinning !== !1, Et = typeof c == "object" && c !== null ? c.indicator : void 0, It = typeof c == "object" && c !== null ? c.tip : void 0, ve = Dt && (d.loading ? a(Se, {
         loadingClass: e.loading()
-      }, me(t = d.loading()) ? t : {
+      }, Re(t = d.loading()) ? t : {
         default: () => [t]
-      }) : a(fe, {
+      }) : a(Se, {
         loadingClass: e.loading(),
-        indicator: xt,
-        tip: Ct
+        indicator: Et,
+        tip: It
       }, null));
-      if (tt.value) {
-        const St = l.showHeader !== !1 ? a("div", {
-          ref: qe,
+      if (it.value) {
+        const Tt = l.showHeader !== !1 ? a("div", {
+          ref: q,
           class: e.headerWrapper(),
-          style: nt.value
+          style: ct.value
         }, [a("div", {
-          class: R("block w-full min-w-full", w.value, x.value)
+          class: H("block w-full min-w-full", w.value, C.value)
         }, [a("table", {
           class: S.value,
           style: p
-        }, [a(T, {
-          columns: y.value
-        }, null), a(ue, {
-          rows: F.value,
+        }, [a(B, {
+          columns: f.value
+        }, null), a(xe, {
+          rows: W.value,
           theadClass: e.thead(),
           rowClass: e.tr(),
-          thClass: Z.value,
+          thClass: re.value,
           headerCellInnerClass: e.headerCellInner()
-        }, null)])])]) : null, gt = K.value ? a(Qt, {
-          dataSource: v.value,
-          columns: y.value,
+        }, null)])])]) : null, Ht = I.value ? a(sl, {
+          dataSource: y.value,
+          columns: f.value,
           tbodyClass: e.tbody(),
           rowClass: e.tr(),
           tdClass: _.value,
@@ -678,27 +739,30 @@ const Ol = /* @__PURE__ */ Et({
           tableClass: S.value,
           tableStyle: p,
           rowKey: l.rowKey,
-          height: rt.value,
-          itemHeight: at.value,
+          height: mt.value,
+          itemHeight: ft.value,
+          fixedHeight: pt.value,
+          virtualColumn: M.value,
+          columnMetrics: ce.value,
           showScrollBar: "hover",
-          onVirtualScroll: (re) => {
-            et(re.x, re.maxX);
+          onVirtualScroll: (we) => {
+            dt(we.x, we.maxX);
           }
-        }, null) : null, bt = K.value ? null : a(ie, {
-          ref: ee,
-          maxHeight: f?.y !== void 0 ? typeof f.y == "number" ? f.y : String(f.y) : void 0,
+        }, null) : null, Lt = I.value ? null : a(he, {
+          ref: de,
+          maxHeight: m?.y !== void 0 ? typeof m.y == "number" ? m.y : String(m.y) : void 0,
           wrapClass: e.bodyWrapper(),
-          viewStyle: le,
-          onScroll: J
+          viewStyle: fe,
+          onScroll: ee
         }, {
           default: () => [a("table", {
             class: S.value,
             style: p
-          }, [a(T, {
-            columns: y.value
-          }, null), a(ce, {
-            dataSource: v.value,
-            columns: y.value,
+          }, [a(B, {
+            columns: f.value
+          }, null), a(ge, {
+            dataSource: y.value,
+            columns: f.value,
             tbodyClass: e.tbody(),
             rowClass: e.tr(),
             tdClass: _.value,
@@ -708,48 +772,48 @@ const Ol = /* @__PURE__ */ Et({
           }, null), s && !h && a("tfoot", {
             class: e.summary()
           }, [s])])]
-        }), Dt = s && h ? a("div", {
+        }), Bt = s && h ? a("div", {
           class: e.headerWrapper(),
           style: {
             position: "sticky",
-            bottom: `${g.value?.offsetSummary ?? 0}px`,
+            bottom: `${R.value?.offsetSummary ?? 0}px`,
             zIndex: "4",
             overflow: "hidden"
           }
         }, [a("div", {
-          class: R("block w-full min-w-full", w.value, x.value)
+          class: H("block w-full min-w-full", w.value, C.value)
         }, [a("table", {
           class: S.value,
           style: p
-        }, [a(T, {
-          columns: y.value
+        }, [a(B, {
+          columns: f.value
         }, null), a("tfoot", {
           class: e.summary()
         }, [s])])])]) : null;
         return a("div", {
-          class: e.root()
+          class: g(e.root(), le.value)
         }, [o && a("div", {
           class: e.title()
         }, [o]), a("div", {
-          class: L(e.wrapper(), g.value && R("overflow-clip", w.value, x.value))
-        }, [St, gt, bt, Dt, ae]), u && a("div", {
+          class: g(e.wrapper(), R.value && H("overflow-clip", w.value, C.value))
+        }, [Tt, Ht, Lt, Bt, ve]), u && a("div", {
           class: e.footer()
         }, [u])]);
       }
-      const k = a(Lt, null, [a("table", {
+      const j = a(zt, null, [a("table", {
         class: S.value,
         style: p
-      }, [a(T, {
-        columns: y.value
-      }, null), l.showHeader !== !1 && a(ue, {
-        rows: F.value,
+      }, [a(B, {
+        columns: f.value
+      }, null), l.showHeader !== !1 && a(xe, {
+        rows: W.value,
         theadClass: e.thead(),
         rowClass: e.tr(),
-        thClass: Z.value,
+        thClass: re.value,
         headerCellInnerClass: e.headerCellInner()
-      }, null), a(ce, {
-        dataSource: v.value,
-        columns: y.value,
+      }, null), a(ge, {
+        dataSource: y.value,
+        columns: f.value,
         tbodyClass: e.tbody(),
         rowClass: e.tr(),
         tdClass: _.value,
@@ -758,18 +822,18 @@ const Ol = /* @__PURE__ */ Et({
         rowKey: l.rowKey
       }, null), s && a("tfoot", {
         class: e.summary()
-      }, [s])]), ae]);
+      }, [s])]), ve]);
       return a("div", {
-        class: e.root()
+        class: g(e.root(), le.value)
       }, [o && a("div", {
         class: e.title()
-      }, [o]), a(ie, {
-        ref: te,
+      }, [o]), a(he, {
+        ref: ie,
         wrapClass: e.wrapper(),
-        viewStyle: le,
-        onScroll: J
-      }, me(k) ? k : {
-        default: () => [k]
+        viewStyle: fe,
+        onScroll: ee
+      }, Re(j) ? j : {
+        default: () => [j]
       }), u && a("div", {
         class: e.footer()
       }, [u])]);
@@ -777,5 +841,5 @@ const Ol = /* @__PURE__ */ Et({
   }
 });
 export {
-  Ol as default
+  $l as default
 };