huibo-ui 0.5.0 → 0.6.0

package/dist/cjs/hb-table.cjs.entry.js

@@ -16,6 +16,8 @@ const Table = class {
         this.hbAction = index.createEvent(this, "hbAction", 7);
         this.hbExpandChange = index.createEvent(this, "hbExpandChange", 7);
         this.hbCellChange = index.createEvent(this, "hbCellChange", 7);
+        this.hbPageChange = index.createEvent(this, "hbPageChange", 7);
+        this.hbFilterChange = index.createEvent(this, "hbFilterChange", 7);
     }
     /** 数据源 */
     data = [];
@@ -55,6 +57,13 @@ const Table = class {
     treeProps;
     /** 是否开启行内编辑模式（默认关闭）。需列配置 column.editable=true 才对该列生效 */
     editable = false;
+    /**
+     * 内置分页配置（T1）。传入后 Table 自动对 data 切片并在底部渲染 <hb-pagination>。
+     * 不传则不分页（向后兼容）。
+     */
+    pagination;
+    /** 行 className（函数，按行返回附加 class，T8） */
+    rowClassName;
     sortProp = '';
     sortDirection = null;
     currentRow = -1;
@@ -65,6 +74,12 @@ const Table = class {
     expandedRowKeys = [];
     /** 行内编辑：当前正在编辑的单元格 { key, prop }，null 表示无 */
     editingCell = null;
+    /** T1 分页：内部当前页（非受控时用） */
+    internalPage = 1;
+    /** T1 分页：内部每页条数（非受控时用） */
+    internalPageSize = 10;
+    /** T3 筛选：内部筛选状态 { prop: 选中的 value 列表 }（非受控时用） */
+    internalFilters = {};
     /** 排序变化事件 */
     hbSortChange;
     /** 行点击事件 */
@@ -77,10 +92,21 @@ const Table = class {
     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;
@@ -91,9 +117,6 @@ const Table = class {
     }
     /**
      * 把树拍平成可见行列表：仅保留「祖先链路全部已展开」的后代。
-     * @param list  当前层级的数组
-     * @param level 当前层级（根 = 0）
-     * @param parentKeyPath 父级 key 路径，用于构造深层稳定 key（避免不同分支同 index 撞 key）
      */
     flattenTree(list, level = 0, parentKeyPath = '') {
         const field = this.childrenField;
@@ -104,7 +127,6 @@ const Table = class {
             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));
             }
@@ -129,7 +151,6 @@ const Table = class {
     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 });
@@ -147,7 +168,6 @@ const Table = class {
     };
     allCheckboxRef;
     componentDidRender() {
-        // indeterminate 不是可反射的 HTML 属性，必须通过 DOM 属性设置
         if (this.allCheckboxRef) {
             this.allCheckboxRef.indeterminate = this.isIndeterminate;
         }
@@ -178,7 +198,24 @@ const Table = class {
     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';
         }
@@ -188,13 +225,38 @@ const Table = class {
         }
         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)
@@ -202,6 +264,72 @@ const Table = class {
             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;
     }
@@ -246,10 +374,14 @@ const Table = class {
     get hasActions() {
         return !!this.actions && this.actions.length > 0;
     }
+    /** T3：某列是否有激活筛选 */
+    isColumnFiltered(col) {
+        const values = col.filteredValue !== undefined ? col.filteredValue : this.internalFilters[col.prop];
+        return !!values && values.length > 0;
+    }
     /**
      * 计算固定列的 sticky 偏移（左侧/右侧累计宽度）。
      * P1 优化：缓存结果，仅当 columns 引用变化时重算。
-     * 修复前是 getter，被每个 <td>/<th> 反复调用，复杂度 O(rows×cols²)。
      */
     _fixedOffsetsCache = null;
     _fixedOffsetsColumnsRef = null;
@@ -293,11 +425,18 @@ const Table = class {
         }
         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;
@@ -305,15 +444,17 @@ const Table = class {
         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 (index.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,
+                [extraRowClass]: !!extraRowClass,
             }, onClick: () => this.handleRowClick(row, rowIndex) }, this.selectable && (index.h("td", { class: "hb-table__selection", onClick: e => e.stopPropagation() }, index.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;
@@ -324,52 +465,79 @@ const Table = class {
                     'hb-table__cell--fixed-left': off?.side === 'left',
                     'hb-table__cell--fixed-right': off?.side === 'right',
                     'hb-table__cell--editable': editableActive,
+                    'hb-table__cell--ellipsis': !!col.ellipsis,
                 }, onClick: editableActive ? e => this.startEdit(e, rowKeyVal, col.prop) : undefined }, tree && isFirstCol && index.h("span", { class: "hb-table__indent", style: { display: 'inline-block', width: `${indent}px` }, "aria-hidden": "true" }), showExpand && (index.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 && index.h("span", { class: "hb-table__expand-placeholder", style: { display: 'inline-block', width: '16px' }, "aria-hidden": "true" }), editing ? (index.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) })) : (index.h("slot", { name: `cell-${col.prop}` }, col.formatter ? col.formatter(row, rowIndex) : (row[col.prop] ?? '')))));
+                } }, expanded ? '▼' : '▶')), showExpand === false && tree && isFirstCol && index.h("span", { class: "hb-table__expand-placeholder", style: { display: 'inline-block', width: '16px' }, "aria-hidden": "true" }), editing ? (index.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；否则原值
+            index.h("slot", { name: `cell-${col.prop}` }, this.renderCell(col, row, rowIndex)))));
         }), this.hasActions && (index.h("td", { class: "hb-table__td--actions", style: { textAlign: 'right', whiteSpace: 'nowrap' }, onClick: e => e.stopPropagation() }, this.actions.map(act => (index.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 (index.h("span", { class: "hb-table__filter", onClick: e => e.stopPropagation() }, index.h("details", { class: "hb-table__filter-dropdown" }, index.h("summary", { class: { 'hb-table__filter-trigger': true, 'hb-table__filter-trigger--active': filtered }, "aria-label": "\u7B5B\u9009" }, index.h("svg", { viewBox: "0 0 24 24", width: "14", height: "14", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("path", { d: "M22 3H2l8 9.46V19l4 2v-8.54L22 3z" }))), index.h("div", { class: "hb-table__filter-menu", role: "menu" }, index.h("ul", { class: "hb-table__filter-list" }, col.filters.map(f => {
+            const checked = activeValues.includes(f.value);
+            return (index.h("li", { class: "hb-table__filter-item", role: "menuitemcheckbox", "aria-checked": checked ? 'true' : 'false' }, index.h("label", { class: "hb-table__filter-label" }, index.h("input", { type: "checkbox", class: "hb-table__filter-checkbox", checked: checked, onChange: () => this.handleFilterToggle(col, f.value) }), index.h("span", null, f.label))));
+        })), index.h("div", { class: "hb-table__filter-actions" }, index.h("button", { type: "button", class: "hb-table__filter-reset", onClick: () => this.handleFilterReset(col) }, "\u91CD\u7F6E"))))));
+    };
     /** 渲染表头（普通 + 虚拟滚动共用，表头始终固定不随滚） */
     renderHeader() {
         return (index.h("thead", null, index.h("tr", null, this.selectable && (index.h("th", { class: "hb-table__selection" }, index.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.getFixedOffsets()[col.prop];
+            // T2：列可排序的条件（sortable 或 sorter）
+            const canSort = !!col.sortable || !!col.sorter;
+            const order = this.effectiveSortOrder(col);
             return (index.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 }, index.h("div", { class: "hb-table__th-content" }, index.h("span", null, col.label), col.sortable && (index.h("span", { class: "hb-table__sort" }, index.h("span", { class: { 'hb-table__sort-icon': true, 'hb-table__sort-icon--active': this.sortProp === col.prop && this.sortDirection === 'ascending' } }, "\u25B2"), index.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 }, index.h("div", { class: "hb-table__th-content" }, index.h("span", null, col.label), canSort && (index.h("span", { class: "hb-table__sort" }, index.h("span", { class: { 'hb-table__sort-icon': true, 'hb-table__sort-icon--active': order === 'ascending' } }, "\u25B2"), index.h("span", { class: { 'hb-table__sort-icon': true, 'hb-table__sort-icon--active': order === 'descending' } }, "\u25BC"))), this.renderColumnFilter(col))));
         }), this.hasActions && (index.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 (index.h("div", { class: "hb-table__pagination" }, showTotal && index.h("span", { class: "hb-table__pagination-total" }, "\u5171 ", total, " \u6761"), index.h("span", { class: "hb-table__pagination-pages" }, index.h("button", { type: "button", class: "hb-table__pagination-btn", disabled: page <= 1, onClick: () => this.handlePageChange(page - 1), "aria-label": "\u4E0A\u4E00\u9875" }, "\u2039"), index.h("span", { class: "hb-table__pagination-current" }, page, " / ", totalPages), index.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 && (index.h("select", { class: "hb-table__pagination-size", onChange: e => this.handlePageSizeChange(parseInt(e.target.value, 10)) }, this.pagination.pageSizes.map(s => (index.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 (index.h("div", { class: "hb-table__virtual-viewport", style: { height: `${this.virtualScrollHeight}px`, overflowY: 'auto' }, onScroll: this.handleVirtualScroll }, index.h("div", { class: "hb-table__virtual-spacer", style: { height: `${this.virtualTotalHeight}px`, position: 'relative' } }, index.h("table", { class: "hb-table__table hb-table__table--virtual" }, index.h("tbody", null, isEmpty ? (index.h("tr", null, index.h("td", { colSpan: this.columns.length + (this.selectable ? 1 : 0) + (this.hasActions ? 1 : 0), class: "hb-table__empty" }, this.emptyText))) : (index.h("tr", { style: { height: `${offsetTop}px` }, "aria-hidden": "true" })), displayData.slice(startIndex, endIndex).map((row, i) => this.renderRow(row, startIndex + i)))))));
         };
-        // 普通模式：树形启用时按拍平列表渲染（带 level 缩进 + 展开箭头），否则原样按行渲染
         const renderNormalBody = () => (index.h("tbody", null, isEmpty ? (index.h("tr", null, index.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 (index.h("div", { class: { 'hb-table': true, [`hb-table--${this.size}`]: true, 'hb-table--border': this.border, 'hb-table--virtual': this.virtualScroll } }, this.loading && (index.h("div", { class: "hb-table__loading" }, index.h("div", { class: "hb-table__loading-spinner" }))), this.virtualScroll ? (index.h("div", { class: "hb-table__virtual-wrapper" }, index.h("table", { class: "hb-table__table" }, this.renderHeader()), renderVirtualBody())) : (index.h("div", { class: "hb-table__wrapper", style: this.maxHeight ? { maxHeight: this.maxHeight, overflow: 'auto' } : undefined }, index.h("table", { class: "hb-table__table" }, this.renderHeader(), renderNormalBody())))));
+        return (index.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 && (index.h("div", { class: "hb-table__loading" }, index.h("div", { class: "hb-table__loading-spinner" }))), this.virtualScroll ? (index.h("div", { class: "hb-table__virtual-wrapper" }, index.h("table", { class: "hb-table__table" }, this.renderHeader()), renderVirtualBody())) : (index.h("div", { class: "hb-table__wrapper", style: this.maxHeight ? { maxHeight: this.maxHeight, overflow: 'auto' } : undefined }, index.h("table", { class: "hb-table__table" }, this.renderHeader(), renderNormalBody()))), this.renderPagination()));
     }
     static get watchers() { return {
-        "data": ["handleDataChange"]
+        "data": ["handleDataChange"],
+        "pagination": ["handlePaginationChange"]
     }; }
 };
 Table.style = HbTableStyle0;