@kdcloudjs/shoelace 1.0.20 → 1.0.22

package/dist/chunks/chunk.XIWSHOAU.js

@@ -0,0 +1,820 @@
+import {
+  getDragRow
+} from "./chunk.DSRLY2FD.js";
+import {
+  getExpendRow
+} from "./chunk.IUVORREB.js";
+import {
+  getDefaultFilters
+} from "./chunk.TF3IWFSX.js";
+import {
+  convertRowSelectionState,
+  getRowSelectionOptions,
+  getSelectionColumn
+} from "./chunk.IKG7GFWI.js";
+import {
+  getDefaultSorting
+} from "./chunk.WQTJ57OT.js";
+import {
+  table_style_default
+} from "./chunk.YETPLLCY.js";
+import {
+  getDefaultPinning
+} from "./chunk.REAQMJXE.js";
+import {
+  getClientHeight,
+  getClientWidth,
+  getOffsetWidth,
+  getScrollHeight
+} from "./chunk.YWEYEF5K.js";
+import {
+  CUSTOM_CELL,
+  CUSTOM_ROW,
+  VIRTUALIZED_DEFAULT
+} from "./chunk.UP5K765N.js";
+import {
+  SlRadio
+} from "./chunk.N76DQWXN.js";
+import {
+  SlPagination
+} from "./chunk.CSHENRJ2.js";
+import {
+  SlCheckbox
+} from "./chunk.WGQYVXZW.js";
+import {
+  SlIcon
+} from "./chunk.7JKNUYMB.js";
+import {
+  ShoelaceElement
+} from "./chunk.AG6MRYHQ.js";
+import {
+  __decorateClass,
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk.W5KB6T3Z.js";
+
+// src/components/table/table.component.ts
+import { classMap } from "lit/directives/class-map.js";
+import {
+  createColumnHelper,
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  TableController
+} from "@tanstack/lit-table";
+import { VirtualizerController } from "@tanstack/lit-virtual";
+import { createRef, ref } from "lit/directives/ref.js";
+import { debounce, get, some } from "lodash";
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { state } from "lit/decorators/state.js";
+var SlTable = class extends ShoelaceElement {
+  constructor() {
+    super(...arguments);
+    this.tableController = new TableController(this);
+    this.rowKey = "key";
+    this.columns = [];
+    this.dataSource = [];
+    this.loading = false;
+    this.bordered = false;
+    this.direction = "ltr";
+    this.showHeader = true;
+    this.tableScroll = {};
+    this.enableColumnResizing = false;
+    this.rowDrag = false;
+    this.rowSelectedMap = {};
+    this.expandedMap = {};
+    this.sorting = [];
+    this.columnFilters = [];
+    this.tableWidth = 0;
+    this.columnSizing = {};
+    this.pageIndex = 0;
+    this.columnPinning = {
+      left: ["drag", "expend", "select"],
+      right: []
+    };
+    this.tableWrapRef = createRef();
+    this.headerWrapRef = createRef();
+    this.bodyWrapRef = createRef();
+    this.syncing = false;
+    /*
+    生命周期 end
+    **/
+    this.warnIfNoKey = () => {
+      if (some(this.dataSource, (record) => this.adapter.getRecordKey(record) === void 0)) {
+        console.error(
+          'You must specify a key for each element in the dataSource or use "rowKey" to specify an attribute name as the primary key!'
+        );
+      }
+    };
+    this.setColumnWidth = () => {
+      const head = this.headerWrapRef.value;
+      if (!head) return;
+      const ths = head == null ? void 0 : head.querySelectorAll("th");
+      if (ths) {
+        const widths = Array.from(ths).reduce(
+          (acc, th) => {
+            const { width } = th.getBoundingClientRect();
+            const colKey = th.dataset.colKey;
+            return __spreadProps(__spreadValues({}, acc), {
+              [colKey]: width
+            });
+          },
+          {}
+        );
+        this.columnSizing = widths;
+      }
+    };
+    this.handleBodyScroll = (e) => {
+      var _a;
+      this.handleBodyScrollLeft(e);
+      this.setScrollPositionClassName();
+      if ((_a = this.virtualized) == null ? void 0 : _a.onScroll) {
+        this.virtualized.onScroll(e);
+      }
+    };
+    this.handleBodyScrollLeft = (e) => {
+      if (this.syncing) return;
+      const target = e.currentTarget;
+      const head = this.headerWrapRef.value;
+      const body = this.bodyWrapRef.value;
+      if (!head || !body) return;
+      this.syncing = true;
+      if (target === body) {
+        head.scrollLeft = body.scrollLeft;
+      } else if (target === head) {
+        body.scrollLeft = head.scrollLeft;
+      }
+      requestAnimationFrame(() => {
+        this.syncing = false;
+      });
+    };
+    this.handleWindowResize = () => {
+      this.syncTableWidth();
+      this.setScrollPositionClassName();
+      this.setScrollBarStyle();
+    };
+    this.syncTableWidth = () => {
+      var _a;
+      if ((_a = this.tableWrapRef) == null ? void 0 : _a.value) {
+        this.tableWidth = this.tableWrapRef.value.getBoundingClientRect().width;
+      }
+    };
+    this.setScrollBarStyle = () => {
+      setTimeout(() => {
+        const bodyWrapper = this.bodyWrapRef.value;
+        const headWrapper = this.headerWrapRef.value;
+        if (!bodyWrapper || !headWrapper) return;
+        const hasVerticalScroll = getScrollHeight(bodyWrapper) > getClientHeight(bodyWrapper);
+        const bodyHasScrollBar = getClientWidth(bodyWrapper) < getOffsetWidth(bodyWrapper);
+        if (hasVerticalScroll && bodyHasScrollBar) {
+          headWrapper.style.overflowY = "scroll";
+        } else {
+          headWrapper.style.overflowY = "auto";
+        }
+      }, 0);
+    };
+    this.setScrollPositionClassName = () => {
+      const tableBody = this.bodyWrapRef.value;
+      const tableWrapper = this.tableWrapRef.value;
+      if (!tableBody || !tableWrapper) return;
+      const { scrollLeft, scrollWidth, clientWidth } = tableBody;
+      const scrollRange = scrollWidth - clientWidth;
+      const classList = tableWrapper.classList;
+      const startClass = "table-scroll-position-left";
+      const middleClass = "table-scroll-position-middle";
+      const endClass = "table-scroll-position-right";
+      if (scrollWidth <= clientWidth) {
+        classList.remove(startClass, endClass, middleClass);
+        return;
+      }
+      const isRtl = this.direction === "rtl";
+      const scrollLeftAbs = Math.abs(scrollLeft);
+      let isStart = false;
+      let isEnd = false;
+      if (isRtl) {
+        isStart = scrollLeftAbs <= 1;
+        isEnd = scrollLeftAbs >= scrollRange - 1;
+      } else {
+        isStart = scrollLeft <= 0;
+        isEnd = scrollLeft >= scrollRange - 1;
+      }
+      if (isStart) {
+        classList.add(startClass);
+        classList.remove(middleClass, endClass);
+      } else if (isEnd) {
+        classList.remove(startClass, middleClass);
+        classList.add(endClass);
+      } else {
+        classList.remove(startClass, endClass);
+        classList.add(middleClass);
+      }
+    };
+    this.handleColumnSizingChange = (updaterOrValue) => {
+      var _a;
+      const next = typeof updaterOrValue === "function" ? updaterOrValue(this.columnSizing) : updaterOrValue;
+      const clamped = {};
+      for (const key in next) {
+        const v = next[key];
+        clamped[key] = Math.min(500, Math.max(60, v));
+      }
+      this.columnSizing = clamped;
+      (_a = this.slColumnResize) == null ? void 0 : _a.call(this, __spreadValues({}, clamped));
+    };
+    this.generateCustomCellSlot = (filteredRows) => {
+      const hasSlotColumns = this.columns.filter((col) => col.slot);
+      if (!hasSlotColumns.length) return "";
+      return html`
+      ${hasSlotColumns.map(
+        (col) => filteredRows.map((row) => {
+          const slotKey = `${CUSTOM_CELL}-${col.dataIndex}-${this.adapter.getRecordKey(row.original)}`;
+          return html`<slot slot="${slotKey}" name="${slotKey}">${row.original[col.dataIndex]}</slot>`;
+        })
+      )}
+    `;
+    };
+    this.generateCustomRowSlot = (rows) => {
+      if (!this.expandProps) return "";
+      return html`
+      ${rows.map((row) => {
+        var _a, _b, _c;
+        const rowSlotKey = `${CUSTOM_ROW}-${this.adapter.getRecordKey(row.original)}`;
+        if (!((_a = this.expandProps) == null ? void 0 : _a.expandableRowKeys)) return html`<slot slot="${rowSlotKey}" name="${rowSlotKey}"></slot>`;
+        if ((_c = (_b = this.expandProps) == null ? void 0 : _b.expandableRowKeys) == null ? void 0 : _c.includes(row.original[this.rowKey])) {
+          return html`<slot slot="${rowSlotKey}" name="${rowSlotKey}"></slot>`;
+        } else {
+          return null;
+        }
+      })}
+    `;
+    };
+    this.handleRowSelectionChange = (updaterOrValue) => {
+      if (typeof updaterOrValue === "function") {
+        this.rowSelectedMap = updaterOrValue(this.rowSelectedMap);
+      } else {
+        this.rowSelectedMap = updaterOrValue;
+      }
+    };
+    this.handleSortingChange = (updaterOrValue) => {
+      if (typeof updaterOrValue === "function") {
+        this.sorting = updaterOrValue(this.sorting);
+      } else {
+        this.sorting = updaterOrValue;
+      }
+      window == null ? void 0 : window.requestAnimationFrame(() => {
+        this.handleChange({
+          changeType: "sorter"
+        });
+      });
+    };
+    this.handleColumnFiltersChange = (updaterOrValue) => {
+      if (typeof updaterOrValue === "function") {
+        this.columnFilters = updaterOrValue(this.columnFilters);
+      } else {
+        this.columnFilters = updaterOrValue;
+      }
+      window == null ? void 0 : window.requestAnimationFrame(() => {
+        this.handleChange({
+          changeType: "filters"
+        });
+      });
+    };
+    this.handleFilterDropdownChange = (e) => {
+      var _a;
+      const detail = e.detail;
+      const { key, visible } = detail || {};
+      const col = this.columns.find((c) => c.dataIndex === key);
+      (_a = col == null ? void 0 : col.onFilterDropdownVisibleChange) == null ? void 0 : _a.call(col, visible);
+    };
+    this.getRowCanExpand = (row) => {
+      var _a, _b, _c;
+      if (!((_a = this.expandProps) == null ? void 0 : _a.expandableRowKeys)) return true;
+      return Boolean((_c = (_b = this.expandProps) == null ? void 0 : _b.expandableRowKeys) == null ? void 0 : _c.includes(row.original[this.rowKey]));
+    };
+    this.expendedChange = (updater) => {
+      const newExpanded = typeof updater === "function" ? updater(this.expandedMap) : updater;
+      this.expandedMap = newExpanded;
+      this.requestUpdate();
+    };
+    this.getSubRows = (row) => {
+      const { treeConfig } = this.getTreeInfo();
+      if (treeConfig === false) return [];
+      const v = row[treeConfig.childrenRecordName];
+      return Array.isArray(v) ? v : [];
+    };
+    this.handlePaginationChange = (event) => {
+      var _a, _b, _c, _d;
+      const { pageNumber, pageSize } = event.detail;
+      (_b = (_a = this.pagination) == null ? void 0 : _a["sl-page-change"]) == null ? void 0 : _b.call(_a, event);
+      this.pagination = __spreadProps(__spreadValues({}, this.pagination), {
+        defaultCurrentPage: pageNumber,
+        pageSize: pageSize || 20
+      });
+      if (!((_c = this.pagination) == null ? void 0 : _c.currentPage)) this.pageIndex = pageNumber - 1;
+      this.handleChange({
+        pagination: {
+          pageNumber: pageNumber || 1,
+          pageSize: pageSize || 20,
+          total: ((_d = this.pagination) == null ? void 0 : _d.total) || this.dataSource.length
+        },
+        type: "pagination"
+      });
+    };
+  }
+  normalizeTree() {
+    var _a, _b;
+    const defaultTree = { childrenRecordName: "children", indentSize: 16 };
+    const hasChildren = Array.isArray(this.dataSource) && this.dataSource.some((row) => Array.isArray(row.children));
+    if (!this.tree) return hasChildren ? defaultTree : false;
+    if (typeof this.tree === "object") {
+      return {
+        childrenRecordName: (_a = this.tree.childrenRecordName) != null ? _a : defaultTree.childrenRecordName,
+        indentSize: (_b = this.tree.indentSize) != null ? _b : defaultTree.indentSize
+      };
+    }
+    return this.tree ? defaultTree : false;
+  }
+  getTreeInfo() {
+    const treeConfig = this.normalizeTree();
+    return { treeConfig, treeEnabled: treeConfig !== false };
+  }
+  get adapter() {
+    return {
+      getRecordKey: (record) => {
+        if (!record) {
+          return void 0;
+        }
+        return get(record, this.rowKey);
+      },
+      getSortIsControlled: () => {
+        return some(this.columns, (col) => !!col.sortOrder);
+      },
+      getTableWidth: () => this.tableWidth,
+      getFilterIsControlled: () => some(this.columns, (col) => !!col.filteredValue),
+      tableScrollToTop: () => {
+        var _a, _b;
+        return ((_a = this.tableScroll) == null ? void 0 : _a.y) ? (_b = this.bodyWrapRef.value) == null ? void 0 : _b.scrollTo({ top: 0 }) : void 0;
+      }
+    };
+  }
+  /*
+  生命周期 start
+  **/
+  connectedCallback() {
+    super.connectedCallback();
+    window.addEventListener("resize", debounce(this.handleWindowResize, 150));
+    this.syncTableWidth();
+    this.setScrollBarStyle();
+    this.setScrollPositionClassName();
+  }
+  disconnectedCallback() {
+    window.removeEventListener("resize", debounce(this.handleWindowResize, 150));
+    super.disconnectedCallback();
+  }
+  willUpdate(changedProperties) {
+    var _a;
+    this.warnIfNoKey();
+    if (changedProperties.has("rowSelection")) {
+      this.rowSelectedMap = convertRowSelectionState(((_a = this.rowSelection) == null ? void 0 : _a.defaultSelectedRowKeys) || []);
+    }
+    if (changedProperties.has("columns")) {
+      const defaultSorting = getDefaultSorting(this.columns);
+      if (defaultSorting.length > 0) {
+        this.sorting = defaultSorting;
+      }
+      const defaultFilters = getDefaultFilters(this.columns);
+      if (defaultFilters.length > 0) {
+        this.columnFilters = defaultFilters;
+      }
+      const defaultPinning = getDefaultPinning(this.columns);
+      if (defaultPinning.left.length > 0 || defaultPinning.right.length > 0) {
+        this.columnPinning = defaultPinning;
+      }
+    }
+    if (changedProperties.has("dataSource") || changedProperties.has("expandProps")) {
+      this.dataSource.forEach((row) => {
+        var _a2, _b;
+        if (!((_a2 = this.expandProps) == null ? void 0 : _a2.rowExpandable)) return;
+        const rowKey = row[this.rowKey];
+        const expandAllMatch = this.expandProps.defaultExpandAllRows && (!this.expandProps.expandableRowKeys || this.expandProps.expandableRowKeys.includes(rowKey));
+        const expandByKeys = (_b = this.expandProps.defaultExpandedRowKeys) == null ? void 0 : _b.includes(rowKey);
+        if (expandAllMatch || expandByKeys) {
+          this.expandedMap[rowKey] = true;
+        }
+      });
+    }
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    window.requestAnimationFrame(() => {
+      this.setScrollPositionClassName();
+    });
+  }
+  async firstUpdated() {
+    var _a, _b, _d, _e;
+    const bodyTable = (_a = this.shadowRoot) == null ? void 0 : _a.querySelector("sl-table-body-table");
+    if (bodyTable) {
+      await bodyTable.updateComplete;
+    }
+    const headTable = (_b = this.shadowRoot) == null ? void 0 : _b.querySelector("sl-table-head-table");
+    if (headTable) {
+      await headTable.updateComplete;
+    }
+    if (this.virtualized) {
+      const scrollElement = this.bodyWrapRef.value;
+      const _c = this.virtualized, { itemHeight, overscan } = _c, rest = __objRest(_c, ["itemHeight", "overscan"]);
+      this.rowVirtualizerController = new VirtualizerController(this, __spreadValues({
+        count: this.dataSource.length,
+        getScrollElement: () => scrollElement,
+        estimateSize: () => itemHeight || VIRTUALIZED_DEFAULT.itemHeight,
+        overscan: overscan || VIRTUALIZED_DEFAULT.overscan
+      }, rest));
+      this.requestUpdate();
+    }
+    this.setColumnWidth();
+    if ((_d = this.pagination) == null ? void 0 : _d.currentPage) {
+      this.pageIndex = this.pagination.currentPage - 1;
+    } else if ((_e = this.pagination) == null ? void 0 : _e.defaultCurrentPage) {
+      this.pageIndex = this.pagination.defaultCurrentPage - 1;
+    }
+  }
+  renderTable(tableInstance) {
+    var _a, _b;
+    const currentPageRows = tableInstance.getPaginationRowModel().rows;
+    const filteredRows = tableInstance.getFilteredRowModel().rows;
+    const { treeConfig, treeEnabled } = this.getTreeInfo();
+    const commonProps = {
+      direction: this.direction,
+      bordered: !!this.bordered,
+      rowSelectedMap: this.rowSelectedMap,
+      tableScroll: this.tableScroll,
+      enableColumnResizing: this.enableColumnResizing,
+      handleBodyScroll: this.handleBodyScroll,
+      sorting: this.sorting,
+      dataSource: this.dataSource,
+      columns: this.columns,
+      adapter: this.adapter,
+      tableInstance,
+      slHeaderRow: this.slHeaderRow,
+      slRow: this.slRow,
+      virtualized: this.virtualized,
+      rowDrag: this.rowDrag,
+      expandProps: this.expandProps,
+      tree: treeConfig,
+      slRowReorder: (detail) => {
+        var _a2;
+        if (this.slRowReorder) this.slRowReorder(detail);
+        if ((_a2 = detail.newRows) == null ? void 0 : _a2.length) {
+          this.dataSource = detail.newRows;
+          this.requestUpdate();
+        }
+      }
+    };
+    const emptyTemplate = this.dataSource.length === 0 || currentPageRows.length === 0 || filteredRows.length === 0 ? this.renderEmpty() : "";
+    const headTable = this.showHeader ? html`<sl-table-head-table
+          exportparts="table-head, table-head-row, table-head-cell"
+          .commonProps=${commonProps}
+          .headerRef=${this.headerWrapRef}
+          @sl-filter-dropdown-change=${this.handleFilterDropdownChange}
+        ></sl-table-head-table>` : "";
+    const bodyTable = html`<sl-table-body-table
+      exportparts="table-body, table-body-row, table-body-cell"
+      .bodyRef=${this.bodyWrapRef}
+      .emptyTemplate=${emptyTemplate}
+      .commonProps=${commonProps}
+      .rowVirtualizerController=${this.rowVirtualizerController}
+      .expandRowByClick=${((_a = this.expandProps) == null ? void 0 : _a.rowExpandable) && ((_b = this.expandProps) == null ? void 0 : _b.expandRowByClick)}
+    >
+      <slot name="table-empty" slot="table-empty">暂无数据</slot>
+      ${!treeEnabled ? this.generateCustomRowSlot(filteredRows) : ""} ${this.generateCustomCellSlot(filteredRows)}
+    </sl-table-body-table>`;
+    return html`${headTable} ${bodyTable}`;
+  }
+  renderEmpty() {
+    return html` <div class="table-placeholder"><slot name="table-empty"></slot></div>`;
+  }
+  renderMainTable(tableInstance) {
+    const table = html`${this.renderTable(tableInstance)}`;
+    return table;
+  }
+  renderPagination(place) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+    if (!this.pagination) return "";
+    const pos = ((_a = this.pagination) == null ? void 0 : _a.position) || "bottomEnd";
+    const isTop = pos.startsWith("top");
+    if (place === "top" && !isTop || place === "bottom" && isTop) return "";
+    const justify = pos.endsWith("Start") ? "flex-start" : pos.endsWith("Center") ? "center" : "flex-end";
+    const margin = place === "top" ? "0 0 8px 0" : "8px 0 0 0";
+    const style = `display:flex; justify-content:${justify}; margin:${margin};`;
+    return html`
+      <div class="pagination-container" style="${style}">
+        <sl-pagination
+          class="pagination"
+          @sl-page-change=${this.handlePaginationChange}
+          .total=${((_b = this.pagination) == null ? void 0 : _b.total) || this.dataSource.length}
+          .currentPage=${(_c = this.pagination) == null ? void 0 : _c.currentPage}
+          .defaultCurrentPage=${((_d = this.pagination) == null ? void 0 : _d.defaultCurrentPage) || 1}
+          .pageSize=${((_e = this.pagination) == null ? void 0 : _e.pageSize) || 20}
+          .disabled=${((_f = this.pagination) == null ? void 0 : _f.disabled) || false}
+          .className=${(_g = this.pagination) == null ? void 0 : _g.className}
+          .pageSizeOpts=${((_h = this.pagination) == null ? void 0 : _h.pageSizeOpts) || [10, 20, 50, 100]}
+          .simpleMode=${((_i = this.pagination) == null ? void 0 : _i.simpleMode) || false}
+        >
+        </sl-pagination>
+      </div>
+    `;
+  }
+  // 生成lit-table所需要的columns数组
+  buildColumns() {
+    var _a, _b, _c, _d;
+    const _columns = [];
+    const columnHelper = createColumnHelper();
+    const { treeConfig, treeEnabled } = this.getTreeInfo();
+    const treeIndentSize = treeConfig === false ? 0 : treeConfig.indentSize;
+    const firstDataIndex = (_a = this.columns[0]) == null ? void 0 : _a.dataIndex;
+    for (const col of this.columns) {
+      const {
+        dataIndex,
+        width,
+        align,
+        className,
+        ellipsis,
+        sorter,
+        filters,
+        filterMultiple,
+        defaultFilters,
+        onFilter,
+        filterDropdownProps,
+        onFilterDropdownVisibleChange
+      } = col;
+      const canSort = sorter && typeof sorter === "function";
+      const canFilter = filters && filters.length > 0;
+      const newCol = columnHelper.accessor((row) => row[dataIndex], {
+        id: dataIndex,
+        meta: {
+          align,
+          className,
+          ellipsis,
+          filters,
+          filterMultiple,
+          defaultFilters,
+          filterDropdownProps,
+          onFilterDropdownVisibleChange,
+          slCell: col.slCell,
+          slHeaderCell: col.slHeaderCell
+        },
+        cell: (info) => {
+          if (treeEnabled && firstDataIndex && dataIndex === firstDataIndex) {
+            const depth = typeof info.row.depth === "number" ? info.row.depth : 0;
+            const indent = Math.max(0, depth * (treeIndentSize || 16));
+            const canExpand = info.row.getCanExpand();
+            const expanded = info.row.getIsExpanded();
+            const toggleNode = canExpand ? html`
+                  <sl-icon
+                    class="row-expand-icon"
+                    name="${expanded ? "dash-square" : "plus-square"}"
+                    style="cursor:pointer;"
+                    @click=${(e) => {
+              e.stopPropagation();
+              info.row.toggleExpanded();
+            }}
+                  ></sl-icon>
+                ` : html`<span style="display:inline-block; width: 1em;"></span>`;
+            const valueNode = col.slot ? (() => {
+              const slotKey = `${CUSTOM_CELL}-${dataIndex}-${this.adapter.getRecordKey(info.row.original)}`;
+              return html`<slot name="${slotKey}" slot="${slotKey}">${info.getValue()}</slot>`;
+            })() : info.getValue();
+            return html`
+              <div class="tree-cell-content" style="display:flex; align-items:center; gap: 6px; padding-inline-start: ${indent}px;">
+                ${toggleNode} <span class="tree-cell-text">${valueNode}</span>
+              </div>
+            `;
+          }
+          if (col.slot) {
+            const slotKey = `${CUSTOM_CELL}-${dataIndex}-${this.adapter.getRecordKey(info.row.original)}`;
+            return html`<slot name="${slotKey}" slot="${slotKey}">${info.getValue()}</slot>`;
+          }
+          return info.getValue();
+        },
+        header: () => col.title || dataIndex,
+        size: width
+      });
+      newCol.enableResizing = (_b = col.enableResizing) != null ? _b : this.enableColumnResizing;
+      if (newCol.enableResizing) {
+        newCol.minSize = 60;
+        newCol.maxSize = 500;
+      }
+      if (canSort) {
+        newCol.sortingFn = (rowA, rowB) => sorter(rowA.original, rowB.original);
+      }
+      if (canFilter && onFilter) {
+        newCol.filterFn = (row, _columnId, filterValue) => {
+          if (Array.isArray(filterValue)) {
+            return filterValue.some((val) => !!onFilter(val, row.original));
+          }
+          return !!onFilter(filterValue, row.original);
+        };
+      }
+      newCol.enableSorting = !!canSort;
+      newCol.enableColumnFilter = !!canFilter;
+      _columns.push(newCol);
+    }
+    if (this.rowSelection && !this.rowSelection.hidden) {
+      _columns.unshift(getSelectionColumn(this.rowSelection, this.rowKey));
+    }
+    const showExpandColumn = !treeEnabled && !!((_c = this == null ? void 0 : this.expandProps) == null ? void 0 : _c.rowExpandable);
+    if (showExpandColumn) _columns.unshift(getExpendRow(!!((_d = this.expandProps) == null ? void 0 : _d.expandRowByClick)));
+    if (this == null ? void 0 : this.rowDrag) _columns.unshift(getDragRow());
+    return _columns;
+  }
+  // 构建 tableState
+  buildTableState() {
+    var _a;
+    const rowSelectionOptions = getRowSelectionOptions({
+      rowSelection: this.rowSelection
+    });
+    const { treeEnabled } = this.getTreeInfo();
+    const cols = this.buildColumns();
+    const instance = this.tableController.table(__spreadProps(__spreadValues({
+      columns: cols,
+      data: this.dataSource,
+      enableColumnResizing: this.enableColumnResizing,
+      columnResizeMode: "onChange",
+      columnResizeDirection: this.direction,
+      manualPagination: !this.pagination,
+      getRowId: (row) => row[this.rowKey],
+      getSubRows: this.getSubRows,
+      getCoreRowModel: getCoreRowModel(),
+      getSortedRowModel: getSortedRowModel(),
+      getPaginationRowModel: getPaginationRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+      getExpandedRowModel: getExpandedRowModel(),
+      state: {
+        rowSelection: this.rowSelectedMap,
+        sorting: this.sorting,
+        columnFilters: this.columnFilters,
+        columnSizing: this.columnSizing,
+        pagination: {
+          pageIndex: this.pageIndex,
+          pageSize: ((_a = this.pagination) == null ? void 0 : _a.pageSize) || 20
+        },
+        expanded: this.expandedMap,
+        columnPinning: this.columnPinning
+      },
+      onColumnSizingChange: this.handleColumnSizingChange,
+      onSortingChange: this.handleSortingChange,
+      onColumnFiltersChange: this.handleColumnFiltersChange
+    }, rowSelectionOptions), {
+      onRowSelectionChange: this.handleRowSelectionChange,
+      // 受控排序
+      manualSorting: this.adapter.getSortIsControlled(),
+      manualFiltering: this.adapter.getFilterIsControlled(),
+      getRowCanExpand: treeEnabled ? (row) => this.getSubRows(row.original).length > 0 : this.getRowCanExpand,
+      onExpandedChange: this.expendedChange
+    }));
+    return instance;
+  }
+  handleChange(extra) {
+    var _a;
+    this.dispatchEvent(
+      new CustomEvent("change", {
+        detail: __spreadValues({
+          sorting: this.sorting,
+          columnFilters: this.columnFilters
+        }, extra)
+      })
+    );
+    if (["sorting", "filters", "pagination"].includes(extra == null ? void 0 : extra.type) && ((_a = this.tableScroll) == null ? void 0 : _a.scrollToFirstRowOnChange)) {
+      this.adapter.tableScrollToTop();
+    }
+  }
+  render() {
+    const tableInstance = this.buildTableState();
+    return html`
+      <div
+        part="table-wrapper"
+        ${ref(this.tableWrapRef)}
+        class=${classMap({
+      "table-wrapper": true,
+      [`table-direction-${this.direction}`]: true
+    })}
+      >
+        ${this.renderPagination("top")}
+        <sl-table-spinner-container .loading=${this.loading} exportparts="table-container">
+          <div
+            class=${classMap({
+      "table-bordered": Boolean(this.bordered),
+      "table-nodata": this.dataSource.length === 0
+    })}
+          >
+            <div
+              part="table-container"
+              class=${classMap({
+      "table-container": !this.enableColumnResizing,
+      "table-columnresizing": this.enableColumnResizing || false
+    })}
+            >
+              ${this.renderMainTable(tableInstance)}
+            </div>
+          </div>
+        </sl-table-spinner-container>
+        ${this.renderPagination("bottom")}
+      </div>
+    `;
+  }
+};
+SlTable.dependencies = {
+  "sl-icon": SlIcon,
+  "sl-checkbox": SlCheckbox,
+  "sl-radio": SlRadio,
+  "sl-pagination": SlPagination
+};
+SlTable.styles = [table_style_default];
+__decorateClass([
+  property({ type: Array })
+], SlTable.prototype, "rowKey", 2);
+__decorateClass([
+  property({ type: Array })
+], SlTable.prototype, "columns", 2);
+__decorateClass([
+  property({ type: Array })
+], SlTable.prototype, "dataSource", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SlTable.prototype, "loading", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SlTable.prototype, "bordered", 2);
+__decorateClass([
+  property({ type: String })
+], SlTable.prototype, "direction", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SlTable.prototype, "showHeader", 2);
+__decorateClass([
+  property({ type: Object })
+], SlTable.prototype, "rowSelection", 2);
+__decorateClass([
+  property({ type: Object })
+], SlTable.prototype, "tableScroll", 2);
+__decorateClass([
+  property({ type: Object })
+], SlTable.prototype, "pagination", 2);
+__decorateClass([
+  property({ type: Object })
+], SlTable.prototype, "expandProps", 2);
+__decorateClass([
+  property({ type: Object })
+], SlTable.prototype, "tree", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SlTable.prototype, "enableColumnResizing", 2);
+__decorateClass([
+  property({ type: Function })
+], SlTable.prototype, "slHeaderRow", 2);
+__decorateClass([
+  property({ type: Function })
+], SlTable.prototype, "slRow", 2);
+__decorateClass([
+  property({ type: Function })
+], SlTable.prototype, "slColumnResize", 2);
+__decorateClass([
+  property({ type: Object || Boolean })
+], SlTable.prototype, "virtualized", 2);
+__decorateClass([
+  property({ type: Boolean })
+], SlTable.prototype, "rowDrag", 2);
+__decorateClass([
+  property({ type: Function })
+], SlTable.prototype, "slRowReorder", 2);
+__decorateClass([
+  state()
+], SlTable.prototype, "rowSelectedMap", 2);
+__decorateClass([
+  state()
+], SlTable.prototype, "expandedMap", 2);
+__decorateClass([
+  state()
+], SlTable.prototype, "sorting", 2);
+__decorateClass([
+  state()
+], SlTable.prototype, "columnFilters", 2);
+__decorateClass([
+  state()
+], SlTable.prototype, "tableWidth", 2);
+__decorateClass([
+  state()
+], SlTable.prototype, "columnSizing", 2);
+__decorateClass([
+  state()
+], SlTable.prototype, "pageIndex", 2);
+__decorateClass([
+  state()
+], SlTable.prototype, "columnPinning", 2);
+
+export {
+  SlTable
+};