@manohub/ui 1.0.5 → 1.0.8

package/dist/components/table/index.d.ts

@@ -13,6 +13,8 @@ export interface TableColumn {
      * - `'120px'` —— 固定宽（`fixed` 下是硬宽，**容器变窄也不收缩**，可能横向滚动）
      * - `'20%'` —— 百分比（**吃满 + 严格按比例 + 任意容器宽不溢出**，响应式首选）
      * - 不传 —— 单用时吃剩余/等分；**与 `px` 混用会被压到 0**，不建议
+   *
+   * 用法见 `docs/demos/table/`（每个维度一份可运行样例；文档页 `docs/components/table.md`）。
      */
     width?: string | number;
     align?: 'left' | 'center' | 'right';
@@ -30,11 +32,9 @@ export interface TableColumn {
      */
     wrap?: boolean;
     /**
-     * 列下限（px）：防止窄容器把该列压没。**给了才下发 `min-width`** ——
-     * ⚠️ 它**不是硬下限**：实测（Chrome）`<col>` 上的 `min-width` 会被当成**分配权重**参与按比例
-     * 分摊 —— 800 宽容器下 `width:50% + min-width:500px` 的列实测只有 **444**，不是 500。
-     * 想要真下限得换机制（该列直接给 px 硬宽，或把内容包一层带 `min-width` 的盒）。
-     * 只在调用方显式要时才下发（`<col>` 上不写时不会出现）。
+     * 列下限（px）：防止窄容器把该列压没。**给了才下发 `min-width`**（`<col>` 上不写就不会出现）。⚠️ **不是硬下限**：
+     * 实测 `<col>` 上的 `min-width` 会被当成**分配权重**参与按比例分摊 —— 800 宽容器下 `width:50% + min-width:500px`
+     * 的列只有 **444**。想要真下限得换机制（该列直接给 px 硬宽，或把内容包一层带 `min-width` 的盒）。
      */
     minWidth?: number;
     /** 必填列：表头加星号 */
@@ -43,6 +43,8 @@ export interface TableColumn {
     sortable?: boolean;
 }
 export type TableSortOrder = 'asc' | 'desc' | null;
+/** 满高档取值：不传 / `false` = 高度由内容撑起；`true` / `'parent'` = 占满父级；`number` = 表体滚动上限（px） */
+export type TableFill = boolean | 'parent' | number;
 /** 行数据：至少能用 `rowKey` 取到稳定标识 */
 export type TableRow = Record<string, unknown>;
 /** 行级事件（`onRow` 的返回）：给整行挂点击与类，省掉「每列都写一次 onClick」 */
@@ -61,15 +63,6 @@ export interface TableRowProps {
  * **回写是受控的**：`setValue(next)` 只把「这一格变成了什么」上报出去
  * （= 发一次 `onCellChange(row, column.key, next, index)`）。本件**从不改 `data`** ——
  * 新数组与「这次改动该不该被接受」都由调用方决定，与行选中同一套受控口径。
- *
- * @example 编辑格：套 `Form.Item` 拿错误位，控件自己绑值、回写走 `setValue`
- * <Table :columns="columns" :data="rows" row-key="id" layout="fixed" :on-cell-change="write">
- *   <template #cell="{ row, column, value, index, setValue }">
- *     <!-- 格子里的框由控件自己带：默认有框 / `:bordered="false"` 无框 / `bordered="focus"` 聚焦才显框 -->
- *     <Input v-if="column.key === 'name'" :model-value="String(value ?? '')" @change="setValue" />
- *     <template v-else>{{ value }}</template>
- *   </template>
- * </Table>
  */
 export interface TableCellSlotScope {
     row: TableRow;
@@ -80,28 +73,17 @@ export interface TableCellSlotScope {
     /** 上报该格的新值（= 发一次 `onCellChange`）；调用方没接 `onCellChange` 时是空操作 */
     setValue: (next: unknown) => void;
 }
-/**
- * 行级可勾选判定（`selectable` 的函数形态）：返回 `false` 的行渲染**禁用态**勾选框，
- * 且不进表头全选的增删范围。签名与 `onRow` / `rowClass` 一致（都给 `index`）。
- */
+/** 行级可勾选判定（`selectable` 的函数形态）：返回 `false` 的行渲染**禁用态**勾选框，且不进表头全选的增删范围；签名与 `onRow` / `rowClass` 一致（都给 `index`）。 */
 export type TableRowSelectable = (row: TableRow, index: number) => boolean;
-/** 分页档：`false` 不渲染；给对象就渲染分页条（**本件不切片，`data` 是当前页数据**） */
-export interface TablePagination {
-    total: number;
-    current?: number;
-    pageSize?: number;
-    pageSizeOptions?: number[];
-    onChange?: (page: number, pageSize: number) => void;
-}
 /**
- * 表格（**自绘**；列 × 数据的表格骨架 + 选择列 + 展开行 + 排序事件 + 分页 + 三态）。
+ * 表格（**自绘**；列 × 数据的表格骨架 + 选择列 + 展开行 + 排序事件 + 三态）。
  *
  * ## 这个组件负责什么、不负责什么（都是刻意的）
  *
  * **负责**：把 `columns` × `data` 渲成表格；列对齐 / 宽度 / 省略 / 必填；行选中（勾选列复用本包的
  * `Checkbox` 组件 —— 它内部才是真实 `<input type="checkbox">`，故面上的
  * `tr:has(.mh-table__col-check input:checked)` 零 JS 路径仍成立；选择器**限定在勾选列内**，否则功能列的
- * `Switch` 也会把整行点亮）；展开行；排序按钮的**状态与事件**；加载态与空态；分页条的排布与事件透传；
+ * `Switch` 也会把整行点亮）；展开行；排序按钮的**状态与事件**；加载态与空态；
  * `rowClass` / `onRow` 让调用方标分组行、禁用行与挂行级点击。
  *
  * **不负责**：
@@ -109,38 +91,8 @@ export interface TablePagination {
  * - **排序算法归调用方**（列宽拖拽同理）：规范只给了 `↕` 字形与拖拽线两处视觉，而 `↕` 是文字符号（本包禁
  *   拿文字符号冒充图标），故朝向改用现成字形 `chevron-up` / `chevron-down` 表达 —— 本件发 `sort` 事件、
  *   画态，真正排序 / 改列宽由调用方决定（它有数据、也知道业务口径）；
- * - **分页切片**：`pagination` 只渲染分页条并透传页码事件，**`data` 始终是当前页数据** —— 组件自己切片会
- *   让「服务端分页」与「客户端分页」两套口径藏在同一个 prop 里；
+ * - **分页条**：本件不内建（`data` 始终是给它的那页数据），页码状态、切片与分页条的摆放都归调用方；
  * - **错误态**：归 `QueryState`（表格只管列数据）。
- *
- * @example 基本列表（表默认满宽；列宽给权重 + `fixed` 才严格按比例）
- * <Table
- *   layout="fixed" striped row-key="id" :data="rows"
- *   :columns="[
- *     { key: 'name', title: '名称', width: 3 },
- *     { key: 'amount', title: '金额', width: 1, align: 'right' },
- *     { key: 'description', title: '描述', width: 4, wrap: true },
- *   ]"
- *   :pagination="{ total: 120, current: page, onChange: (p) => (page = p) }"
- * />
- *
- * @example 操作列（用 `actions` 插槽 + 一列 `align:'right'`；行内操作同族，`Button.Group` 收口）
- * <Table :columns="columns" :data="rows" row-key="id">
- *   {{
- *     actions: ({ row }) => (
- *       <Button.Group>
- *         <Button variant="text" onClick={() => open(row)}>编辑</Button>
- *         <Button variant="text" danger onClick={() => remove(row)}>删除</Button>
- *       </Button.Group>
- *     ),
- *   }}
- * </Table>
- *
- * @example 单元格自定义 + 按行判定可勾选
- * <Table :columns="columns" :data="rows" row-key="id" v-model="selected"
- *   :selectable="(row) => row.status === 'draft'">
- *   {{ cell: ({ value, column }) => column.key === 'status' ? <Text tone="success">{value}</Text> : value }}
- * </Table>
  */
 export declare const Table: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     columns: {
@@ -181,11 +133,8 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
         default: boolean;
     };
     /**
-     * 单元格值变更 —— 由 `#cell` 插槽里的 `setValue` 触发，是**唯一的回写通道**。
-     *
-     * 本件**不改 `data`**（与本仓表格一贯的克制口径一致：全受控、只发事件、不排序、不切片）；
-     * 要不要接受、以及新数组怎么产生，都由调用方决定。
-     * 没接这个回调时 `setValue` 是空操作（插槽里的控件照旧可绑，不会报错）。
+     * 单元格值变更 —— 由 `#cell` 插槽里的 `setValue` 触发，是**唯一的回写通道**。本件**不改 `data`**（全受控、只发
+     * 事件、不排序、不切片）；要不要接受、新数组怎么产生都由调用方决定；没接这个回调时 `setValue` 是空操作。
      */
     onCellChange: {
         type: PropType<(row: TableRow, key: string, value: unknown, index: number) => void>;
@@ -216,9 +165,19 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
-    /** 外框交给包裹层（满高表格用） */
+    /**
+     * 满高档（高度与滚动归属；详见 `docs/components/table.md` 的「满高与滚动」）：
+     *
+     * - 不传 / `false` —— 高度由内容撑起（单表结构，与不带本 prop 时完全一致）；
+     * - `true` / `'parent'` —— 占满父级高度（`height: 100%`），**表体滚、表头固定在表体上方**，
+     *   外框与圆角归包裹层；父级需可确定高度（`auto` 父级下 `100%` 解析不出来）；
+     * - `number` —— 表体滚动上限 = 该像素值，**父级高度不确定时的显式兜底档**
+     *   （CSS 无法探测父级是否定高，故兜底只能由调用方声明）。
+     *
+     * 满高档一律按 `table-layout: fixed` 渲染（表头与表体是两个表格盒，`auto` 各自算宽必然错列）。
+     */
     fill: {
-        type: BooleanConstructor;
+        type: PropType<TableFill>;
         default: boolean;
     };
     /**
@@ -234,10 +193,6 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<"auto" | "fixed">;
         default: string;
     };
-    stickyHead: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     stickyCol: {
         type: BooleanConstructor;
         default: boolean;
@@ -296,11 +251,6 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<(keys: Array<string | number>) => void>;
         default: undefined;
     };
-    /** 分页档：`false` 不渲染底部分页条 */
-    pagination: {
-        type: PropType<false | TablePagination>;
-        default: boolean;
-    };
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     /** 选中行 key 列表（`v-model`） */
     'update:modelValue': (keys: Array<string | number>) => boolean;
@@ -350,11 +300,8 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
         default: boolean;
     };
     /**
-     * 单元格值变更 —— 由 `#cell` 插槽里的 `setValue` 触发，是**唯一的回写通道**。
-     *
-     * 本件**不改 `data`**（与本仓表格一贯的克制口径一致：全受控、只发事件、不排序、不切片）；
-     * 要不要接受、以及新数组怎么产生，都由调用方决定。
-     * 没接这个回调时 `setValue` 是空操作（插槽里的控件照旧可绑，不会报错）。
+     * 单元格值变更 —— 由 `#cell` 插槽里的 `setValue` 触发，是**唯一的回写通道**。本件**不改 `data`**（全受控、只发
+     * 事件、不排序、不切片）；要不要接受、新数组怎么产生都由调用方决定；没接这个回调时 `setValue` 是空操作。
      */
     onCellChange: {
         type: PropType<(row: TableRow, key: string, value: unknown, index: number) => void>;
@@ -385,9 +332,19 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
         type: BooleanConstructor;
         default: boolean;
     };
-    /** 外框交给包裹层（满高表格用） */
+    /**
+     * 满高档（高度与滚动归属；详见 `docs/components/table.md` 的「满高与滚动」）：
+     *
+     * - 不传 / `false` —— 高度由内容撑起（单表结构，与不带本 prop 时完全一致）；
+     * - `true` / `'parent'` —— 占满父级高度（`height: 100%`），**表体滚、表头固定在表体上方**，
+     *   外框与圆角归包裹层；父级需可确定高度（`auto` 父级下 `100%` 解析不出来）；
+     * - `number` —— 表体滚动上限 = 该像素值，**父级高度不确定时的显式兜底档**
+     *   （CSS 无法探测父级是否定高，故兜底只能由调用方声明）。
+     *
+     * 满高档一律按 `table-layout: fixed` 渲染（表头与表体是两个表格盒，`auto` 各自算宽必然错列）。
+     */
     fill: {
-        type: BooleanConstructor;
+        type: PropType<TableFill>;
         default: boolean;
     };
     /**
@@ -403,10 +360,6 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<"auto" | "fixed">;
         default: string;
     };
-    stickyHead: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
     stickyCol: {
         type: BooleanConstructor;
         default: boolean;
@@ -465,11 +418,6 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
         type: PropType<(keys: Array<string | number>) => void>;
         default: undefined;
     };
-    /** 分页档：`false` 不渲染底部分页条 */
-    pagination: {
-        type: PropType<false | TablePagination>;
-        default: boolean;
-    };
 }>> & Readonly<{
     onSort?: ((payload: {
         key: string;
@@ -478,7 +426,7 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
     onChange?: ((keys: (string | number)[]) => any) | undefined;
     "onUpdate:modelValue"?: ((keys: (string | number)[]) => any) | undefined;
 }>, {
-    fill: boolean;
+    fill: TableFill;
     layout: "fixed" | "auto";
     size: ControlSize;
     compact: boolean;
@@ -494,7 +442,6 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
     selectable: boolean | TableRowSelectable;
     striped: boolean;
     onCellChange: (row: TableRow, key: string, value: unknown, index: number) => void;
-    stickyHead: boolean;
     stickyCol: boolean;
     showHeader: boolean;
     sortKey: string;
@@ -502,24 +449,15 @@ export declare const Table: import("vue").DefineComponent<import("vue").ExtractP
     rowClass: (row: TableRow, index: number) => string;
     onRow: (row: TableRow, index: number) => TableRowProps;
     expandable: (row: TableRow, index: number) => VNodeChild;
-    pagination: false | TablePagination;
 }, SlotsType<{
-    /**
-     * 单元格：`{ row, column, value, index, setValue }`（不给则直接输出原值）。
-     *
-     * **编辑格也走这里**（见 `TableCellSlotScope` 的说明）：本件不替调用方渲染控件，
-     * 只给值、给位置、给一个受控的回写口 `setValue`。
-     */
+    /** 单元格插槽：`{ row, column, value, index, setValue }`（不给则直接输出原值）。**编辑格也走这里** —— 本件不替调用方渲染控件，只给值、给位置、给一个受控的回写口。 */
     cell?: (context: TableCellSlotScope) => VNodeChild;
-    /** 行尾操作区：`{ row, index }`（面里用 `align: 'right'` 的列承载） */
-    actions?: (context: {
-        row: TableRow;
-        index: number;
-    }) => VNodeChild;
     /** 批量栏：选中非空时出现在表格上方（`{ selected }`） */
     batch?: (context: {
         selected: Array<string | number>;
     }) => VNodeChild;
     /** 空态自定义（插画 + 操作按钮）；不给则渲染 `emptyText` 一行 */
     empty?: () => VNodeChild;
+    /** 合计行：渲染在滚动区之外（表格下方），容器与标签 / 数值子样式见 `.mh-table__summary*` */
+    summary?: () => VNodeChild;
 }>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/components/table/index.js

@@ -1,7 +1,6 @@
-import { defineComponent, computed, ref, createVNode } from "vue";
+import { defineComponent, computed, ref, onMounted, onUpdated, createVNode } from "vue";
 import { Icon } from "@manohub/icon";
 import { Checkbox } from "../checkbox/index.js";
-import { Pagination } from "../pagination/index.js";
 const Table = /* @__PURE__ */ defineComponent({
   name: "Table",
   inheritAttrs: false,
@@ -44,11 +43,8 @@ const Table = /* @__PURE__ */ defineComponent({
       default: false
     },
     /**
-     * 单元格值变更 —— 由 `#cell` 插槽里的 `setValue` 触发，是**唯一的回写通道**。
-     *
-     * 本件**不改 `data`**（与本仓表格一贯的克制口径一致：全受控、只发事件、不排序、不切片）；
-     * 要不要接受、以及新数组怎么产生，都由调用方决定。
-     * 没接这个回调时 `setValue` 是空操作（插槽里的控件照旧可绑，不会报错）。
+     * 单元格值变更 —— 由 `#cell` 插槽里的 `setValue` 触发，是**唯一的回写通道**。本件**不改 `data`**（全受控、只发
+     * 事件、不排序、不切片）；要不要接受、新数组怎么产生都由调用方决定；没接这个回调时 `setValue` 是空操作。
      */
     onCellChange: {
       type: Function,
@@ -79,9 +75,19 @@ const Table = /* @__PURE__ */ defineComponent({
       type: Boolean,
       default: true
     },
-    /** 外框交给包裹层（满高表格用） */
+    /**
+     * 满高档（高度与滚动归属；详见 `docs/components/table.md` 的「满高与滚动」）：
+     *
+     * - 不传 / `false` —— 高度由内容撑起（单表结构，与不带本 prop 时完全一致）；
+     * - `true` / `'parent'` —— 占满父级高度（`height: 100%`），**表体滚、表头固定在表体上方**，
+     *   外框与圆角归包裹层；父级需可确定高度（`auto` 父级下 `100%` 解析不出来）；
+     * - `number` —— 表体滚动上限 = 该像素值，**父级高度不确定时的显式兜底档**
+     *   （CSS 无法探测父级是否定高，故兜底只能由调用方声明）。
+     *
+     * 满高档一律按 `table-layout: fixed` 渲染（表头与表体是两个表格盒，`auto` 各自算宽必然错列）。
+     */
     fill: {
-      type: Boolean,
+      type: [Boolean, String, Number],
       default: false
     },
     /**
@@ -97,10 +103,6 @@ const Table = /* @__PURE__ */ defineComponent({
       type: String,
       default: "auto"
     },
-    stickyHead: {
-      type: Boolean,
-      default: false
-    },
     stickyCol: {
       type: Boolean,
       default: false
@@ -158,11 +160,6 @@ const Table = /* @__PURE__ */ defineComponent({
     onExpandChange: {
       type: Function,
       default: void 0
-    },
-    /** 分页档：`false` 不渲染底部分页条 */
-    pagination: {
-      type: [Boolean, Object],
-      default: false
     }
   },
   emits: {
@@ -245,121 +242,165 @@ const Table = /* @__PURE__ */ defineComponent({
       return "asc";
     };
     const sortGlyph = (key) => props.sortKey === key && props.sortOrder === "asc" ? "chevron-up" : "chevron-down";
-    return () => {
-      const tableClass = ["mh-table", resolvedSize.value === "sm" ? "mh-table--xs" : "", resolvedSize.value === "lg" ? "mh-table--lg" : "", props.bordered ? "" : "mh-table--borderless", props.fill ? "mh-table--fill" : "", props.layout === "fixed" ? "mh-table--fixed" : "", props.stickyHead ? "mh-table--sticky-head" : "", props.stickyCol ? "mh-table--sticky-col" : "", attrs.class].filter(Boolean).join(" ");
-      const pager = typeof props.pagination === "object" ? props.pagination : null;
-      return createVNode("div", {
-        "class": "mh-table-wrapper",
-        "style": attrs.style
-      }, [slots.batch && selected.value.length > 0 ? createVNode("div", {
-        "class": "mh-table__batch"
-      }, [slots.batch({
-        selected: selected.value
-      })]) : null, createVNode("table", {
-        "class": tableClass
-      }, [colElements(), props.showHeader ? createVNode("thead", null, [createVNode("tr", null, [props.expandable ? createVNode("th", {
-        "class": "mh-table__col-expand",
-        "aria-label": "展开"
-      }, null) : null, hasSelectColumn.value ? createVNode("th", {
-        "class": "mh-table__col-check"
-      }, [createVNode(Checkbox, {
-        "aria-label": "全选",
-        "modelValue": allSelected.value,
-        "indeterminate": someSelected.value && !allSelected.value,
-        "disabled": headerCheckboxDisabled.value,
-        "onChange": toggleAll
-      }, null)]) : null, props.columns.map((column) => createVNode("th", {
-        "key": column.key,
-        "class": [column.required ? "mh-table__cell-required" : "", column.align === "center" ? "mh-table__cell-center" : "", column.align === "right" ? "mh-table__col-actions" : ""].filter(Boolean).join(" ")
-      }, [column.title, column.sortable ? createVNode("button", {
+    const renderHead = () => createVNode("thead", null, [createVNode("tr", null, [props.expandable ? createVNode("th", {
+      "class": "mh-table__col-expand",
+      "aria-label": "展开"
+    }, null) : null, hasSelectColumn.value ? createVNode("th", {
+      "class": "mh-table__col-check"
+    }, [createVNode(Checkbox, {
+      "aria-label": "全选",
+      "modelValue": allSelected.value,
+      "indeterminate": someSelected.value && !allSelected.value,
+      "disabled": headerCheckboxDisabled.value,
+      "onChange": toggleAll
+    }, null)]) : null, props.columns.map((column) => createVNode("th", {
+      "key": column.key,
+      "class": [column.required ? "mh-table__cell-required" : "", column.align === "center" ? "mh-table__cell-center" : "", column.align === "right" ? "mh-table__col-right" : ""].filter(Boolean).join(" ")
+    }, [column.title, column.sortable ? createVNode("button", {
+      "type": "button",
+      "class": ["mh-table__sort", props.sortKey === column.key && props.sortOrder ? "mh-table__sort--active" : ""].filter(Boolean).join(" "),
+      "aria-label": `按${column.title}排序`,
+      "onClick": () => emit("sort", {
+        key: column.key,
+        order: nextOrder(column.key)
+      })
+    }, [createVNode(Icon, {
+      "name": sortGlyph(column.key),
+      "class": ["mh-table__sort-icon", props.sortKey === column.key && props.sortOrder === "asc" ? "mh-table__sort-icon--asc" : "", props.sortKey === column.key && props.sortOrder === "desc" ? "mh-table__sort-icon--desc" : ""].filter(Boolean).join(" ")
+    }, null)]) : null]))])]);
+    const renderBody = () => createVNode("tbody", null, [isEmpty.value ? createVNode("tr", {
+      "class": "mh-table__empty-row"
+    }, [createVNode("td", {
+      "class": "mh-table__empty",
+      "colspan": columnCount.value
+    }, [slots.empty ? slots.empty() : props.emptyText])]) : null, props.data.map((row, index) => {
+      const key = row[props.rowKey];
+      const rowProps = props.onRow?.(row, index);
+      const isExpanded = expanded.value.includes(key);
+      const rowState = [props.striped && index % 2 === 1 ? "is-striped" : "", selected.value.includes(key) ? "is-selected" : "", rowProps?.onClick ? "is-clickable" : "", rowProps?.class ?? "", props.rowClass?.(row, index) ?? ""].filter(Boolean).join(" ");
+      return [createVNode("tr", {
+        "key": key,
+        "class": rowState,
+        "data-state": selected.value.includes(key) ? "selected" : "idle",
+        "onClick": rowProps?.onClick ? (event) => rowProps.onClick?.(row, index, event) : void 0
+      }, [props.expandable ? createVNode("td", {
+        "class": "mh-table__col-expand"
+      }, [createVNode("button", {
         "type": "button",
-        "class": ["mh-table__sort", props.sortKey === column.key && props.sortOrder ? "mh-table__sort--active" : ""].filter(Boolean).join(" "),
-        "aria-label": `按${column.title}排序`,
-        "onClick": () => emit("sort", {
-          key: column.key,
-          order: nextOrder(column.key)
-        })
+        "class": "mh-table__expand",
+        "aria-label": isExpanded ? "收起" : "展开",
+        "aria-expanded": isExpanded ? "true" : "false",
+        "onClick": (event) => {
+          event.stopPropagation();
+          toggleExpand(key);
+        }
       }, [createVNode(Icon, {
-        "name": sortGlyph(column.key),
-        "class": ["mh-table__sort-icon", props.sortKey === column.key && props.sortOrder === "asc" ? "mh-table__sort-icon--asc" : "", props.sortKey === column.key && props.sortOrder === "desc" ? "mh-table__sort-icon--desc" : ""].filter(Boolean).join(" ")
-      }, null)]) : null]))])]) : null, createVNode("tbody", null, [isEmpty.value ? createVNode("tr", {
-        "class": "mh-table__empty-row"
+        "name": "chevron-down",
+        "class": "mh-table__expand-icon"
+      }, null)])]) : null, hasSelectColumn.value ? (
+        /* 勾选列复用 `Checkbox`（不手写原生 input）。行本身可能带 `onRow` 的 onClick：勾选不该顺带触发行
+           点击 —— 阻断挂在**单元格**上（`Checkbox` 的根是 `label`，点它会冒泡两次，只挡 input 挡不住）。
+           `selectable` 为函数时逐行判定：返回 `false` 的行给禁用态（置灰 + not-allowed）。 */
+        createVNode("td", {
+          "class": "mh-table__col-check",
+          "onClick": (event) => event.stopPropagation()
+        }, [createVNode(Checkbox, {
+          "aria-label": "选择本行",
+          "modelValue": selected.value.includes(key),
+          "disabled": !isRowSelectable(row, index),
+          "onChange": () => toggleRow(key)
+        }, null)])
+      ) : null, props.columns.map((column) => createVNode("td", {
+        "key": column.key,
+        "class": cellClass(column).join(" ")
+      }, [slots.cell ? (
+        /* 展示格与编辑格都走这条（含行尾操作列）：值、位置、回写口一并交给调用方 */
+        slots.cell({
+          row,
+          column,
+          value: row[column.key],
+          index,
+          setValue: cellSetValue(row, column, index)
+        })
+      ) : String(row[column.key] ?? "")]))]), isExpanded ? createVNode("tr", {
+        "key": `${key}-expand`,
+        "class": "mh-table__expand-row"
       }, [createVNode("td", {
-        "class": "mh-table__empty",
         "colspan": columnCount.value
-      }, [slots.empty ? slots.empty() : props.emptyText])]) : null, props.data.map((row, index) => {
-        const key = row[props.rowKey];
-        const rowProps = props.onRow?.(row, index);
-        const isExpanded = expanded.value.includes(key);
-        const rowState = [props.striped && index % 2 === 1 ? "is-striped" : "", selected.value.includes(key) ? "is-selected" : "", rowProps?.onClick ? "is-clickable" : "", rowProps?.class ?? "", props.rowClass?.(row, index) ?? ""].filter(Boolean).join(" ");
-        return [createVNode("tr", {
-          "key": key,
-          "class": rowState,
-          "data-state": selected.value.includes(key) ? "selected" : "idle",
-          "onClick": rowProps?.onClick ? (event) => rowProps.onClick?.(row, index, event) : void 0
-        }, [props.expandable ? createVNode("td", {
-          "class": "mh-table__col-expand"
-        }, [createVNode("button", {
-          "type": "button",
-          "class": "mh-table__expand",
-          "aria-label": isExpanded ? "收起" : "展开",
-          "aria-expanded": isExpanded ? "true" : "false",
-          "onClick": (event) => {
-            event.stopPropagation();
-            toggleExpand(key);
-          }
-        }, [createVNode(Icon, {
-          "name": "chevron-down",
-          "class": "mh-table__expand-icon"
-        }, null)])]) : null, hasSelectColumn.value ? (
-          /* 勾选列复用 `Checkbox`（不在表格里手写原生 input）。行本身可能带 onClick（onRow）：
-             勾选不该顺带触发行点击 —— 阻断挂在**单元格**上，因为 `Checkbox` 的根是 `label`，
-             点它会冒泡两次（label 自身一次 + 转发给 input 一次），只挡 input 挡不住行点击。
-             `selectable` 为函数时逐行判定：返回 `false` 的行给禁用态（置灰 + not-allowed）。 */
-          createVNode("td", {
-            "class": "mh-table__col-check",
-            "onClick": (event) => event.stopPropagation()
-          }, [createVNode(Checkbox, {
-            "aria-label": "选择本行",
-            "modelValue": selected.value.includes(key),
-            "disabled": !isRowSelectable(row, index),
-            "onChange": () => toggleRow(key)
-          }, null)])
-        ) : null, props.columns.map((column) => createVNode("td", {
-          "key": column.key,
-          "class": cellClass(column).join(" ")
-        }, [slots.cell ? (
-          /* 编辑格与展示格都走这条：值、位置、回写口一并交给调用方 */
-          slots.cell({
-            row,
-            column,
-            value: row[column.key],
-            index,
-            setValue: cellSetValue(row, column, index)
-          })
-        ) : slots.actions && column.align === "right" ? slots.actions({
-          row,
-          index
-        }) : String(row[column.key] ?? "")]))]), isExpanded ? createVNode("tr", {
-          "key": `${key}-expand`,
-          "class": "mh-table__expand-row"
-        }, [createVNode("td", {
-          "colspan": columnCount.value
-        }, [props.expandable?.(row, index)])]) : null];
-      })])]), props.loading ? createVNode("div", {
+      }, [props.expandable?.(row, index)])]) : null];
+    })]);
+    const headBoxRef = ref(null);
+    const headTableRef = ref(null);
+    const scrollBoxRef = ref(null);
+    const syncHead = () => {
+      const box = scrollBoxRef.value;
+      const head = headBoxRef.value;
+      if (!box) return;
+      if (headTableRef.value) headTableRef.value.style.transform = `translateX(${-box.scrollLeft}px)`;
+      if (head) {
+        const gutter = `${box.offsetWidth - box.clientWidth}px`;
+        if (head.style.paddingRight !== gutter) head.style.paddingRight = gutter;
+      }
+    };
+    onMounted(syncHead);
+    onUpdated(syncHead);
+    return () => {
+      const fill = props.fill !== false;
+      const tableClass = ["mh-table", resolvedSize.value === "sm" ? "mh-table--xs" : "", resolvedSize.value === "lg" ? "mh-table--lg" : "", props.bordered ? "" : "mh-table--borderless", fill ? "mh-table--fill" : "", fill || props.layout === "fixed" ? "mh-table--fixed" : "", attrs.class].filter(Boolean).join(" ");
+      const bodyTableClass = props.stickyCol ? `${tableClass} mh-table--sticky-col` : tableClass;
+      const cellTokens = fill || props.layout === "fixed" ? {
+        "--ui-control-min-width": "0"
+      } : void 0;
+      const batchBar = slots.batch && selected.value.length > 0 ? createVNode("div", {
+        "class": "mh-table__batch"
+      }, [slots.batch({
+        selected: selected.value
+      })]) : null;
+      const summaryBar = slots.summary ? createVNode("div", {
+        "class": "mh-table__summary"
+      }, [slots.summary()]) : null;
+      const loadingOverlay = props.loading ? createVNode("div", {
         "class": "mh-table__loading",
         "aria-busy": "true"
       }, [createVNode("span", {
         "class": "mh-table__spinner"
-      }, null)]) : null, pager ? createVNode("div", {
-        "class": "mh-table__pagination"
-      }, [createVNode(Pagination, {
-        "total": pager.total,
-        "modelValue": pager.current ?? 1,
-        "pageSize": pager.pageSize ?? 10,
-        "pageSizeOptions": pager.pageSizeOptions,
-        "onChange": (payload) => pager.onChange?.(payload.page, payload.pageSize)
-      }, null)]) : null]);
+      }, null)]) : null;
+      if (!fill) {
+        return createVNode("div", {
+          "class": "mh-table-wrapper",
+          "style": attrs.style
+        }, [batchBar, createVNode("table", {
+          "class": bodyTableClass,
+          "style": cellTokens
+        }, [colElements(), props.showHeader ? renderHead() : null, renderBody()]), summaryBar, loadingOverlay]);
+      }
+      const wrapperStyle = props.fill === true || props.fill === "parent" ? [{
+        height: "100%"
+      }, attrs.style] : attrs.style;
+      const scrollStyle = typeof props.fill === "number" ? {
+        maxHeight: `${props.fill}px`
+      } : void 0;
+      return createVNode("div", {
+        "class": "mh-table-wrapper mh-table-wrapper--fill",
+        "style": wrapperStyle
+      }, [batchBar, props.showHeader ? createVNode("div", {
+        "class": "mh-table__head",
+        "ref": headBoxRef
+      }, [createVNode("table", {
+        "class": tableClass,
+        "ref": headTableRef,
+        "style": cellTokens
+      }, [colElements(), renderHead()])]) : null, createVNode("div", {
+        "class": "mh-table__body"
+      }, [createVNode("div", {
+        "class": "mh-table-scroll",
+        "ref": scrollBoxRef,
+        "onScroll": syncHead,
+        "style": scrollStyle
+      }, [createVNode("table", {
+        "class": bodyTableClass,
+        "style": cellTokens
+      }, [colElements(), renderBody()])]), loadingOverlay]), summaryBar]);
     };
   }
 });