@hi-ui/table 4.1.3-alpha.0 → 4.2.0

package/lib/cjs/use-table.js

@@ -249,14 +249,6 @@ var useTable = function useTable(_a) {
   }, [setFixedToColumn]);
 
   var _React$useMemo = React__default["default"].useMemo(function () {
-    if (!leftFreezeColumn && !rightFreezeColumn) {
-      return {
-        leftFrozenColKeys: [],
-        rightFrozenColKeys: [],
-        columns: mergedColumns2
-      };
-    }
-
     var leftFrozenColKey = leftFreezeColumn;
     var rightFrozenKey = rightFreezeColumn; // 获取左右冻结列的下标
     // 获取左右冻结列的下标
@@ -475,18 +467,16 @@ var useTable = function useTable(_a) {
       return !typeAssertion.isArrayNonEmpty(col.children);
     });
   }, [mergedColumns1]);
-  var groupedColumns = React__default["default"].useMemo(function () {
-    return mergedColumns1.reduce(function (acc, cur) {
-      var depth = cur.depth;
+  var groupedColumns = mergedColumns1.reduce(function (acc, cur) {
+    var depth = cur.depth;
 
-      if (!acc[depth]) {
-        acc[depth] = [];
-      }
+    if (!acc[depth]) {
+      acc[depth] = [];
+    }
 
-      acc[depth].push(cur);
-      return acc;
-    }, []);
-  }, [mergedColumns1]);
+    acc[depth].push(cur);
+    return acc;
+  }, []);
   var getStickyColProps = useLatest.useLatestCallback(function (column) {
     var rightStickyWidth = column.rightStickyWidth,
         leftStickyWidth = column.leftStickyWidth,

package/lib/esm/BaseTable.js

@@ -8,7 +8,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __rest } from 'tslib';
-import React__default, { forwardRef, useMemo } from 'react';
+import React__default, { forwardRef } from 'react';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { __DEV__ } from '@hi-ui/env';
 import { useLocaleContext } from '@hi-ui/core';
@@ -22,9 +22,6 @@ import { TableProvider } from './context.js';
 import { uuid, checkNeedTotalOrEvg, getTotalOrEvgRowData } from './utils/index.js';
 import { useTable } from './use-table.js';
 import { useEmbedExpand } from './hooks/use-embed-expand.js';
-import { TheadContent } from './TheadContent.js';
-import { ColGroupContent } from './ColGroupContent.js';
-import { TbodyContent } from './TbodyContent.js';
 var _role = 'table';
 
 var _prefix = getPrefixCls('table');
@@ -33,6 +30,7 @@ var EMBED_DATA_KEY = "TABLE_EMBED_DATA_KEY_" + uuid();
 var DEFAULT_COLUMNS = [];
 var DEFAULT_DATA = [];
 var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
+  // ********************** 内嵌式面板 *********************** //
   var _a$prefixCls = _a.prefixCls,
       prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
       _a$role = _a.role,
@@ -50,7 +48,8 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
       expandedEmbedRowKeys = _a.expandedEmbedRowKeys,
       onEmbedExpand = _a.onEmbedExpand,
       expandedRender = _a.expandedRender,
-      size = _a.size,
+      _a$size = _a.size,
+      size = _a$size === void 0 ? 'md' : _a$size,
       extra = _a.extra,
       onRow = _a.onRow,
       stickyFooter = _a.stickyFooter,
@@ -60,9 +59,7 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
       fixedColumnTrigger = _a$fixedColumnTrigger === void 0 ? 'auto' : _a$fixedColumnTrigger,
       emptyContent = _a.emptyContent,
       virtual = _a.virtual,
-      needDoubleTable = _a.needDoubleTable,
-      rest = __rest(_a, ["prefixCls", "role", "className", "columns", "data", "striped", "bordered", "rowExpandable", "defaultExpandedEmbedRowKeys", "expandedEmbedRowKeys", "onEmbedExpand", "expandedRender", "size", "extra", "onRow", "onHeaderRow", "stickyFooter", "stickyFooterBottom", "fixedColumnTrigger", "emptyContent", "virtual", "needDoubleTable"]); // ********************** 内嵌式面板 *********************** //
-
+      rest = __rest(_a, ["prefixCls", "role", "className", "columns", "data", "striped", "bordered", "rowExpandable", "defaultExpandedEmbedRowKeys", "expandedEmbedRowKeys", "onEmbedExpand", "expandedRender", "size", "extra", "onRow", "onHeaderRow", "stickyFooter", "stickyFooterBottom", "fixedColumnTrigger", "emptyContent", "virtual"]);
 
   var _useEmbedExpand = useEmbedExpand({
     defaultExpandedEmbedRowKeys: defaultExpandedEmbedRowKeys,
@@ -118,70 +115,48 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
 
     return columns;
   }, [embedExpandable, getEmbedPanelColumn, columns]);
-  var i18n = useLocaleContext();
-
-  var _useMemo = useMemo(function () {
-    // 确保包含 avg 属性，且值为数字类型的字符串
-    var avgRow = {
-      id: 'avg',
-      raw: {
-        key: 'avg'
-      }
-    };
-    var hasAvgColumn = false;
-    columns.forEach(function (column, index) {
-      if (index === 0) {
-        // @ts-ignore
-        avgRow.raw[column.dataKey] = i18n.get('table.average');
-      }
+  var i18n = useLocaleContext(); // 确保包含 avg 属性，且值为数字类型的字符串
 
-      if (checkNeedTotalOrEvg(data, column, 'avg')) {
-        hasAvgColumn = true; // @ts-ignore
-        // @ts-ignore
+  var avgRow = {
+    id: 'avg',
+    raw: {
+      key: 'avg'
+    }
+  };
+  var hasAvgColumn = false;
+  columns.forEach(function (column, index) {
+    if (index === 0) {
+      // @ts-ignore
+      avgRow.raw[column.dataKey] = i18n.get('table.average');
+    }
 
-        avgRow.raw[column.dataKey] = getTotalOrEvgRowData(data, column, true);
-      }
-    });
-    return {
-      avgRow: avgRow,
-      hasAvgColumn: hasAvgColumn
-    };
-  }, [columns, data, i18n]),
-      avgRow = _useMemo.avgRow,
-      hasAvgColumn = _useMemo.hasAvgColumn;
+    if (checkNeedTotalOrEvg(data, column, 'avg')) {
+      hasAvgColumn = true; // @ts-ignore
 
-  var _useMemo2 = useMemo(function () {
-    // 确保包含total属性，且值为数字类型的字符串
-    var sumRow = {
-      id: 'sum',
-      raw: {
-        key: 'sum'
-      }
-    };
-    var hasSumColumn = false;
-    columns.forEach(function (column, index) {
-      if (index === 0) {
-        // @ts-ignore
-        sumRow.raw[column.dataKey] = i18n.get('table.total');
-      }
+      avgRow.raw[column.dataKey] = getTotalOrEvgRowData(data, column, true);
+    }
+  }); // 确保包含total属性，且值为数字类型的字符串
 
-      if (checkNeedTotalOrEvg(data, column, 'total')) {
-        hasSumColumn = true; // 获取当前数据最大小数点个数，并设置最后总和值小数点
-        // @ts-ignore
-        // 获取当前数据最大小数点个数，并设置最后总和值小数点
-        // @ts-ignore
+  var sumRow = {
+    id: 'sum',
+    raw: {
+      key: 'sum'
+    }
+  };
+  var hasSumColumn = false;
+  columns.forEach(function (column, index) {
+    if (index === 0) {
+      // @ts-ignore
+      sumRow.raw[column.dataKey] = i18n.get('table.total');
+    }
 
-        sumRow.raw[column.dataKey] = getTotalOrEvgRowData(data, column, false);
-      }
-    });
-    return {
-      sumRow: sumRow,
-      hasSumColumn: hasSumColumn
-    };
-  }, [columns, data, i18n]),
-      sumRow = _useMemo2.sumRow,
-      hasSumColumn = _useMemo2.hasSumColumn;
+    if (checkNeedTotalOrEvg(data, column, 'total')) {
+      hasSumColumn = true; // 获取当前数据最大小数点个数，并设置最后总和值小数点
+      // @ts-ignore
 
+      sumRow.raw[column.dataKey] = getTotalOrEvgRowData(data, column, false);
+    }
+  });
   var providedValue = useTable(Object.assign(Object.assign({}, rest), {
     columns: mergedColumns,
     data: data,
@@ -194,67 +169,11 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
       leftFixedColumnsWidth = providedValue.leftFixedColumnsWidth,
       rightFixedColumnsWidth = providedValue.rightFixedColumnsWidth,
       scrollSize = providedValue.scrollSize,
-      getTableHeaderProps = providedValue.getTableHeaderProps,
-      scrollBodyElementRef = providedValue.scrollBodyElementRef,
-      onTableBodyScroll = providedValue.onTableBodyScroll,
-      canScroll = providedValue.canScroll,
-      bodyTableRef = providedValue.bodyTableRef,
-      scrollWidth = providedValue.scrollWidth;
+      getTableHeaderProps = providedValue.getTableHeaderProps;
   var hasBorder = borderedProp !== null && borderedProp !== void 0 ? borderedProp : bordered;
   var extraHeader = extra && extra.header;
   var extraFooter = extra && extra.footer;
   var alwaysFixedColumn = fixedColumnTrigger === 'always';
-
-  var renderTable = function renderTable() {
-    return needDoubleTable ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", Object.assign({}, getTableHeaderProps()), /*#__PURE__*/React__default.createElement(TableHeader, null), extraHeader ? /*#__PURE__*/React__default.createElement("div", {
-      style: {
-        position: 'absolute',
-        right: 0,
-        zIndex: 11,
-        bottom: 0,
-        top: 0
-      }
-    }, extraHeader) : null), /*#__PURE__*/React__default.createElement(TableBody, {
-      emptyContent: emptyContent
-    })) : /*#__PURE__*/React__default.createElement("div", {
-      ref: scrollBodyElementRef,
-      className: prefixCls + "-content",
-      onScroll: onTableBodyScroll,
-      style: {
-        // 表格宽度大于div宽度才出现横向滚动条
-        overflowX: canScroll ? 'scroll' : undefined
-      }
-    }, /*#__PURE__*/React__default.createElement("table", {
-      ref: bodyTableRef,
-      style: {
-        width: canScroll && scrollWidth !== undefined ? scrollWidth : '100%'
-      }
-    }, /*#__PURE__*/React__default.createElement(ColGroupContent, null), /*#__PURE__*/React__default.createElement(TheadContent, null), /*#__PURE__*/React__default.createElement(TbodyContent, {
-      emptyContent: emptyContent
-    })));
-  };
-
-  var renderFreezeShadow = function renderFreezeShadow() {
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, (alwaysFixedColumn || scrollSize.scrollLeft > 0) && leftFrozenColKeys.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
-      className: prefixCls + "-freeze-shadow  " + prefixCls + "-freeze-shadow--left",
-      style: {
-        width: leftFixedColumnsWidth + 'px'
-      }
-    }) : null, (alwaysFixedColumn || scrollSize.scrollRight > 0) && rightFrozenColKeys.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
-      className: prefixCls + "-freeze-shadow " + prefixCls + "-freeze-shadow--right",
-      style: {
-        width: rightFixedColumnsWidth + 'px'
-      }
-    }) : null);
-  };
-
-  var tableFooter = /*#__PURE__*/React__default.createElement("div", {
-    className: prefixCls + "-footer",
-    style: stickyFooter ? {
-      position: 'sticky',
-      bottom: stickyFooterBottom
-    } : undefined
-  }, extraFooter);
   var cls = cx(prefixCls, className, hasBorder && prefixCls + "--bordered", striped && prefixCls + "--striped", size && prefixCls + "--size-" + size, virtual && prefixCls + "--virtual");
   return /*#__PURE__*/React__default.createElement("div", Object.assign({
     ref: ref,
@@ -278,7 +197,37 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
       hasSumColumn: hasSumColumn,
       virtual: virtual
     })
-  }, renderTable()), renderFreezeShadow()), tableFooter);
+  }, /*#__PURE__*/React__default.createElement("div", Object.assign({}, getTableHeaderProps()), /*#__PURE__*/React__default.createElement(TableHeader, {
+    prefixCls: prefixCls + "-header"
+  }), extraHeader ? /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      position: 'absolute',
+      right: 0,
+      zIndex: 11,
+      bottom: 0,
+      top: 0
+    }
+  }, extraHeader) : null), /*#__PURE__*/React__default.createElement(TableBody, {
+    prefixCls: prefixCls,
+    emptyContent: emptyContent
+  })), (alwaysFixedColumn || scrollSize.scrollLeft > 0) && leftFrozenColKeys.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
+    className: prefixCls + "-freeze-shadow  " + prefixCls + "-freeze-shadow--left",
+    style: {
+      width: leftFixedColumnsWidth + 'px'
+    }
+  }) : null, (alwaysFixedColumn || scrollSize.scrollRight > 0) && rightFrozenColKeys.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
+    className: prefixCls + "-freeze-shadow " + prefixCls + "-freeze-shadow--right",
+    style: {
+      width: rightFixedColumnsWidth + 'px'
+    }
+  }) : null), /*#__PURE__*/React__default.createElement("div", {
+    className: prefixCls + "-footer",
+    style: stickyFooter ? {
+      position: 'sticky',
+      bottom: stickyFooterBottom // boxShadow: '0 5px 15px 0 rgba(0, 0, 0, 0.1)'
+
+    } : undefined
+  }, extraFooter));
 });
 
 if (__DEV__) {

package/lib/esm/Table.js

@@ -27,13 +27,7 @@ import { uuid } from './utils/index.js';
 import { useColSet } from './hooks/use-col-set.js';
 
 var _prefix = getPrefixCls('table');
-/**
- * 需要使用双表格的场景对应的 API
- * 这些场景下的功能无法通过单表格实现，故而设计成双表格，即表头和表体分别用一个 table 实现
- */
-
 
-var DOUBLE_TABLE_SCENE = ['maxHeight', 'sticky', 'stickyTop', 'setting', 'virtual'];
 var STANDARD_PRESET = {
   striped: true,
   bordered: true,
@@ -52,6 +46,7 @@ var DEFAULT_PAGINATION = {
  */
 
 var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
+  // ************************ 预置标准模式 ************************ //
   var _a$prefixCls = _a.prefixCls,
       prefixCls = _a$prefixCls === void 0 ? _prefix : _a$prefixCls,
       _a$standard = _a.standard,
@@ -74,13 +69,8 @@ var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
       extra = _a.extra,
       _a$data = _a.data,
       data = _a$data === void 0 ? DEFAULT_DATA : _a$data,
-      rest = __rest(_a, ["prefixCls", "standard", "loading", "dataSource", "pagination", "uniqueId", "columns", "hiddenColKeys", "onHiddenColKeysChange", "sortedColKeys", "onSortedColKeysChange", "checkDisabledColKeys", "onSetColKeysChange", "rowSelection", "fieldKey", "extra", "data"]); // 是否需要双表格
-
-
-  var needDoubleTable = DOUBLE_TABLE_SCENE.some(function (prop) {
-    return !!rest[prop];
-  });
-  var virtual = rest.virtual; // ************************ 预置标准模式 ************************ //
+      virtual = _a.virtual,
+      rest = __rest(_a, ["prefixCls", "standard", "loading", "dataSource", "pagination", "uniqueId", "columns", "hiddenColKeys", "onHiddenColKeysChange", "sortedColKeys", "onSortedColKeysChange", "checkDisabledColKeys", "onSetColKeysChange", "rowSelection", "fieldKey", "extra", "data", "virtual"]);
 
   var tableProps = withDefaultProps(rest, standard ? STANDARD_PRESET : undefined);
 
@@ -292,7 +282,6 @@ var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
     data: mergedData,
     fieldKey: fieldKey,
     virtual: virtual,
-    needDoubleTable: needDoubleTable,
     extra: Object.assign({
       header: setting ? /*#__PURE__*/React__default.createElement(TableSettingMenu, {
         prefixCls: prefixCls + "-setting",

package/lib/esm/TableBody.js

@@ -13,10 +13,9 @@ import { getPrefixCls, cx } from '@hi-ui/classname';
 import { __DEV__ } from '@hi-ui/env';
 import { useLatestCallback } from '@hi-ui/use-latest';
 import { isArrayNonEmpty } from '@hi-ui/type-assertion';
+import { EmptyState } from '@hi-ui/empty-state';
 import { TableRow } from './TableRow.js';
 import { useTableContext } from './context.js';
-import { ColGroupContent } from './ColGroupContent.js';
-import { renderEmptyContent, TbodyContent } from './TbodyContent.js';
 var _role = 'table';
 
 var _prefix = getPrefixCls(_role);
@@ -30,8 +29,10 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   var _useTableContext = useTableContext(),
       columns = _useTableContext.columns,
+      leafColumns = _useTableContext.leafColumns,
       isExpandTreeRows = _useTableContext.isExpandTreeRows,
       transitionData = _useTableContext.transitionData,
+      getColgroupProps = _useTableContext.getColgroupProps,
       bodyTableRef = _useTableContext.bodyTableRef,
       scrollBodyElementRef = _useTableContext.scrollBodyElementRef,
       onTableBodyScroll = _useTableContext.onTableBodyScroll,
@@ -39,6 +40,10 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
       maxHeight = _useTableContext.maxHeight,
       canScroll = _useTableContext.canScroll,
       scrollWidth = _useTableContext.scrollWidth,
+      hasAvgColumn = _useTableContext.hasAvgColumn,
+      avgRow = _useTableContext.avgRow,
+      hasSumColumn = _useTableContext.hasSumColumn,
+      sumRow = _useTableContext.sumRow,
       colWidths = _useTableContext.colWidths,
       virtual = _useTableContext.virtual,
       measureRowElementRef = _useTableContext.measureRowElementRef;
@@ -151,11 +156,65 @@ var TableBody = /*#__PURE__*/forwardRef(function (_ref, ref) {
     style: {
       width: canScroll && scrollWidth !== undefined ? scrollWidth : '100%'
     }
-  }, /*#__PURE__*/React__default.createElement(ColGroupContent, null), /*#__PURE__*/React__default.createElement(TbodyContent, null)));
+  }, /*#__PURE__*/React__default.createElement("colgroup", null, leafColumns.map(function (col, idx) {
+    return /*#__PURE__*/React__default.createElement("col", Object.assign({
+      key: idx,
+      className: prefixCls + "-col"
+    }, getColgroupProps(col, idx)));
+  })), /*#__PURE__*/React__default.createElement("tbody", null, isArrayNonEmpty(transitionData) ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, transitionData.map(function (row, index) {
+    return /*#__PURE__*/React__default.createElement(TableRow, Object.assign({
+      ref: index === 0 ? measureRowElementRef : null,
+      // key={depth + index}
+      key: row.id,
+      // @ts-ignore
+      rowIndex: index,
+      rowData: row
+    }, getRequiredProps(row.id)));
+  }), hasSumColumn ? /*#__PURE__*/React__default.createElement(TableRow, {
+    key: sumRow.id,
+    rowIndex: transitionData.length,
+    rowData: sumRow,
+    isSumRow: true
+  }) : null, hasAvgColumn ? /*#__PURE__*/React__default.createElement(TableRow, {
+    key: avgRow.id,
+    rowIndex: transitionData.length + 1,
+    rowData: avgRow,
+    isAvgRow: true
+  }) : null) : // 空状态，colSpan 占满表格整行
+  renderEmptyContent(Object.assign({
+    className: prefixCls + "-empty-content",
+    colSpan: columns.length,
+    emptyContent: emptyContent
+  }, scrollBodyElementRef.current ? {
+    scrollBodyWidth: window.getComputedStyle(scrollBodyElementRef.current).getPropertyValue('width')
+  } : {})))));
 });
 
 if (__DEV__) {
   TableBody.displayName = 'TableBody';
 }
+/**
+ * 负责空状态渲染
+ */
+
+
+var renderEmptyContent = function renderEmptyContent(_ref2) {
+  var className = _ref2.className,
+      colSpan = _ref2.colSpan,
+      emptyContent = _ref2.emptyContent,
+      scrollBodyWidth = _ref2.scrollBodyWidth;
+  return /*#__PURE__*/React__default.createElement("tr", {
+    className: className
+  }, /*#__PURE__*/React__default.createElement("td", {
+    colSpan: colSpan
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      position: 'sticky',
+      left: 0,
+      width: scrollBodyWidth !== null && scrollBodyWidth !== void 0 ? scrollBodyWidth : '100%',
+      overflow: 'hidden'
+    }
+  }, emptyContent || /*#__PURE__*/React__default.createElement(EmptyState, null))));
+};
 
 export { TableBody };

package/lib/esm/TableHeader.js

@@ -8,11 +8,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React__default, { forwardRef } from 'react';
+import { Resizable } from 'react-resizable';
 import { getPrefixCls, cx } from '@hi-ui/classname';
 import { __DEV__ } from '@hi-ui/env';
+import { isFunction } from '@hi-ui/type-assertion';
 import { useTableContext } from './context.js';
-import { ColGroupContent } from './ColGroupContent.js';
-import { TheadContent } from './TheadContent.js';
+import { renderFilter } from './TableAdvancedFilter.js';
+import { useCheckState } from '@hi-ui/use-check-state';
 
 var _prefix = getPrefixCls('table-header');
 
@@ -22,10 +24,21 @@ var TableHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
       className = _ref.className;
 
   var _useTableContext = useTableContext(),
+      groupedColumns = _useTableContext.groupedColumns,
+      resizable = _useTableContext.resizable,
+      colWidths = _useTableContext.colWidths,
+      isHoveredHighlightCol = _useTableContext.isHoveredHighlightCol,
+      isHighlightedCol = _useTableContext.isHighlightedCol,
+      getColgroupProps = _useTableContext.getColgroupProps,
+      onColumnResizable = _useTableContext.onColumnResizable,
+      getStickyColProps = _useTableContext.getStickyColProps,
       onTableBodyScrollMock = _useTableContext.onTableBodyScrollMock,
       scrollHeaderElementRef = _useTableContext.scrollHeaderElementRef,
-      getTableHeaderProps = _useTableContext.getTableHeaderProps;
+      leafColumns = _useTableContext.leafColumns,
+      getTableHeaderProps = _useTableContext.getTableHeaderProps,
+      showColMenu = _useTableContext.showColMenu;
 
+  var activeColumnKeysAction = useCheckState();
   var cls = cx(prefixCls, className);
   return /*#__PURE__*/React__default.createElement("div", Object.assign({
     className: cls,
@@ -35,9 +48,60 @@ var TableHeader = /*#__PURE__*/forwardRef(function (_ref, ref) {
       width: '100%',
       position: 'relative'
     }
-  }, /*#__PURE__*/React__default.createElement(ColGroupContent, null), /*#__PURE__*/React__default.createElement(TheadContent, {
+  }, /*#__PURE__*/React__default.createElement("colgroup", null, leafColumns.map(function (col, idx) {
+    return /*#__PURE__*/React__default.createElement("col", Object.assign({
+      key: idx,
+      className: prefixCls + "-col"
+    }, getColgroupProps(col, idx)));
+  })), /*#__PURE__*/React__default.createElement("thead", {
     onWheel: onTableBodyScrollMock
-  })));
+  }, groupedColumns.map(function (cols, colsIndex) {
+    return /*#__PURE__*/React__default.createElement("tr", {
+      key: colsIndex
+    }, cols.map(function (col, colIndex) {
+      var _ref2 = col || {},
+          dataKey = _ref2.dataKey,
+          title = _ref2.title,
+          raw = _ref2.raw;
+
+      var titleContent = isFunction(title) ? title(col) : title;
+      var cell = /*#__PURE__*/React__default.createElement("th", Object.assign({
+        key: dataKey
+      }, getStickyColProps(col), {
+        className: cx(prefixCls + "-cell", raw.className, isHighlightedCol(dataKey) && prefixCls + "-cell__col--highlight", isHoveredHighlightCol(dataKey) && prefixCls + "-cell__col--hovered-highlight", activeColumnKeysAction.has(dataKey) && prefixCls + "-cell__col--active"),
+        // @ts-ignore
+        colSpan: col.colSpan,
+        // @ts-ignore
+        rowSpan: col.rowSpan
+      }), titleContent, renderFilter({
+        prefixCls: prefixCls + "-filter",
+        columnKey: dataKey,
+        showColMenu: showColMenu,
+        column: col,
+        onOpen: function onOpen() {
+          return activeColumnKeysAction.add(dataKey);
+        },
+        onClose: function onClose() {
+          return activeColumnKeysAction.remove(dataKey);
+        }
+      }));
+      return resizable && colIndex !== colWidths.length - 1 ? /*#__PURE__*/React__default.createElement(Resizable, {
+        key: colIndex,
+        className: prefixCls + "__resizable",
+        draggableOpts: {
+          enableUserSelectHack: false
+        },
+        handle: /*#__PURE__*/React__default.createElement("span", {
+          className: prefixCls + "__resizable-handle"
+        }),
+        height: 0,
+        width: colWidths[colIndex],
+        onResize: function onResize(evt, options) {
+          onColumnResizable(evt, options, colIndex);
+        }
+      }, cell) : cell;
+    }));
+  }))));
 });
 
 if (__DEV__) {

package/lib/esm/styles/index.scss.js

@@ -8,7 +8,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import __styleInject__ from 'style-inject';
-var css_248z = ".hi-v4-table {-webkit-box-sizing: border-box;box-sizing: border-box;font-size: 14px;position: relative; }.hi-v4-table table {width: 100%;text-align: left;background-color: var(--hi-v4-color-static-white, #fff);border-radius: 2px 2px 0 0;border-spacing: 0;border-collapse: separate;display: table;table-layout: fixed; }.hi-v4-table__wrapper {position: relative;z-index: 0; }.hi-v4-table__switcher.hi-v4-icon-button {color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-table__switcher--expanded.hi-v4-icon-button {color: var(--hi-v4-color-primary-400, var(--hi-v4-color-brandblue-400, #4a9eff)); }.hi-v4-table--size-md table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-7, 14px); }.hi-v4-table--size-md table thead > tr > th {padding: var(--hi-v4-spacing-7, 14px); }.hi-v4-table--size-sm table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-5, 10px); }.hi-v4-table--size-sm table thead > tr > th {padding: var(--hi-v4-spacing-5, 10px); }.hi-v4-table--size-lg table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-9, 18px); }.hi-v4-table--size-lg table thead > tr > th {padding: var(--hi-v4-spacing-9, 18px); }.hi-v4-table--bordered table thead > tr > th {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--bordered table td {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--bordered .hi-v4-table-header {border-top: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--bordered .hi-v4-table-body {border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0); }.hi-v4-table--sticky {position: -webkit-sticky;position: sticky;top: 0; }.hi-v4-table--virtual {width: 100%;overflow: hidden; }.hi-v4-table--virtual .hi-v4-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-table-header {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden; }.hi-v4-table-header__resizable {position: relative;background-clip: padding-box; }.hi-v4-table-header__resizable-handle {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;width: 2px;height: 100%;bottom: 0;right: 0;border-left: 2px solid var(--hi-v4-color-gray-50, #f5f7fa);cursor: col-resize;z-index: 1; }.hi-v4-table-header__resizable:hover .hi-v4-table-header__resizable-handle {background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-header-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active[data-sticky] {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-table-row--hover:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-row--striped > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-row--expanded > .hi-v4-table-cell {color: var(--hi-v4-color-gray-800, #1f2937); }.hi-v4-table-row--error > .hi-v4-table-cell {color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959)); }.hi-v4-table-row--highlight > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-row--dragging > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-row--drag-top > .hi-v4-table-cell {border-top: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-row--drag-bottom > .hi-v4-table-cell {border-bottom: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-row--avg > .hi-v4-table-cell, .hi-v4-table-row--total > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-row--avg:hover > .hi-v4-table-cell, .hi-v4-table-row--total:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-row--virtual {display: -webkit-box;display: -ms-flexbox;display: flex; }.hi-v4-table-header .hi-v4-table-header-col, .hi-v4-table-header .hi-v4-table-col {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-body .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-body .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-header .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-header .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-gray-100, #f2f4f7); }.hi-v4-table-body, .hi-v4-table-content {position: relative;overflow: auto; }.hi-v4-table-header-cell {color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-medium, 500);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8); }.hi-v4-table-header-cell.hi-v4-table__embed-col, .hi-v4-table-header-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px); }.hi-v4-table-cell {word-break: break-word;border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-table-cell__indent {display: inline-block;width: 14px;height: 100%;margin-right: var(--hi-v4-spacing-1, 2px); }.hi-v4-table-cell__switcher.hi-v4-icon-button {margin-right: var(--hi-v4-spacing-1, 2px);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-table-cell.hi-v4-table__embed-col, .hi-v4-table-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px); }.hi-v4-table-cell.hi-v4-table-cell__col--highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-cell.hi-v4-table-cell__col--hovered-highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-freeze-shadow {position: absolute;top: 0;bottom: 0;z-index: 20;pointer-events: none;overflow: hidden;height: 100%;width: 200px; }.hi-v4-table-freeze-shadow--left {margin-right: 10px;left: 0;-webkit-box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15); }.hi-v4-table-freeze-shadow--right {margin-left: 10px;right: 0;-webkit-box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15); }.hi-v4-table-header-filter-dropdown__trigger.hi-v4-icon-button {margin-left: 4px; }.hi-v4-table-header-filter-dropdown__content {width: 124px;padding: var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-4, 8px);font-weight: var(--hi-v4-text-weight-normal, 400); }.hi-v4-table-header-filter-dropdown__item {margin-top: var(--hi-v4-spacing-4, 8px);padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;cursor: pointer;color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem); }.hi-v4-table-header-filter-dropdown__item:first-child {margin-top: 0; }.hi-v4-table-header-filter-dropdown__item:hover {background-color: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-header-filter-dropdown__item--active {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-header-filter-dropdown__item--active:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-header-filter-sorter {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 20px;vertical-align: middle;margin-left: 6px; }.hi-v4-table-header-filter-sorter__icon {display: inline-block;height: 8px;cursor: pointer;overflow: hidden;font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-500, #929aa6); }.hi-v4-table-header-filter-sorter__icon svg {position: relative;top: -5px; }.hi-v4-table-header-filter-sorter__icon--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa)); }.hi-v4-table-header-filter-custom__trigger {margin-left: 6px;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer; }.hi-v4-table-header-filter-custom__content {padding: 12px 8px; }.hi-v4-table-embed-row {position: relative;z-index: 0; }.hi-v4-table-embed-row > td {background-color: var(--hi-v4-color-gray-200, #ebedf0);padding: var(--hi-v4-spacing-10, 20px); }.hi-v4-table-setting {position: absolute;height: 100%;z-index: 11;-webkit-box-sizing: border-box;box-sizing: border-box;right: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);border-bottom: none;border-top: none;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;font-size: var(--hi-v4-text-size-sm, 0.75rem);width: 18px;background: var(--hi-v4-color-gray-50, #f5f7fa); }.hi-v4-table-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end; }.hi-v4-table-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-table-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-table-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-table-setting-item--dragging .hi-v4-table-setting-item__wrap {opacity: 0.6; }.hi-v4-table-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: '';background-color: var(--hi-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%; }.hi-v4-table-setting-item::after {position: absolute;content: '';z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%; }.hi-v4-table-setting-item::before, .hi-v4-table-setting-item::after {margin-left: -10px;margin-right: -10px; }.hi-v4-table-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px); }.hi-v4-table-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px; }.hi-v4-table-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px); }.hi-v4-table-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px; }.hi-v4-table-pagination {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: 8px;padding: var(--hi-v4-spacing-6, 12px) 0;background-color: var(--hi-v4-color-static-white, #fff); }.hi-v4-table-pagination--placement-left {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start; }.hi-v4-table-pagination--placement-right {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end; }.hi-v4-table-pagination--placement-middle {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center; }.hi-v4-table-empty-content td {text-align: center;padding: var(--hi-v4-spacing-12, 24px) 0; }.hi-v4-table--bordered .hi-v4-table-empty-content td {border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8); }.hi-v4-setting-drawer .hi-v4-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end; }.hi-v4-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box; }.hi-v4-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px); }.hi-v4-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe)); }.hi-v4-setting-item--dragging .hi-v4-setting-item__wrap {opacity: 0.6; }.hi-v4-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: '';background-color: var(--hi-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%; }.hi-v4-setting-item::after {position: absolute;content: '';z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%; }.hi-v4-setting-item::before, .hi-v4-setting-item::after {margin-left: -10px;margin-right: -10px; }.hi-v4-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px); }.hi-v4-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px; }.hi-v4-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px); }.hi-v4-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px; }";
+var css_248z = ".hi-v4-table {-webkit-box-sizing: border-box;box-sizing: border-box;font-size: 14px;position: relative;}.hi-v4-table table {width: 100%;text-align: left;background-color: var(--hi-v4-color-static-white, #fff);border-radius: 2px 2px 0 0;border-spacing: 0;border-collapse: separate;display: table;table-layout: fixed;}.hi-v4-table__wrapper {position: relative;z-index: 0;}.hi-v4-table__switcher.hi-v4-icon-button {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-table__switcher--expanded.hi-v4-icon-button {color: var(--hi-v4-color-primary-400, var(--hi-v4-color-brandblue-400, #4a9eff));}.hi-v4-table--size-md table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-7, 14px);}.hi-v4-table--size-md table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-md table thead > tr > th {padding: var(--hi-v4-spacing-7, 14px);}.hi-v4-table--size-md table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table thead > tr > th {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-sm table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-lg table tbody > tr:not(.hi-v4-table-empty-content) > td {padding: var(--hi-v4-spacing-9, 18px);}.hi-v4-table--size-lg table tbody > tr:not(.hi-v4-table-empty-content) > td.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-9, 18px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--size-lg table thead > tr > th {padding: var(--hi-v4-spacing-9, 18px);}.hi-v4-table--size-lg table thead > tr > th.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-9, 18px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table--bordered table thead > tr > th {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered table td {border-right: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered .hi-v4-table-header {border-top: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--bordered .hi-v4-table-body {border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-200, #ebedf0);}.hi-v4-table--sticky {position: -webkit-sticky;position: sticky;top: 0;}.hi-v4-table--virtual {width: 100%;overflow: hidden;}.hi-v4-table--virtual .hi-v4-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-table-header {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;}.hi-v4-table-header__resizable {position: relative;background-clip: padding-box;}.hi-v4-table-header__resizable-handle {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;width: 2px;height: 100%;bottom: 0;right: 0;border-left: 2px solid var(--hi-v4-color-gray-50, #f5f7fa);cursor: col-resize;z-index: 1;}.hi-v4-table-header__resizable:hover .hi-v4-table-header__resizable-handle {background-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-header-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-medium, 500);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-table-header-cell.hi-v4-table__embed-col, .hi-v4-table-header-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight, .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-header-cell.hi-v4-table-header-cell__col--highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--hovered-highlight[data-sticky], .hi-v4-table-header-cell.hi-v4-table-header-cell__col--active[data-sticky] {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-row--hover:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--striped > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--expanded > .hi-v4-table-cell {color: var(--hi-v4-color-gray-800, #1f2937);}.hi-v4-table-row--error > .hi-v4-table-cell {color: var(--hi-v4-color-danger-500, var(--hi-v4-color-red-500, #ff5959));}.hi-v4-table-row--highlight > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--dragging > .hi-v4-table-cell {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-row--drag-top > .hi-v4-table-cell {border-top: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-row--drag-bottom > .hi-v4-table-cell {border-bottom: 2px dashed var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-row--avg > .hi-v4-table-cell, .hi-v4-table-row--total > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--avg:hover > .hi-v4-table-cell, .hi-v4-table-row--total:hover > .hi-v4-table-cell {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-row--virtual {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v4-table-header .hi-v4-table-header-col, .hi-v4-table-header .hi-v4-table-col {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-body .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-body .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-header .hi-v4-table-header-col[data-hover-highlight], .hi-v4-table-header .hi-v4-table-col[data-hover-highlight] {background-color: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-table-body {position: relative;overflow: auto;}.hi-v4-table-cell {word-break: break-word;border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);font-size: var(--hi-v4-text-size-md, 0.875rem);font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-700, #1f2733);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-8, 16px);background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-table-cell__indent {display: inline-block;width: 14px;height: 100%;margin-right: var(--hi-v4-spacing-1, 2px);}.hi-v4-table-cell__switcher.hi-v4-icon-button {margin-right: var(--hi-v4-spacing-1, 2px);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-table-cell.hi-v4-table__embed-col, .hi-v4-table-cell.hi-v4-table__selection-col {padding: var(--hi-v4-spacing-7, 14px) var(--hi-v4-spacing-5, 10px);}.hi-v4-table-cell.hi-v4-table-cell__col--highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-cell.hi-v4-table-cell__col--hovered-highlight {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-freeze-shadow {position: absolute;top: 0;bottom: 0;z-index: 20;pointer-events: none;overflow: hidden;height: 100%;width: 200px;}.hi-v4-table-freeze-shadow--left {margin-right: 10px;left: 0;-webkit-box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: 6px 0 6px -4px rgba(0, 0, 0, 0.15);}.hi-v4-table-freeze-shadow--right {margin-left: 10px;right: 0;-webkit-box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);box-shadow: -6px 0 6px -4px rgba(0, 0, 0, 0.15);}.hi-v4-table-header-filter-dropdown__trigger.hi-v4-icon-button {margin-left: 4px;}.hi-v4-table-header-filter-dropdown__content {width: 124px;padding: var(--hi-v4-spacing-6, 12px) var(--hi-v4-spacing-4, 8px);font-weight: var(--hi-v4-text-weight-normal, 400);}.hi-v4-table-header-filter-dropdown__item {margin-top: var(--hi-v4-spacing-4, 8px);padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);border-radius: var(--hi-v4-border-radius-md, 4px);display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;cursor: pointer;color: var(--hi-v4-color-gray-700, #1f2733);font-size: var(--hi-v4-text-size-md, 0.875rem);}.hi-v4-table-header-filter-dropdown__item:first-child {margin-top: 0;}.hi-v4-table-header-filter-dropdown__item:hover {background-color: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-header-filter-dropdown__item--active {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-header-filter-dropdown__item--active:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-header-filter-sorter {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;height: 20px;vertical-align: middle;margin-left: 6px;}.hi-v4-table-header-filter-sorter__icon {display: inline-block;height: 8px;cursor: pointer;overflow: hidden;font-weight: var(--hi-v4-text-weight-normal, 400);color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-table-header-filter-sorter__icon svg {position: relative;top: -5px;}.hi-v4-table-header-filter-sorter__icon--active {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-table-header-filter-custom__trigger {margin-left: 6px;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;}.hi-v4-table-header-filter-custom__content {padding: 12px 8px;}.hi-v4-table-embed-row {position: relative;z-index: 0;}.hi-v4-table-embed-row > td {background-color: var(--hi-v4-color-gray-200, #ebedf0);padding: var(--hi-v4-spacing-10, 20px);}.hi-v4-table-setting {position: absolute;height: 100%;z-index: 11;-webkit-box-sizing: border-box;box-sizing: border-box;right: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;border-left: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);border-bottom: none;border-top: none;color: var(--hi-v4-color-gray-500, #929aa6);cursor: pointer;font-size: var(--hi-v4-text-size-sm, 0.75rem);width: 18px;background: var(--hi-v4-color-gray-50, #f5f7fa);}.hi-v4-table-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v4-table-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-table-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-table-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-table-setting-item--dragging .hi-v4-table-setting-item__wrap {opacity: 0.6;}.hi-v4-table-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: \"\";background-color: var(--hi-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%;}.hi-v4-table-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%;}.hi-v4-table-setting-item::before, .hi-v4-table-setting-item::after {margin-left: -10px;margin-right: -10px;}.hi-v4-table-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px);}.hi-v4-table-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px;}.hi-v4-table-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px);}.hi-v4-table-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px;}.hi-v4-table-pagination {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: 8px;padding: var(--hi-v4-spacing-6, 12px) 0;background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-table-pagination--placement-left {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}.hi-v4-table-pagination--placement-right {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v4-table-pagination--placement-middle {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v4-table-empty-content td {text-align: center;padding: var(--hi-v4-spacing-12, 24px) 0;}.hi-v4-table--bordered .hi-v4-table-empty-content td {border-bottom: var(--hi-v4-border-size-normal, 1px solid) var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-setting-drawer .hi-v4-setting__btn-group {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v4-setting-item {position: relative;padding-top: var(--hi-v4-spacing-1, 2px);padding-bottom: var(--hi-v4-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v4-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;cursor: move;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;padding: var(--hi-v4-spacing-3, 6px) var(--hi-v4-spacing-4, 8px);line-height: var(--hi-v4-text-lineheight-sm, 1.25rem);border-radius: var(--hi-v4-border-radius-md, 4px);}.hi-v4-setting-item__wrap:hover {background-color: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));}.hi-v4-setting-item--dragging .hi-v4-setting-item__wrap {opacity: 0.6;}.hi-v4-setting-item::before {position: absolute;left: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: 8px;height: 8px;content: \"\";background-color: var(--hi-v4-color-static-white, #fff);border: 1px solid var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: 100%;}.hi-v4-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-bottom-width: 0;border-bottom-style: solid;border-bottom-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));left: 0;width: 100%;}.hi-v4-setting-item::before, .hi-v4-setting-item::after {margin-left: -10px;margin-right: -10px;}.hi-v4-setting-item--direction-before::before {display: block;top: -0.5px;-webkit-transform: translateY(-4px);transform: translateY(-4px);}.hi-v4-setting-item--direction-before::after {top: -0.5px;border-bottom-width: 1px;}.hi-v4-setting-item--direction-after::before {display: block;bottom: 0.5px;-webkit-transform: translateY(4px);transform: translateY(4px);}.hi-v4-setting-item--direction-after::after {bottom: 0.5px;border-bottom-width: 1px;}";
 
 __styleInject__(css_248z);