huibo-ui 0.4.0 → 0.6.0

package/dist/collection/components/Table/Table.js

@@ -42,6 +42,13 @@ export class Table {
     treeProps;
     /** 是否开启行内编辑模式（默认关闭）。需列配置 column.editable=true 才对该列生效 */
     editable = false;
+    /**
+     * 内置分页配置（T1）。传入后 Table 自动对 data 切片并在底部渲染 <hb-pagination>。
+     * 不传则不分页（向后兼容）。
+     */
+    pagination;
+    /** 行 className（函数，按行返回附加 class，T8） */
+    rowClassName;
     sortProp = '';
     sortDirection = null;
     currentRow = -1;
@@ -52,6 +59,12 @@ export class Table {
     expandedRowKeys = [];
     /** 行内编辑：当前正在编辑的单元格 { key, prop }，null 表示无 */
     editingCell = null;
+    /** T1 分页：内部当前页（非受控时用） */
+    internalPage = 1;
+    /** T1 分页：内部每页条数（非受控时用） */
+    internalPageSize = 10;
+    /** T3 筛选：内部筛选状态 { prop: 选中的 value 列表 }（非受控时用） */
+    internalFilters = {};
     /** 排序变化事件 */
     hbSortChange;
     /** 行点击事件 */
@@ -64,10 +77,21 @@ export class Table {
     hbExpandChange;
     /** 行内编辑提交事件 */
     hbCellChange;
+    /** T1 分页变化事件 { current, pageSize } */
+    hbPageChange;
+    /** T3 筛选变化事件 { prop, values } */
+    hbFilterChange;
     handleDataChange() {
         this.selectedRows = new Set();
         this.emitSelection();
     }
+    handlePaginationChange() {
+        // 受控分页：从 pagination.current/pageSize 初始化内部状态
+        if (this.pagination) {
+            this.internalPage = this.pagination.current ?? this.pagination.defaultCurrent ?? 1;
+            this.internalPageSize = this.pagination.pageSize ?? this.pagination.defaultPageSize ?? 10;
+        }
+    }
     /** 树形模式是否启用（显式传入 treeProps 即启用） */
     get isTreeMode() {
         return !!this.treeProps;
@@ -78,9 +102,6 @@ export class Table {
     }
     /**
      * 把树拍平成可见行列表：仅保留「祖先链路全部已展开」的后代。
-     * @param list  当前层级的数组
-     * @param level 当前层级（根 = 0）
-     * @param parentKeyPath 父级 key 路径，用于构造深层稳定 key（避免不同分支同 index 撞 key）
      */
     flattenTree(list, level = 0, parentKeyPath = '') {
         const field = this.childrenField;
@@ -91,7 +112,6 @@ export class Table {
             const kids = row[field];
             const hasKids = Array.isArray(kids) && kids.length > 0;
             result.push({ row, level, key, hasChildren: hasKids, index: i });
-            // 仅当该行已展开时，递归拍入其 children
             if (hasKids && this.expandedRowKeys.indexOf(key) !== -1) {
                 result.push(...this.flattenTree(kids, level + 1, keyPath));
             }
@@ -102,7 +122,7 @@ export class Table {
     toggleExpand = (row, key) => {
         const idx = this.expandedRowKeys.indexOf(key);
         const expanded = idx === -1;
-        this.expandedRowKeys = expanded ? [...this.expandedRowKeys, key] : this.expandedRowKeys.filter((k) => k !== key);
+        this.expandedRowKeys = expanded ? [...this.expandedRowKeys, key] : this.expandedRowKeys.filter(k => k !== key);
         this.hbExpandChange.emit({ expanded, row });
     };
     /** 行内编辑：进入编辑态 */
@@ -116,7 +136,6 @@ export class Table {
     commitEdit = (e, row, prop) => {
         const input = e.target;
         const value = input.value;
-        // 就地更新（简单可用版）：修改 row[prop] 后强制重渲染
         row[prop] = value;
         this.editingCell = null;
         this.hbCellChange.emit({ row, prop, value });
@@ -134,7 +153,6 @@ export class Table {
     };
     allCheckboxRef;
     componentDidRender() {
-        // indeterminate 不是可反射的 HTML 属性，必须通过 DOM 属性设置
         if (this.allCheckboxRef) {
             this.allCheckboxRef.indeterminate = this.isIndeterminate;
         }
@@ -165,10 +183,26 @@ export class Table {
     get virtualTotalHeight() {
         return this.data.length * (this.itemHeight > 0 ? this.itemHeight : 1);
     }
-    handleSort = (prop) => {
+    /**
+     * T2：解析某列的有效排序方向。
+     * 受控（col.sortOrder 设置）→ 用该值；否则用内部 state（sortProp/sortDirection）。
+     */
+    effectiveSortOrder(col) {
+        if (col.sortOrder !== undefined)
+            return col.sortOrder;
+        if (this.sortProp === col.prop)
+            return this.sortDirection;
+        return null;
+    }
+    handleSort = (col) => {
+        const prop = col.prop;
+        // T2：受控排序（col.sortOrder 已定义）→ 不内部切换，仅 emit 交外部决策
+        if (col.sortOrder !== undefined) {
+            this.hbSortChange.emit({ prop, order: col.sortOrder });
+            return;
+        }
         if (this.sortProp === prop) {
-            this.sortDirection =
-                this.sortDirection === 'ascending' ? 'descending' : this.sortDirection === 'descending' ? null : 'ascending';
+            this.sortDirection = this.sortDirection === 'ascending' ? 'descending' : this.sortDirection === 'descending' ? null : 'ascending';
         }
         else {
             this.sortProp = prop;
@@ -176,13 +210,38 @@ export class Table {
         }
         this.hbSortChange.emit({ prop, order: this.sortDirection });
     };
+    /**
+     * T2 增强的排序数据：支持 col.sorter 自定义排序函数 + 受控 sortOrder。
+     * 多列排序不支持（与 antd 行为一致，取首个有效排序列）。
+     */
     get sortedData() {
-        if (!this.sortProp || !this.sortDirection)
+        // 找到当前生效的排序列
+        let activeCol;
+        let activeOrder = null;
+        for (const col of this.columns) {
+            if (col.sortable || col.sorter) {
+                const order = this.effectiveSortOrder(col);
+                if (order) {
+                    activeCol = col;
+                    activeOrder = order;
+                    break;
+                }
+            }
+        }
+        // 兼容旧逻辑：若没有列级 sortOrder，回退到内部 sortProp/sortDirection
+        if (!activeCol && this.sortProp && this.sortDirection) {
+            activeOrder = this.sortDirection;
+        }
+        if (!activeOrder)
             return this.data;
-        const direction = this.sortDirection === 'ascending' ? 1 : -1;
+        const direction = activeOrder === 'ascending' ? 1 : -1;
+        const sortProp = activeCol ? activeCol.prop : this.sortProp;
+        const sorterFn = activeCol && activeCol.sorter;
         return [...this.data].sort((a, b) => {
-            const va = a[this.sortProp];
-            const vb = b[this.sortProp];
+            if (sorterFn)
+                return sorterFn(a, b) * direction;
+            const va = a[sortProp];
+            const vb = b[sortProp];
             if (va < vb)
                 return -1 * direction;
             if (va > vb)
@@ -190,7 +249,72 @@ export class Table {
             return 0;
         });
     }
-    ;
+    /**
+     * T3 筛选：应用所有列的 onFilter。
+     * 受控（col.filteredValue 已定义）→ 用该值；否则用内部 internalFilters[prop]。
+     */
+    get filteredData() {
+        let result = this.sortedData;
+        for (const col of this.columns) {
+            if (!col.onFilter || !col.filters)
+                continue;
+            const values = col.filteredValue !== undefined ? col.filteredValue : this.internalFilters[col.prop];
+            if (!values || values.length === 0)
+                continue;
+            result = result.filter(row => values.some(v => col.onFilter(row, v)));
+        }
+        return result;
+    }
+    /**
+     * T1 分页：取当前页数据切片（仅当 pagination 配置时）。
+     * 在 sorted+filtered 之后切片。
+     */
+    get pagedData() {
+        const filtered = this.filteredData;
+        if (!this.pagination)
+            return filtered;
+        const page = this.currentPage;
+        const size = this.currentPageSize;
+        const start = (page - 1) * size;
+        return filtered.slice(start, start + size);
+    }
+    /** T1：当前页（受控优先） */
+    get currentPage() {
+        return this.pagination?.current ?? this.internalPage;
+    }
+    /** T1：当前每页条数（受控优先） */
+    get currentPageSize() {
+        return this.pagination?.pageSize ?? this.internalPageSize;
+    }
+    /** T1：分页切换 */
+    handlePageChange = (page) => {
+        this.internalPage = page;
+        this.hbPageChange.emit({ current: page, pageSize: this.currentPageSize });
+    };
+    /** T1：每页条数切换 */
+    handlePageSizeChange = (size) => {
+        this.internalPageSize = size;
+        // 切条数后回到第一页避免越界
+        this.internalPage = 1;
+        this.hbPageChange.emit({ current: 1, pageSize: size });
+    };
+    /** T3：筛选下拉切换某项 */
+    handleFilterToggle = (col, value) => {
+        const current = col.filteredValue !== undefined ? col.filteredValue : this.internalFilters[col.prop] || [];
+        const next = current.includes(value) ? current.filter(v => v !== value) : [...current, value];
+        // 仅内部状态时更新；受控（filteredValue 已定义）则只 emit 交外部
+        if (col.filteredValue === undefined) {
+            this.internalFilters = { ...this.internalFilters, [col.prop]: next };
+        }
+        this.hbFilterChange.emit({ prop: col.prop, values: next });
+    };
+    /** T3：清空某列筛选 */
+    handleFilterReset = (col) => {
+        if (col.filteredValue === undefined) {
+            this.internalFilters = { ...this.internalFilters, [col.prop]: [] };
+        }
+        this.hbFilterChange.emit({ prop: col.prop, values: [] });
+    };
     get isAllSelected() {
         return this.data.length > 0 && this.selectedRows.size === this.data.length;
     }
@@ -221,7 +345,7 @@ export class Table {
     emitSelection() {
         const selected = Array.from(this.selectedRows)
             .sort((a, b) => a - b)
-            .map((i) => this.data[i])
+            .map(i => this.data[i])
             .filter(Boolean);
         this.hbSelectionChange.emit(selected);
     }
@@ -235,8 +359,21 @@ export class Table {
     get hasActions() {
         return !!this.actions && this.actions.length > 0;
     }
-    /** 计算固定列的 sticky 偏移（左侧/右侧累计宽度） */
-    get fixedOffsets() {
+    /** T3：某列是否有激活筛选 */
+    isColumnFiltered(col) {
+        const values = col.filteredValue !== undefined ? col.filteredValue : this.internalFilters[col.prop];
+        return !!values && values.length > 0;
+    }
+    /**
+     * 计算固定列的 sticky 偏移（左侧/右侧累计宽度）。
+     * P1 优化：缓存结果，仅当 columns 引用变化时重算。
+     */
+    _fixedOffsetsCache = null;
+    _fixedOffsetsColumnsRef = null;
+    getFixedOffsets() {
+        if (this._fixedOffsetsCache && this._fixedOffsetsColumnsRef === this.columns) {
+            return this._fixedOffsetsCache;
+        }
         const result = {};
         let leftAcc = '0px';
         for (const c of this.columns) {
@@ -254,10 +391,12 @@ export class Table {
                 rightAcc = `calc(${rightAcc} + ${c.width || '0px'})`;
             }
         }
+        this._fixedOffsetsCache = result;
+        this._fixedOffsetsColumnsRef = this.columns;
         return result;
     }
     cellStyle(prop, base) {
-        const off = this.fixedOffsets[prop];
+        const off = this.getFixedOffsets()[prop];
         const style = { ...(base || {}) };
         if (off?.side === 'left') {
             style.position = 'sticky';
@@ -271,11 +410,18 @@ export class Table {
         }
         return style;
     }
+    /**
+     * 渲染单元格内容（T7：优先 col.render，其次 formatter，最后原值）。
+     */
+    renderCell(col, row, rowIndex) {
+        if (col.render)
+            return col.render(row, rowIndex);
+        if (col.formatter)
+            return col.formatter(row, rowIndex);
+        return row[col.prop] ?? '';
+    }
     /**
      * 渲染单行（普通 + 虚拟滚动 + 树形 共用）。
-     * - 普通模式：rowIndex 为在 sortedData 中的全局索引。
-     * - 树形模式：fr.level 决定缩进，第一列渲染展开箭头，key 取 fr.key。
-     * fr 为可选；未传时按普通模式渲染。
      */
     renderRow(row, rowIndex, fr) {
         const tree = !!fr;
@@ -283,15 +429,17 @@ export class Table {
         const rowKeyVal = fr ? fr.key : this.rowKey ? row[this.rowKey] : rowIndex;
         const indent = level * 16;
         const isEditing = (prop) => !!this.editingCell && this.editingCell.rowKey === rowKeyVal && this.editingCell.prop === prop;
+        // T8：行 className
+        const extraRowClass = this.rowClassName ? this.rowClassName(row, rowIndex) : '';
         return (h("tr", { key: rowKeyVal, class: {
                 'hb-table__row': true,
                 'hb-table__row--striped': this.stripe && rowIndex % 2 === 1,
                 'hb-table__row--current': this.highlightCurrentRow && rowIndex === this.currentRow,
                 'hb-table__row--selected': this.selectedRows.has(rowIndex),
                 'hb-table__row--tree': tree,
-            }, onClick: () => this.handleRowClick(row, rowIndex) }, this.selectable && (h("td", { class: "hb-table__selection", onClick: (e) => e.stopPropagation() }, h("input", { type: "checkbox", class: "hb-table__checkbox", checked: this.selectedRows.has(rowIndex), onChange: (e) => this.toggleRow(rowIndex, e) }))), this.columns.map((col, colIdx) => {
-            const off = this.fixedOffsets[col.prop];
-            // 树形模式：第一列加缩进 + 展开箭头
+                [extraRowClass]: !!extraRowClass,
+            }, onClick: () => this.handleRowClick(row, rowIndex) }, this.selectable && (h("td", { class: "hb-table__selection", onClick: e => e.stopPropagation() }, h("input", { type: "checkbox", class: "hb-table__checkbox", checked: this.selectedRows.has(rowIndex), onChange: e => this.toggleRow(rowIndex, e) }))), this.columns.map((col, colIdx) => {
+            const off = this.getFixedOffsets()[col.prop];
             const isFirstCol = colIdx === 0;
             const showExpand = tree && isFirstCol && fr.hasChildren;
             const expanded = showExpand && this.expandedRowKeys.indexOf(rowKeyVal) !== -1;
@@ -302,49 +450,75 @@ export class Table {
                     'hb-table__cell--fixed-left': off?.side === 'left',
                     'hb-table__cell--fixed-right': off?.side === 'right',
                     'hb-table__cell--editable': editableActive,
-                }, onClick: editableActive ? (e) => this.startEdit(e, rowKeyVal, col.prop) : undefined }, tree && isFirstCol && (h("span", { class: "hb-table__indent", style: { display: 'inline-block', width: `${indent}px` }, "aria-hidden": "true" })), showExpand && (h("button", { type: "button", class: { 'hb-table__expand': true, 'hb-table__expand--expanded': expanded }, "aria-label": expanded ? '收起' : '展开', onClick: (e) => {
+                    'hb-table__cell--ellipsis': !!col.ellipsis,
+                }, onClick: editableActive ? e => this.startEdit(e, rowKeyVal, col.prop) : undefined }, tree && isFirstCol && h("span", { class: "hb-table__indent", style: { display: 'inline-block', width: `${indent}px` }, "aria-hidden": "true" }), showExpand && (h("button", { type: "button", class: { 'hb-table__expand': true, 'hb-table__expand--expanded': expanded }, "aria-label": expanded ? '收起' : '展开', onClick: e => {
                     e.stopPropagation();
                     this.toggleExpand(row, rowKeyVal);
-                } }, expanded ? '▼' : '▶')), showExpand === false && tree && isFirstCol && (h("span", { class: "hb-table__expand-placeholder", style: { display: 'inline-block', width: '16px' }, "aria-hidden": "true" })), editing ? (h("input", { class: "hb-table__edit-input", type: "text", value: row[col.prop] ?? '', onBlur: (e) => this.commitEdit(e, row, col.prop), onKeyDown: (e) => this.onEditKeydown(e, row, col.prop) })) : (h("slot", { name: `cell-${col.prop}` }, col.formatter ? col.formatter(row, rowIndex) : row[col.prop] ?? ''))));
-        }), this.hasActions && (h("td", { class: "hb-table__td--actions", style: { textAlign: 'right', whiteSpace: 'nowrap' }, onClick: (e) => e.stopPropagation() }, this.actions.map((act) => (h("button", { type: "button", class: {
+                } }, expanded ? '▼' : '▶')), showExpand === false && tree && isFirstCol && h("span", { class: "hb-table__expand-placeholder", style: { display: 'inline-block', width: '16px' }, "aria-hidden": "true" }), editing ? (h("input", { class: "hb-table__edit-input", type: "text", value: row[col.prop] ?? '', onBlur: e => this.commitEdit(e, row, col.prop), onKeyDown: e => this.onEditKeydown(e, row, col.prop) })) : (
+            // T7：col.render 优先（支持返回 JSX）；否则 formatter；否则原值
+            h("slot", { name: `cell-${col.prop}` }, this.renderCell(col, row, rowIndex)))));
+        }), this.hasActions && (h("td", { class: "hb-table__td--actions", style: { textAlign: 'right', whiteSpace: 'nowrap' }, onClick: e => e.stopPropagation() }, this.actions.map(act => (h("button", { type: "button", class: {
                 'hb-table__action': true,
                 'hb-table__action--primary': act.type === 'primary',
                 'hb-table__action--danger': act.type === 'danger',
             }, disabled: act.disabled ? act.disabled(row, rowIndex) : false, onClick: () => this.handleAction(row, rowIndex, act.key) }, act.label)))))));
     }
+    /**
+     * T3：渲染表头某列的筛选下拉。
+     */
+    renderColumnFilter = (col) => {
+        if (!col.filters || col.filters.length === 0 || !col.onFilter)
+            return null;
+        const activeValues = col.filteredValue !== undefined ? col.filteredValue : this.internalFilters[col.prop] || [];
+        const filtered = this.isColumnFiltered(col);
+        return (h("span", { class: "hb-table__filter", onClick: e => e.stopPropagation() }, h("details", { class: "hb-table__filter-dropdown" }, h("summary", { class: { 'hb-table__filter-trigger': true, 'hb-table__filter-trigger--active': filtered }, "aria-label": "\u7B5B\u9009" }, h("svg", { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M22 3H2l8 9.46V19l4 2v-8.54L22 3z" }))), h("div", { class: "hb-table__filter-menu", role: "menu" }, h("ul", { class: "hb-table__filter-list" }, col.filters.map(f => {
+            const checked = activeValues.includes(f.value);
+            return (h("li", { class: "hb-table__filter-item", role: "menuitemcheckbox", "aria-checked": checked ? 'true' : 'false' }, h("label", { class: "hb-table__filter-label" }, h("input", { type: "checkbox", class: "hb-table__filter-checkbox", checked: checked, onChange: () => this.handleFilterToggle(col, f.value) }), h("span", null, f.label))));
+        })), h("div", { class: "hb-table__filter-actions" }, h("button", { type: "button", class: "hb-table__filter-reset", onClick: () => this.handleFilterReset(col) }, "\u91CD\u7F6E"))))));
+    };
     /** 渲染表头（普通 + 虚拟滚动共用，表头始终固定不随滚） */
     renderHeader() {
-        return (h("thead", null, h("tr", null, this.selectable && (h("th", { class: "hb-table__selection" }, h("input", { type: "checkbox", class: "hb-table__checkbox", checked: this.isAllSelected, ref: (el) => {
+        return (h("thead", null, h("tr", null, this.selectable && (h("th", { class: "hb-table__selection" }, h("input", { type: "checkbox", class: "hb-table__checkbox", checked: this.isAllSelected, ref: el => {
                 this.allCheckboxRef = el;
-            }, onChange: this.toggleAll }))), this.columns.map((col) => {
-            const off = this.fixedOffsets[col.prop];
+            }, onChange: this.toggleAll }))), this.columns.map(col => {
+            const off = this.getFixedOffsets()[col.prop];
+            // T2：列可排序的条件（sortable 或 sorter）
+            const canSort = !!col.sortable || !!col.sorter;
+            const order = this.effectiveSortOrder(col);
             return (h("th", { key: col.prop, style: this.cellStyle(col.prop, {
                     width: col.width,
                     minWidth: col.minWidth,
                     textAlign: col.align || 'left',
                 }), class: {
-                    'hb-table__th--sortable': col.sortable,
+                    'hb-table__th--sortable': canSort,
                     'hb-table__cell--fixed-left': off?.side === 'left',
                     'hb-table__cell--fixed-right': off?.side === 'right',
-                }, onClick: col.sortable ? () => this.handleSort(col.prop) : undefined }, h("div", { class: "hb-table__th-content" }, h("span", null, col.label), col.sortable && (h("span", { class: "hb-table__sort" }, h("span", { class: { 'hb-table__sort-icon': true, 'hb-table__sort-icon--active': this.sortProp === col.prop && this.sortDirection === 'ascending' } }, "\u25B2"), h("span", { class: { 'hb-table__sort-icon': true, 'hb-table__sort-icon--active': this.sortProp === col.prop && this.sortDirection === 'descending' } }, "\u25BC"))))));
+                }, onClick: canSort ? () => this.handleSort(col) : undefined }, h("div", { class: "hb-table__th-content" }, h("span", null, col.label), canSort && (h("span", { class: "hb-table__sort" }, h("span", { class: { 'hb-table__sort-icon': true, 'hb-table__sort-icon--active': order === 'ascending' } }, "\u25B2"), h("span", { class: { 'hb-table__sort-icon': true, 'hb-table__sort-icon--active': order === 'descending' } }, "\u25BC"))), this.renderColumnFilter(col))));
         }), this.hasActions && (h("th", { class: "hb-table__th--actions", style: { textAlign: 'right', whiteSpace: 'nowrap' } }, "\u64CD\u4F5C")))));
     }
+    /** T1：渲染内置分页底部栏 */
+    renderPagination() {
+        if (!this.pagination)
+            return null;
+        const total = this.filteredData.length;
+        const page = this.currentPage;
+        const size = this.currentPageSize;
+        const totalPages = Math.max(1, Math.ceil(total / size));
+        const showTotal = this.pagination.showTotal;
+        return (h("div", { class: "hb-table__pagination" }, showTotal && h("span", { class: "hb-table__pagination-total" }, "\u5171 ", total, " \u6761"), h("span", { class: "hb-table__pagination-pages" }, h("button", { type: "button", class: "hb-table__pagination-btn", disabled: page <= 1, onClick: () => this.handlePageChange(page - 1), "aria-label": "\u4E0A\u4E00\u9875" }, "\u2039"), h("span", { class: "hb-table__pagination-current" }, page, " / ", totalPages), h("button", { type: "button", class: "hb-table__pagination-btn", disabled: page >= totalPages, onClick: () => this.handlePageChange(page + 1), "aria-label": "\u4E0B\u4E00\u9875" }, "\u203A")), this.pagination.pageSizes && (h("select", { class: "hb-table__pagination-size", onChange: e => this.handlePageSizeChange(parseInt(e.target.value, 10)) }, this.pagination.pageSizes.map(s => (h("option", { value: String(s), selected: s === size }, s, " \u6761/\u9875")))))));
+    }
     render() {
-        const displayData = this.sortedData;
+        // T1+T2+T3：排序 → 筛选 → 分页 依次应用
+        const displayData = this.pagedData;
         const isEmpty = displayData.length === 0;
-        // 树形模式：把可见树拍平成带 level 的行列表（仅含已展开链路上的后代）
         const flatRows = this.isTreeMode ? this.flattenTree(displayData) : [];
-        // 虚拟滚动：固定高度滚动视口 + 撑高容器 + 仅渲染可见窗口行（绝对定位 offset）
-        // 注意：树形 + 虚拟滚动组合较复杂，此处虚拟滚动沿用普通行渲染（不展开树），
-        // 保留树形仅在普通模式下生效以降低风险。
         const renderVirtualBody = () => {
             const { startIndex, endIndex } = this.visibleRange;
             const offsetTop = startIndex * (this.itemHeight > 0 ? this.itemHeight : 1);
             return (h("div", { class: "hb-table__virtual-viewport", style: { height: `${this.virtualScrollHeight}px`, overflowY: 'auto' }, onScroll: this.handleVirtualScroll }, h("div", { class: "hb-table__virtual-spacer", style: { height: `${this.virtualTotalHeight}px`, position: 'relative' } }, h("table", { class: "hb-table__table hb-table__table--virtual" }, h("tbody", null, isEmpty ? (h("tr", null, h("td", { colSpan: this.columns.length + (this.selectable ? 1 : 0) + (this.hasActions ? 1 : 0), class: "hb-table__empty" }, this.emptyText))) : (h("tr", { style: { height: `${offsetTop}px` }, "aria-hidden": "true" })), displayData.slice(startIndex, endIndex).map((row, i) => this.renderRow(row, startIndex + i)))))));
         };
-        // 普通模式：树形启用时按拍平列表渲染（带 level 缩进 + 展开箭头），否则原样按行渲染
         const renderNormalBody = () => (h("tbody", null, isEmpty ? (h("tr", null, h("td", { colSpan: this.columns.length + (this.selectable ? 1 : 0) + (this.hasActions ? 1 : 0), class: "hb-table__empty" }, this.emptyText))) : this.isTreeMode ? (flatRows.map((fr, i) => this.renderRow(fr.row, i, fr))) : (displayData.map((row, rowIndex) => this.renderRow(row, rowIndex)))));
-        return (h("div", { class: { 'hb-table': true, [`hb-table--${this.size}`]: true, 'hb-table--border': this.border, 'hb-table--virtual': this.virtualScroll } }, this.loading && (h("div", { class: "hb-table__loading" }, h("div", { class: "hb-table__loading-spinner" }))), this.virtualScroll ? (h("div", { class: "hb-table__virtual-wrapper" }, h("table", { class: "hb-table__table" }, this.renderHeader()), renderVirtualBody())) : (h("div", { class: "hb-table__wrapper", style: this.maxHeight ? { maxHeight: this.maxHeight, overflow: 'auto' } : undefined }, h("table", { class: "hb-table__table" }, this.renderHeader(), renderNormalBody())))));
+        return (h("div", { class: { 'hb-table': true, [`hb-table--${this.size}`]: true, 'hb-table--border': this.border, 'hb-table--virtual': this.virtualScroll, 'hb-table--has-pagination': !!this.pagination } }, this.loading && (h("div", { class: "hb-table__loading" }, h("div", { class: "hb-table__loading-spinner" }))), this.virtualScroll ? (h("div", { class: "hb-table__virtual-wrapper" }, h("table", { class: "hb-table__table" }, this.renderHeader()), renderVirtualBody())) : (h("div", { class: "hb-table__wrapper", style: this.maxHeight ? { maxHeight: this.maxHeight, overflow: 'auto' } : undefined }, h("table", { class: "hb-table__table" }, this.renderHeader(), renderNormalBody()))), this.renderPagination()));
     }
     static get is() { return "hb-table"; }
     static get encapsulation() { return "shadow"; }
@@ -712,6 +886,51 @@ export class Table {
                 "attribute": "editable",
                 "reflect": false,
                 "defaultValue": "false"
+            },
+            "pagination": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "TablePagination",
+                    "resolved": "TablePagination",
+                    "references": {
+                        "TablePagination": {
+                            "location": "local",
+                            "path": "/Users/vscoderwhy/Desktop/product/web-common/huibo-ui/src/components/Table/Table.tsx",
+                            "id": "src/components/Table/Table.tsx::TablePagination"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u5185\u7F6E\u5206\u9875\u914D\u7F6E\uFF08T1\uFF09\u3002\u4F20\u5165\u540E Table \u81EA\u52A8\u5BF9 data \u5207\u7247\u5E76\u5728\u5E95\u90E8\u6E32\u67D3 <hb-pagination>\u3002\n\u4E0D\u4F20\u5219\u4E0D\u5206\u9875\uFF08\u5411\u540E\u517C\u5BB9\uFF09\u3002"
+                },
+                "getter": false,
+                "setter": false
+            },
+            "rowClassName": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(row: Record<string, any>, index: number) => string",
+                    "resolved": "(row: Record<string, any>, index: number) => string",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "\u884C className\uFF08\u51FD\u6570\uFF0C\u6309\u884C\u8FD4\u56DE\u9644\u52A0 class\uFF0CT8\uFF09"
+                },
+                "getter": false,
+                "setter": false
             }
         };
     }
@@ -723,7 +942,10 @@ export class Table {
             "selectedRows": {},
             "scrollTop": {},
             "expandedRowKeys": {},
-            "editingCell": {}
+            "editingCell": {},
+            "internalPage": {},
+            "internalPageSize": {},
+            "internalFilters": {}
         };
     }
     static get events() {
@@ -848,12 +1070,45 @@ export class Table {
                         }
                     }
                 }
+            }, {
+                "method": "hbPageChange",
+                "name": "hbPageChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "T1 \u5206\u9875\u53D8\u5316\u4E8B\u4EF6 { current, pageSize }"
+                },
+                "complexType": {
+                    "original": "{ current: number; pageSize: number }",
+                    "resolved": "{ current: number; pageSize: number; }",
+                    "references": {}
+                }
+            }, {
+                "method": "hbFilterChange",
+                "name": "hbFilterChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "T3 \u7B5B\u9009\u53D8\u5316\u4E8B\u4EF6 { prop, values }"
+                },
+                "complexType": {
+                    "original": "{ prop: string; values: (string | number)[] }",
+                    "resolved": "{ prop: string; values: (string | number)[]; }",
+                    "references": {}
+                }
             }];
     }
     static get watchers() {
         return [{
                 "propName": "data",
                 "methodName": "handleDataChange"
+            }, {
+                "propName": "pagination",
+                "methodName": "handlePaginationChange"
             }];
     }
 }