@hi-ui/table 5.0.0-canary.25 → 5.0.0-canary.26

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @hi-ui/table
 
+## 5.0.0-canary.26
+
+### Patch Changes
+
+- 56c9f5a2b: fix(table): 修复在 stretchHeight 模式下，冻结列表头和单元格层级问题 (5.0)
+- 50a17ebf2: fix(table): 修复表头分组数据为空时表头显示异常问题，当 data 为空时，使用双表格 (5.0)
+- f95f06844: fix(table): 修复标题过长时，列头宽度拉宽后无法缩小的问题 (5.0)
+- 14fa87a0f: refactor(table): 调整列宽计算逻辑，兼容表头分组和单元格合并场景 (5.0)
+
 ## 5.0.0-canary.25
 
 ### Patch Changes

package/lib/cjs/BaseTable.js

@@ -240,6 +240,27 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var wrapperRef = React__default["default"].useRef(null);
   var isTableContentExceedWrapperHeight = bodyTableRef.current && wrapperRef.current && bodyTableRef.current.offsetHeight > wrapperRef.current.offsetHeight;
   var renderTable = function renderTable() {
+    if (needDoubleTable) {
+      var _a2 = getTableHeaderProps(),
+        style = _a2.style,
+        restTableHeaderProps = tslib.__rest(_a2, ["style"]);
+      var doubleTableContent = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", Object.assign({}, restTableHeaderProps, {
+        style: Object.assign(Object.assign({}, style), {
+          overflow: undefined
+        })
+      }), /*#__PURE__*/React__default["default"].createElement(TableHeader.TableHeader, null), extraHeader ? ( /*#__PURE__*/React__default["default"].createElement("div", {
+        style: {
+          position: 'absolute',
+          right: 0,
+          zIndex: 11,
+          bottom: 0,
+          top: 0
+        }
+      }, extraHeader)) : null), /*#__PURE__*/React__default["default"].createElement(TableBody.TableBody, {
+        emptyContent: emptyContent
+      }));
+      return doubleTableContent;
+    }
     var tableContent = /*#__PURE__*/React__default["default"].createElement("table", {
       ref: bodyTableRef,
       style: {
@@ -261,25 +282,7 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       ref: scrollBodyElementRef,
       onScroll: onTableBodyScroll
     }, typeAssertion.isObject(scrollbar) ? scrollbar : null), tableContent)));
-    var _a = getTableHeaderProps(),
-      style = _a.style,
-      restTableHeaderProps = tslib.__rest(_a, ["style"]);
-    var doubleTableContent = /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", Object.assign({}, restTableHeaderProps, {
-      style: Object.assign(Object.assign({}, style), {
-        overflow: undefined
-      })
-    }), /*#__PURE__*/React__default["default"].createElement(TableHeader.TableHeader, null), extraHeader ? ( /*#__PURE__*/React__default["default"].createElement("div", {
-      style: {
-        position: 'absolute',
-        right: 0,
-        zIndex: 11,
-        bottom: 0,
-        top: 0
-      }
-    }, extraHeader)) : null), /*#__PURE__*/React__default["default"].createElement(TableBody.TableBody, {
-      emptyContent: emptyContent
-    }));
-    return needDoubleTable ? doubleTableContent : singleTableContent;
+    return singleTableContent;
   };
   var renderFreezeShadow = function renderFreezeShadow() {
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, (alwaysFixedColumn || scrollSize.scrollLeft > 0) && leftFrozenColKeys.length > 0 ? ( /*#__PURE__*/React__default["default"].createElement("div", {

package/lib/cjs/Table.js

@@ -89,9 +89,10 @@ var Table = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     data = _a$data === void 0 ? DEFAULT_DATA : _a$data,
     rest = tslib.__rest(_a, ["prefixCls", "standard", "loading", "dataSource", "pagination", "uniqueId", "columns", "hiddenColKeys", "onHiddenColKeysChange", "sortedColKeys", "onSortedColKeysChange", "checkDisabledColKeys", "onSetColKeysChange", "rowSelection", "fieldKey", "extra", "data"]);
   // 是否需要双表格
+  // 当 data 为空时，如果使用单表格，在表头分组下会导致表头错位（原生 table 特性），故而该情况下也要使用双表格
   var needDoubleTable = DOUBLE_TABLE_SCENE.some(function (prop) {
     return !!rest[prop];
-  });
+  }) || data.length === 0;
   var virtual = rest.virtual;
   // ************************ 预置标准模式 ************************ //
   var tableProps = reactUtils.withDefaultProps(rest, standard ? STANDARD_PRESET : undefined);

package/lib/cjs/TableCell.js

@@ -104,7 +104,7 @@ var TableCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var cls = classname.cx(prefixCls, className, raw.className, canScroll && sticky && prefixCls + "__col--sticky", isHighlightedCol(dataKey) && prefixCls + "__col--highlight", isHoveredHighlightCol(dataKey) && prefixCls + "__col--hovered-highlight");
   if (virtual) {
     var width = colWidths[colIndex];
-    var colProps = getStickyColProps(column);
+    var colProps = getStickyColProps(column, 'td');
     return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
       ref: ref,
       key: dataKey,
@@ -142,7 +142,7 @@ var TableCell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     ref: ref,
     key: dataKey,
     className: cls
-  }, getStickyColProps(column), {
+  }, getStickyColProps(column, 'td'), {
     colSpan: cellContent.props.colSpan,
     rowSpan: cellContent.props.rowSpan,
     // 按需绑定函数，避免频繁调用 setState 特别消耗性能

package/lib/cjs/TbodyContent.js

@@ -45,7 +45,8 @@ var TbodyContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     sumRow = _useTableContext.sumRow,
     measureRowElementRef = _useTableContext.measureRowElementRef,
     rowClassName = _useTableContext.rowClassName,
-    fixedToRow = _useTableContext.fixedToRow;
+    fixedToRow = _useTableContext.fixedToRow,
+    flattedColumnsWithoutChildren = _useTableContext.flattedColumnsWithoutChildren;
   var getRequiredProps = useLatest.useLatestCallback(function (id) {
     return {
       // @ts-ignore
@@ -91,19 +92,27 @@ var TbodyContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     measureRowElementRefNeedUpdate.current = true;
   }, [columns]);
   // 外层增加 div 作为滚动容器
-  return /*#__PURE__*/React__default["default"].createElement("tbody", null, typeAssertion.isArrayNonEmpty(transitionData) ? ( /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, transitionData.map(function (row, index) {
+  return /*#__PURE__*/React__default["default"].createElement("tbody", null, /*#__PURE__*/React__default["default"].createElement("tr", {
+    ref: measureRowElementRef,
+    "aria-hidden": true,
+    style: {
+      height: 0
+    }
+  }, flattedColumnsWithoutChildren.map(function (column) {
+    return /*#__PURE__*/React__default["default"].createElement("td", {
+      key: column.id,
+      style: {
+        height: 0,
+        paddingTop: 0,
+        paddingBottom: 0,
+        borderTop: 'none',
+        borderBottom: 'none'
+      }
+    });
+  })), typeAssertion.isArrayNonEmpty(transitionData) ? ( /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, transitionData.map(function (row, index) {
     return /*#__PURE__*/React__default["default"].createElement(TableRow.TableRow, Object.assign({
-      ref: function ref(el) {
-        // 当 el 的子节点数量和 columns 的数量相等时（考虑单元格合并的情况），并且measureRowElementRefNeedUpdate.current为true时，才更新measureRowElementRef
-        if ((el === null || el === void 0 ? void 0 : el.childNodes.length) === columns.length && measureRowElementRefNeedUpdate.current) {
-          measureRowElementRef.current = el;
-          measureRowElementRefNeedUpdate.current = false;
-        }
-      },
-      // key={depth + index}
       key: row.id,
       className: classname.cx.apply(void 0, [rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(row, index)].concat(fixedToRowTopClassName(row, index))),
-      // @ts-ignore
       rowIndex: index,
       rowData: row
     }, getRequiredProps(row.id)));

package/lib/cjs/TheadContent.js

@@ -76,14 +76,14 @@ var TheadContent = /*#__PURE__*/React.forwardRef(function (_a, ref) {
           groupLastColumn = true;
         }
       }
-      var stickyColProps = getStickyColProps(col);
+      var stickyColProps = getStickyColProps(col, 'th');
       var cell = /*#__PURE__*/React__default["default"].createElement("th", Object.assign({
         key: dataKey
       }, stickyColProps, {
         style: Object.assign(Object.assign({}, stickyColProps.style), {
+          insetBlockStart: (_b = trRefs.current[colsIndex]) === null || _b === void 0 ? void 0 : _b.offsetTop,
           // 表头合并场景下，被合并的表头需要隐藏
-          display: (col === null || col === void 0 ? void 0 : col.colSpan) === 0 ? 'none' : undefined,
-          top: (_b = trRefs.current[colsIndex]) === null || _b === void 0 ? void 0 : _b.offsetTop
+          display: (col === null || col === void 0 ? void 0 : col.colSpan) === 0 ? 'none' : undefined
         }),
         className: 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", groupLastColumn && prefixCls + "-cell--group-last-column"),
         // @ts-ignore

package/lib/cjs/hooks/use-col-width.js

@@ -38,17 +38,21 @@ var useColWidth = function useColWidth(_ref) {
     setColWidths = _React$useState[1];
   /**
    * 根据实际内容区（table 的第一行）渲染，再次精确收集并设置每列宽度
+   * 如果实际总宽度大于设置的宽度，则将多余的宽度平分到没有设置 fixed 的列上
    */
   var getWidths = React.useCallback(function (measureRowElement) {
     if (measureRowElement && measureRowElement.childNodes) {
       // 超出的宽度，即每列真实的宽度超出设置的宽度的总和
       var exceedWidth = 0;
-      var _realColumnsWidth = Array.from(measureRowElement.childNodes).map(function (node, index$1) {
+      var _getGroupItemWidth = index.getGroupItemWidth(columns),
+        flattedColumnsWithoutChildren = _getGroupItemWidth.flattedColumnsWithoutChildren,
+        _colWidths = _getGroupItemWidth.colWidths;
+      var _realColumnsWidth = Array.from(measureRowElement.childNodes).map(function (node, index) {
         var _a;
         var realWidth = node.offsetWidth || 60;
-        var _ref2 = (_a = columns[index$1]) !== null && _a !== void 0 ? _a : {},
+        var _ref2 = (_a = flattedColumnsWithoutChildren[index]) !== null && _a !== void 0 ? _a : {},
           fixed = _ref2.fixed;
-        var width = index.getGroupItemWidth(columns).colWidths[index$1];
+        var width = _colWidths[index];
         // 如果该列设置了 fixed 并且真实宽度大于设置的 width 则设置为 width
         if (fixed && width && width < realWidth) {
           exceedWidth += realWidth - width;
@@ -58,12 +62,12 @@ var useColWidth = function useColWidth(_ref) {
       });
       // 如果有多余的宽度，则将多余的宽度平分到没有设置 fixed 的列上
       if (exceedWidth > 0) {
-        var noFixedColumns = columns.filter(function (item) {
+        var noFixedColumns = flattedColumnsWithoutChildren.filter(function (item) {
           return !item.fixed;
         });
         _realColumnsWidth = _realColumnsWidth.map(function (item, index) {
           var _a;
-          if (!((_a = columns[index]) === null || _a === void 0 ? void 0 : _a.fixed)) {
+          if (!((_a = flattedColumnsWithoutChildren[index]) === null || _a === void 0 ? void 0 : _a.fixed)) {
             return item + Math.floor(exceedWidth / noFixedColumns.length);
           }
           return item;
@@ -173,7 +177,7 @@ var useColWidth = function useColWidth(_ref) {
   var _React$useState2 = React__default["default"].useState(null),
     headerTableElement = _React$useState2[0],
     setHeaderTableElement = _React$useState2[1];
-  // 控制列最小可调整宽度
+  // 控制列最小可调整宽度，主要用于可拖拽调节列宽的场景，目前表头分组还不支持该功能
   var _React$useState3 = React__default["default"].useState(index.getGroupItemWidth(columns).minColWidths),
     minColWidths = _React$useState3[0],
     setMinColWidths = _React$useState3[1];
@@ -183,14 +187,24 @@ var useColWidth = function useColWidth(_ref) {
     if (headerTableElement) {
       resizeObserver = new ResizeObserver(function () {
         var calcMinColWidths = Array.from(headerTableElement.childNodes).map(function (th, index$1) {
-          var minColWidth = index.getGroupItemWidth(columns).minColWidths[index$1];
-          // 如果设置了最小宽度，则直接使用最小宽度，否则使用标题宽度
+          var _a;
+          var _getGroupItemWidth2 = index.getGroupItemWidth(columns),
+            colWidths = _getGroupItemWidth2.colWidths,
+            minColWidths = _getGroupItemWidth2.minColWidths;
+          var colWidth = colWidths[index$1];
+          var minColWidth = minColWidths[index$1];
+          // 如果设置了最小宽度，则直接使用最小宽度
           if (minColWidth !== undefined && minColWidth !== 0) {
             return minColWidth;
           }
           var thPaddingLeft = parseFloat(window.getComputedStyle(th).getPropertyValue('padding-left'));
           var childNode = Array.from(th.childNodes)[0];
-          var childNodeWidth = childNode.offsetWidth + thPaddingLeft * 2;
+          // 计算真实标题内容宽度
+          var childNodeWidth = ((_a = childNode) === null || _a === void 0 ? void 0 : _a.offsetWidth) + thPaddingLeft * 2;
+          // 如果设置的标题宽度小于真实内容宽度，则使用设置的宽度，否则使用真实内容宽度
+          if (colWidth && colWidth < childNodeWidth) {
+            return colWidth;
+          }
           return childNodeWidth || 40;
         });
         setMinColWidths(calcMinColWidths);
@@ -203,25 +217,6 @@ var useColWidth = function useColWidth(_ref) {
       resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
     };
   }, [columns, columns.length, headerTableElement, resizable]);
-  /**
-   *  控制列最小可调整宽度
-   */
-  React__default["default"].useMemo(function () {
-    if (resizable && headerTableElement) {
-      var resizableHandlerWidth = 4;
-      var _minColWidth = Array.from(headerTableElement.childNodes).map(function (th) {
-        var thPaddingLeft = parseFloat(window.getComputedStyle(th).getPropertyValue('padding-left'));
-        var childNodes = Array.from(th.childNodes);
-        return childNodes.map(function (child) {
-          return child.offsetWidth;
-        }).reduce(function (prev, next) {
-          return prev + next;
-        }) + thPaddingLeft * 2 + resizableHandlerWidth;
-      });
-      return _minColWidth;
-    }
-    return Array(columns.length).fill(0);
-  }, [columns.length, headerTableElement, resizable]);
   /**
    * 列宽拖拽 resize，只处理拖拽线两边的列宽度
    */

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

@@ -12,7 +12,7 @@
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-var css_248z = ".hi-v5-table {-webkit-box-sizing: border-box;box-sizing: border-box;font-size: var(--hi-v5-text-size-md, 0.875rem);position: relative;}.hi-v5-table table {width: 100%;text-align: start;background-color: var(--hi-v5-color-static-white, #fff);border-radius: var(--hi-v5-border-radius-sm, 2px) var(--hi-v5-border-radius-sm, 2px) 0 0;border-spacing: 0;border-collapse: separate;display: table;table-layout: fixed;}.hi-v5-table__wrapper {position: relative;z-index: 0;-webkit-border-before: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table__wrapper.hi-v5-table--exceed-wrapper-height::after {content: \"\";position: absolute;inset-block-end: 0;inset-inline-start: 0;width: 100%;-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--stretch-height {height: 100%;overflow: hidden;}.hi-v5-table--stretch-height .hi-v5-table__wrapper {-webkit-box-sizing: border-box;box-sizing: border-box;height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v5-table--stretch-height .hi-v5-table__wrapper .hi-v5-table-body {-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;overflow: auto;}.hi-v5-table--stretch-height .hi-v5-table-header-cell {position: sticky;inset-block-start: 0;z-index: 1;}.hi-v5-table--stretch-height.hi-v5-table--empty .hi-v5-table__wrapper .hi-v5-table-body table {height: 100%;}.hi-v5-table--stretch-height.hi-v5-table--empty .hi-v5-scrollbar__wrapper {height: 100%;}.hi-v5-table__switcher.hi-v5-icon-button {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-table__switcher--expanded.hi-v5-icon-button {color: var(--hi-v5-color-primary-400, var(--hi-v5-color-brandblue-400, #4d82ff));}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-sm .hi-v5-table-header-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-sm .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-md .hi-v5-table-header-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-md .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-lg .hi-v5-table-header-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-lg .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--virtual {width: 100%;overflow: hidden;}.hi-v5-table--virtual .hi-v5-table__wrapper::after {content: \"\";position: absolute;inset-block-end: 0;inset-inline-start: 0;width: 100%;-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--virtual .hi-v5-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-table--virtual.hi-v5-table--size-sm .hi-v5-table-header-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table--virtual.hi-v5-table--size-sm .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table--virtual.hi-v5-table--size-md .hi-v5-table-header-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table--virtual.hi-v5-table--size-md .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table--virtual.hi-v5-table--size-lg .hi-v5-table-header-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--virtual.hi-v5-table--size-lg .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--bordered > .hi-v5-table__wrapper {-webkit-border-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-inline-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);-webkit-border-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-inline-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--bordered > .hi-v5-table__wrapper .hi-v5-table-header-cell, .hi-v5-table--bordered > .hi-v5-table__wrapper .hi-v5-table-cell {-webkit-border-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-inline-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--bordered.hi-v5-table--bordered-left-none > .hi-v5-table__wrapper {-webkit-border-start: none;border-inline-start: none;}.hi-v5-table--bordered.hi-v5-table--virtual > .hi-v5-table__wrapper .hi-v5-table-row .hi-v5-table-cell {-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--sticky {position: sticky;top: 0;}.hi-v5-table-header {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;}.hi-v5-table-header__resizable {position: relative;background-clip: padding-box;}.hi-v5-table-header__resizable:hover {background-color: var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table-header__resizable-handle {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;z-index: 1;width: 2px;height: 100%;inset-block-start: 0;inset-inline-end: -2px;-webkit-border-start: 2px solid transparent;border-inline-start: 2px solid transparent;-webkit-border-end: 2px solid transparent;border-inline-end: 2px solid transparent;cursor: col-resize;background-color: transparent;background-clip: content-box;-webkit-transition: opacity 0.2s;transition: opacity 0.2s;}.hi-v5-table__selection-col > .hi-v5-table-header__resizable-handle {display: none;}.hi-v5-table-header__resizable-handle:hover {background-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-header-cell {-webkit-box-sizing: border-box;box-sizing: border-box;background-color: var(--hi-v5-color-static-white, #fff);color: var(--hi-v5-color-gray-600, #91959e);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-medium, 500);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-8, 16px);-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table-header-cell.hi-v5-table__embed-col {padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table-header-cell.hi-v5-table__selection-col {padding: 0 !important;text-align: center !important;}.hi-v5-table-header-cell.hi-v5-table-header-cell__col--highlight, .hi-v5-table-header-cell.hi-v5-table-header-cell__col--hovered-highlight, .hi-v5-table-header-cell.hi-v5-table-header-cell__col--active {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-table-header-cell.hi-v5-table-header-cell__col--highlight[data-sticky], .hi-v5-table-header-cell.hi-v5-table-header-cell__col--hovered-highlight[data-sticky], .hi-v5-table-header-cell.hi-v5-table-header-cell__col--active[data-sticky] {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-table-row--fixed-top, .hi-v5-table-row--fixed-bottom {position: sticky;z-index: 6;}.hi-v5-table-row--fixed-top {inset-block-start: 0;}.hi-v5-table-row--fixed-bottom {inset-block-end: 0;}.hi-v5-table-row--fixed-bottom .hi-v5-table-cell {-webkit-border-before: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);border-block-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);}.hi-v5-table-row:has(+ .hi-v5-table-row--fixed-bottom) .hi-v5-table-cell {-webkit-border-after: none;border-block-end: none;}.hi-v5-table-row--hover:hover > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--striped > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-row--expanded > .hi-v5-table-cell {color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-table-row--error > .hi-v5-table-cell {color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-table-row--highlight > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--dragging > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--drag-top > .hi-v5-table-cell {-webkit-border-before: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-block-start: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-row--drag-bottom > .hi-v5-table-cell {-webkit-border-after: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-block-end: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-row--avg > .hi-v5-table-cell, .hi-v5-table-row--total > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-row--avg:hover > .hi-v5-table-cell, .hi-v5-table-row--total:hover > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-row--virtual {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-table-header .hi-v5-table-header-col, .hi-v5-table-header .hi-v5-table-col {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-body .hi-v5-table-header-col[data-hover-highlight], .hi-v5-table-body .hi-v5-table-col[data-hover-highlight] {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-header .hi-v5-table-header-col[data-hover-highlight], .hi-v5-table-header .hi-v5-table-col[data-hover-highlight] {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-table-body, .hi-v5-table-content {position: relative;overflow: auto;}.hi-v5-table-body--virtual-holder {overflow: hidden;}.hi-v5-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;word-break: break-word;-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-normal, 400);color: var(--hi-v5-color-gray-800, #1a1d26);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-8, 16px);background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-table-cell__indent {display: inline-block;vertical-align: middle;width: var(--hi-v5-text-size-md, 0.875rem);height: 100%;-webkit-margin-end: var(--hi-v5-spacing-1, 2px);margin-inline-end: var(--hi-v5-spacing-1, 2px);}.hi-v5-table-cell__switcher.hi-v5-icon-button {-webkit-margin-end: var(--hi-v5-spacing-1, 2px);margin-inline-end: var(--hi-v5-spacing-1, 2px);color: var(--hi-v5-color-gray-600, #91959e);vertical-align: middle;}.hi-v5-table-cell.hi-v5-table__embed-col {padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table-cell.hi-v5-table__selection-col {padding: 0 !important;text-align: center !important;}.hi-v5-table-cell.hi-v5-table-cell__col--highlight {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-cell.hi-v5-table-cell__col--hovered-highlight {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-freeze-shadow {position: absolute;inset-block-start: 0;inset-block-end: 0;z-index: 20;pointer-events: none;overflow: hidden;height: 100%;width: 200px;}.hi-v5-table-freeze-shadow--left {-webkit-margin-end: var(--hi-v5-spacing-5, 10px);margin-inline-end: var(--hi-v5-spacing-5, 10px);inset-inline-start: 0;-webkit-box-shadow: var(--hi-v5-shadow-sm, 2px 0 4px 0 rgba(26, 29, 38, 0.02), 2px 0 4px 0 rgba(26, 29, 38, 0.02), 1px 0 2px -2px rgba(26, 29, 38, 0.02));box-shadow: var(--hi-v5-shadow-sm, 2px 0 4px 0 rgba(26, 29, 38, 0.02), 2px 0 4px 0 rgba(26, 29, 38, 0.02), 1px 0 2px -2px rgba(26, 29, 38, 0.02));}.hi-v5-table-freeze-shadow--right {-webkit-margin-start: var(--hi-v5-spacing-5, 10px);margin-inline-start: var(--hi-v5-spacing-5, 10px);inset-inline-end: 0;-webkit-box-shadow: var(--hi-v5-shadow-sm, -2px 0 8px 2px rgba(26, 29, 38, 0.02), -2px 0 4px 0 rgba(26, 29, 38, 0.02), -1px 0 2px -2px rgba(26, 29, 38, 0.02));box-shadow: var(--hi-v5-shadow-sm, -2px 0 8px 2px rgba(26, 29, 38, 0.02), -2px 0 4px 0 rgba(26, 29, 38, 0.02), -1px 0 2px -2px rgba(26, 29, 38, 0.02));}.hi-v5-table-header-filter-dropdown__trigger.hi-v5-icon-button {-webkit-margin-start: var(--hi-v5-spacing-2, 4px);margin-inline-start: var(--hi-v5-spacing-2, 4px);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-table-header-filter-dropdown__trigger--active.hi-v5-icon-button {-webkit-transform: rotate(180deg);transform: rotate(180deg);}.hi-v5-table-header-filter-dropdown__content {width: 124px;padding: var(--hi-v5-spacing-2, 4px);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-radius: var(--hi-v5-border-radius-xl, 8px);font-weight: var(--hi-v5-text-weight-normal, 400);}.hi-v5-table-header-filter-dropdown__item {padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);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-v5-color-gray-800, #1a1d26);font-size: var(--hi-v5-text-size-md, 0.875rem);}.hi-v5-table-header-filter-dropdown__item:hover {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-header-filter-dropdown__item--active {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-header-filter-dropdown__item--active:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-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: var(--hi-v5-height-5, 20px);vertical-align: middle;-webkit-margin-start: var(--hi-v5-spacing-3, 6px);margin-inline-start: var(--hi-v5-spacing-3, 6px);}.hi-v5-table-header-filter-sorter__icon {display: inline-block;height: var(--hi-v5-height-2, 8px);cursor: pointer;overflow: hidden;font-weight: var(--hi-v5-text-weight-normal, 400);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-table-header-filter-sorter__icon:hover {color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-table-header-filter-sorter__icon svg {position: relative;inset-block-start: -5px;}.hi-v5-table-header-filter-sorter__icon--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-header-filter-custom__trigger {-webkit-margin-start: var(--hi-v5-spacing-3, 6px);margin-inline-start: var(--hi-v5-spacing-3, 6px);color: var(--hi-v5-color-gray-600, #91959e);cursor: pointer;}.hi-v5-table-header-filter-custom__content {padding: var(--hi-v5-spacing-6, 12px);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-radius: var(--hi-v5-border-radius-xl, 8px);}.hi-v5-table-embed-row {position: relative;z-index: 0;}.hi-v5-table-embed-row > td {background-color: var(--hi-v5-color-gray-100, #f2f4f7);padding: var(--hi-v5-spacing-6, 12px);}.hi-v5-table-setting {position: absolute;height: calc(100% - 2px);z-index: 11;-webkit-box-sizing: border-box;box-sizing: border-box;inset-inline-end: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;color: var(--hi-v5-color-gray-600, #91959e);cursor: pointer;font-size: var(--hi-v5-text-size-sm, 0.75rem);width: 18px;background: var(--hi-v5-color-static-white, #fff);}.hi-v5-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-v5-table-setting-item {position: relative;-webkit-padding-before: var(--hi-v5-spacing-1, 2px);padding-block-start: var(--hi-v5-spacing-1, 2px);-webkit-padding-after: var(--hi-v5-spacing-1, 2px);padding-block-end: var(--hi-v5-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-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: calc(var(--hi-v5-spacing-3, 6px) - 1px) var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-table-setting-item__wrap:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-setting-item--dragging .hi-v5-table-setting-item__wrap {opacity: 0.6;}.hi-v5-table-setting-item::before {position: absolute;inset-inline-start: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: var(--hi-v5-height-2, 8px);height: var(--hi-v5-height-2, 8px);content: \"\";background-color: var(--hi-v5-color-static-white, #fff);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-radius: 100%;}.hi-v5-table-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-block-end-width: 0;border-block-end-style: solid;border-bottom-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));inset-inline-start: 0;width: 100%;}.hi-v5-table-setting-item::before, .hi-v5-table-setting-item::after {-webkit-margin-start: calc(-1 * var(--hi-v5-spacing-5, 10px));margin-inline-start: calc(-1 * var(--hi-v5-spacing-5, 10px));-webkit-margin-end: calc(-1 * var(--hi-v5-spacing-5, 10px));margin-inline-end: calc(-1 * var(--hi-v5-spacing-5, 10px));}.hi-v5-table-setting-item--direction-before::before {display: block;inset-block-start: -0.5px;-webkit-transform: translate3d(0, -4px, 0);transform: translate3d(0, -4px, 0);}.hi-v5-table-setting-item--direction-before::after {inset-block-start: -0.5px;border-block-end-width: 1px;}.hi-v5-table-setting-item--direction-after::before {display: block;inset-block-end: 0.5px;-webkit-transform: translate3d(0, 4px, 0);transform: translate3d(0, 4px, 0);}.hi-v5-table-setting-item--direction-after::after {inset-block-end: 0.5px;border-block-end-width: 1px;}.hi-v5-table-pagination {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: var(--hi-v5-spacing-4, 8px);padding: var(--hi-v5-spacing-6, 12px) 0;background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-table-pagination--placement-left {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}.hi-v5-table-pagination--placement-right {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v5-table-pagination--placement-middle {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v5-table--empty th:first-child {-webkit-border-start: none !important;border-inline-start: none !important;}.hi-v5-table--empty td {text-align: center;padding: var(--hi-v5-spacing-12, 24px) 0;}.hi-v5-setting-drawer .hi-v5-setting-footer {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-setting-drawer .hi-v5-setting-footer__extra {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v5-setting-item {position: relative;-webkit-padding-before: var(--hi-v5-spacing-1, 2px);padding-block-start: var(--hi-v5-spacing-1, 2px);-webkit-padding-after: var(--hi-v5-spacing-1, 2px);padding-block-end: var(--hi-v5-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-setting-item:not(.hi-v5-setting-item--drag-disabled) .hi-v5-setting-item__wrap {cursor: move;}.hi-v5-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;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: calc(var(--hi-v5-spacing-3, 6px) - 1px) var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-setting-item__wrap:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-setting-item--dragging .hi-v5-setting-item__wrap {opacity: 0.6;}.hi-v5-setting-item::before {position: absolute;inset-inline-start: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: var(--hi-v5-height-2, 8px);height: var(--hi-v5-height-2, 8px);content: \"\";background-color: var(--hi-v5-color-static-white, #fff);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-radius: 100%;}.hi-v5-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-block-end-width: 0;border-block-end-style: solid;border-block-end-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));inset-inline-start: 0;width: 100%;}.hi-v5-setting-item::before, .hi-v5-setting-item::after {-webkit-margin-start: calc(-1 * var(--hi-v5-spacing-5, 10px));margin-inline-start: calc(-1 * var(--hi-v5-spacing-5, 10px));-webkit-margin-end: calc(-1 * var(--hi-v5-spacing-5, 10px));margin-inline-end: calc(-1 * var(--hi-v5-spacing-5, 10px));}.hi-v5-setting-item--direction-before::before {display: block;inset-block-start: -0.5px;-webkit-transform: translate3d(0, -4px, 0);transform: translate3d(0, -4px, 0);}.hi-v5-setting-item--direction-before::after {inset-block-start: -0.5px;border-block-end-width: 1px;}.hi-v5-setting-item--direction-after::before {display: block;inset-block-end: 0.5px;-webkit-transform: translate3d(0, 4px, 0);transform: translate3d(0, 4px, 0);}.hi-v5-setting-item--direction-after::after {inset-block-end: 0.5px;border-block-end-width: 1px;}";
+var css_248z = ".hi-v5-table {-webkit-box-sizing: border-box;box-sizing: border-box;font-size: var(--hi-v5-text-size-md, 0.875rem);position: relative;}.hi-v5-table table {width: 100%;text-align: start;background-color: var(--hi-v5-color-static-white, #fff);border-radius: var(--hi-v5-border-radius-sm, 2px) var(--hi-v5-border-radius-sm, 2px) 0 0;border-spacing: 0;border-collapse: separate;display: table;table-layout: fixed;}.hi-v5-table__wrapper {position: relative;z-index: 0;-webkit-border-before: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table__wrapper.hi-v5-table--exceed-wrapper-height::after {content: \"\";position: absolute;inset-block-end: 0;inset-inline-start: 0;width: 100%;-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--stretch-height {height: 100%;overflow: hidden;}.hi-v5-table--stretch-height .hi-v5-table__wrapper {-webkit-box-sizing: border-box;box-sizing: border-box;height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v5-table--stretch-height .hi-v5-table__wrapper .hi-v5-table-body {-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;overflow: auto;}.hi-v5-table--stretch-height .hi-v5-table-header-cell {position: sticky;inset-block-start: 0;z-index: 1;}.hi-v5-table--stretch-height.hi-v5-table--empty .hi-v5-table__wrapper .hi-v5-table-body table {height: 100%;}.hi-v5-table--stretch-height.hi-v5-table--empty .hi-v5-scrollbar__wrapper {height: 100%;}.hi-v5-table__switcher.hi-v5-icon-button {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-table__switcher--expanded.hi-v5-icon-button {color: var(--hi-v5-color-primary-400, var(--hi-v5-color-brandblue-400, #4d82ff));}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-sm .hi-v5-table-header-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-sm .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-md .hi-v5-table-header-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-md .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-lg .hi-v5-table-header-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-lg .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--virtual {width: 100%;overflow: hidden;}.hi-v5-table--virtual .hi-v5-table__wrapper::after {content: \"\";position: absolute;inset-block-end: 0;inset-inline-start: 0;width: 100%;-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--virtual .hi-v5-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-table--virtual.hi-v5-table--size-sm .hi-v5-table-header-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table--virtual.hi-v5-table--size-sm .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table--virtual.hi-v5-table--size-md .hi-v5-table-header-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table--virtual.hi-v5-table--size-md .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table--virtual.hi-v5-table--size-lg .hi-v5-table-header-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--virtual.hi-v5-table--size-lg .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--bordered > .hi-v5-table__wrapper {-webkit-border-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-inline-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);-webkit-border-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-inline-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--bordered > .hi-v5-table__wrapper .hi-v5-table-header-cell, .hi-v5-table--bordered > .hi-v5-table__wrapper .hi-v5-table-cell {-webkit-border-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-inline-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--bordered.hi-v5-table--bordered-left-none > .hi-v5-table__wrapper {-webkit-border-start: none;border-inline-start: none;}.hi-v5-table--bordered.hi-v5-table--virtual > .hi-v5-table__wrapper .hi-v5-table-row .hi-v5-table-cell {-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--sticky {position: sticky;top: 0;}.hi-v5-table-header {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;}.hi-v5-table-header__resizable {position: relative;background-clip: padding-box;}.hi-v5-table-header__resizable:hover {background-color: var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table-header__resizable-handle {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;z-index: 1;width: 2px;height: 100%;inset-block-start: 0;inset-inline-end: -2px;-webkit-border-start: 2px solid transparent;border-inline-start: 2px solid transparent;-webkit-border-end: 2px solid transparent;border-inline-end: 2px solid transparent;cursor: col-resize;background-color: transparent;background-clip: content-box;-webkit-transition: opacity 0.2s;transition: opacity 0.2s;}.hi-v5-table__selection-col > .hi-v5-table-header__resizable-handle {display: none;}.hi-v5-table-header__resizable-handle:hover {background-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-header-cell {-webkit-box-sizing: border-box;box-sizing: border-box;background-color: var(--hi-v5-color-static-white, #fff);color: var(--hi-v5-color-gray-600, #91959e);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-medium, 500);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-8, 16px);-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table-header-cell.hi-v5-table__embed-col {padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table-header-cell.hi-v5-table__selection-col {padding: 0 !important;text-align: center !important;}.hi-v5-table-header-cell.hi-v5-table-header-cell__col--highlight, .hi-v5-table-header-cell.hi-v5-table-header-cell__col--hovered-highlight, .hi-v5-table-header-cell.hi-v5-table-header-cell__col--active {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-table-header-cell.hi-v5-table-header-cell__col--highlight[data-sticky], .hi-v5-table-header-cell.hi-v5-table-header-cell__col--hovered-highlight[data-sticky], .hi-v5-table-header-cell.hi-v5-table-header-cell__col--active[data-sticky] {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-table-row--fixed-top, .hi-v5-table-row--fixed-bottom {position: sticky;z-index: 6;}.hi-v5-table-row--fixed-top {inset-block-start: 0;}.hi-v5-table-row--fixed-bottom {inset-block-end: 0;}.hi-v5-table-row--fixed-bottom .hi-v5-table-cell {-webkit-border-before: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);border-block-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);}.hi-v5-table-row:has(+ .hi-v5-table-row--fixed-bottom) .hi-v5-table-cell {-webkit-border-after: none;border-block-end: none;}.hi-v5-table-row--hover:hover > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--striped > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-row--expanded > .hi-v5-table-cell {color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-table-row--error > .hi-v5-table-cell {color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-table-row--highlight > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--dragging > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--drag-top > .hi-v5-table-cell {-webkit-border-before: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-block-start: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-row--drag-bottom > .hi-v5-table-cell {-webkit-border-after: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-block-end: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-row--avg > .hi-v5-table-cell, .hi-v5-table-row--total > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-row--avg:hover > .hi-v5-table-cell, .hi-v5-table-row--total:hover > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-row--virtual {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-table-header .hi-v5-table-header-col, .hi-v5-table-header .hi-v5-table-col {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-body .hi-v5-table-header-col[data-hover-highlight], .hi-v5-table-body .hi-v5-table-col[data-hover-highlight] {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-header .hi-v5-table-header-col[data-hover-highlight], .hi-v5-table-header .hi-v5-table-col[data-hover-highlight] {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-table-body, .hi-v5-table-content {position: relative;overflow: auto;}.hi-v5-table-body--virtual-holder {overflow: hidden;}.hi-v5-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;word-break: break-word;-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-normal, 400);color: var(--hi-v5-color-gray-800, #1a1d26);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-8, 16px);background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-table-cell__indent {display: inline-block;vertical-align: middle;width: var(--hi-v5-text-size-md, 0.875rem);height: 100%;-webkit-margin-end: var(--hi-v5-spacing-1, 2px);margin-inline-end: var(--hi-v5-spacing-1, 2px);}.hi-v5-table-cell__switcher.hi-v5-icon-button {-webkit-margin-end: var(--hi-v5-spacing-1, 2px);margin-inline-end: var(--hi-v5-spacing-1, 2px);color: var(--hi-v5-color-gray-600, #91959e);vertical-align: middle;}.hi-v5-table-cell.hi-v5-table__embed-col {padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table-cell.hi-v5-table__selection-col {padding: 0 !important;text-align: center !important;}.hi-v5-table-cell.hi-v5-table-cell__col--highlight {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-cell.hi-v5-table-cell__col--hovered-highlight {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-freeze-shadow {position: absolute;inset-block-start: 0;inset-block-end: 0;z-index: 20;pointer-events: none;overflow: hidden;height: 100%;width: 200px;}.hi-v5-table-freeze-shadow--left {-webkit-margin-end: var(--hi-v5-spacing-5, 10px);margin-inline-end: var(--hi-v5-spacing-5, 10px);inset-inline-start: 0;-webkit-box-shadow: var(--hi-v5-shadow-sm, 2px 0 4px 0 rgba(26, 29, 38, 0.02), 2px 0 4px 0 rgba(26, 29, 38, 0.02), 1px 0 2px -2px rgba(26, 29, 38, 0.02));box-shadow: var(--hi-v5-shadow-sm, 2px 0 4px 0 rgba(26, 29, 38, 0.02), 2px 0 4px 0 rgba(26, 29, 38, 0.02), 1px 0 2px -2px rgba(26, 29, 38, 0.02));}.hi-v5-table-freeze-shadow--right {-webkit-margin-start: var(--hi-v5-spacing-5, 10px);margin-inline-start: var(--hi-v5-spacing-5, 10px);inset-inline-end: 0;-webkit-box-shadow: var(--hi-v5-shadow-sm, -2px 0 8px 2px rgba(26, 29, 38, 0.02), -2px 0 4px 0 rgba(26, 29, 38, 0.02), -1px 0 2px -2px rgba(26, 29, 38, 0.02));box-shadow: var(--hi-v5-shadow-sm, -2px 0 8px 2px rgba(26, 29, 38, 0.02), -2px 0 4px 0 rgba(26, 29, 38, 0.02), -1px 0 2px -2px rgba(26, 29, 38, 0.02));}.hi-v5-table-header-filter-dropdown__trigger.hi-v5-icon-button {-webkit-margin-start: var(--hi-v5-spacing-2, 4px);margin-inline-start: var(--hi-v5-spacing-2, 4px);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-table-header-filter-dropdown__trigger--active.hi-v5-icon-button {-webkit-transform: rotate(180deg);transform: rotate(180deg);}.hi-v5-table-header-filter-dropdown__content {width: 124px;padding: var(--hi-v5-spacing-2, 4px);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-radius: var(--hi-v5-border-radius-xl, 8px);font-weight: var(--hi-v5-text-weight-normal, 400);}.hi-v5-table-header-filter-dropdown__item {padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);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-v5-color-gray-800, #1a1d26);font-size: var(--hi-v5-text-size-md, 0.875rem);}.hi-v5-table-header-filter-dropdown__item:hover {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-header-filter-dropdown__item--active {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-header-filter-dropdown__item--active:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-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: var(--hi-v5-height-5, 20px);vertical-align: middle;-webkit-margin-start: var(--hi-v5-spacing-3, 6px);margin-inline-start: var(--hi-v5-spacing-3, 6px);}.hi-v5-table-header-filter-sorter__icon {display: inline-block;height: var(--hi-v5-height-2, 8px);cursor: pointer;overflow: hidden;font-weight: var(--hi-v5-text-weight-normal, 400);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-table-header-filter-sorter__icon:hover {color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-table-header-filter-sorter__icon svg {position: relative;inset-block-start: -5px;}.hi-v5-table-header-filter-sorter__icon--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-header-filter-custom__trigger {-webkit-margin-start: var(--hi-v5-spacing-3, 6px);margin-inline-start: var(--hi-v5-spacing-3, 6px);color: var(--hi-v5-color-gray-600, #91959e);cursor: pointer;}.hi-v5-table-header-filter-custom__content {padding: var(--hi-v5-spacing-6, 12px);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-radius: var(--hi-v5-border-radius-xl, 8px);}.hi-v5-table-embed-row {position: relative;z-index: 0;}.hi-v5-table-embed-row > td {background-color: var(--hi-v5-color-gray-100, #f2f4f7);padding: var(--hi-v5-spacing-6, 12px);}.hi-v5-table-setting {position: absolute;height: calc(100% - 2px);z-index: 11;-webkit-box-sizing: border-box;box-sizing: border-box;inset-inline-end: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;color: var(--hi-v5-color-gray-600, #91959e);cursor: pointer;font-size: var(--hi-v5-text-size-sm, 0.75rem);width: 18px;background: var(--hi-v5-color-static-white, #fff);}.hi-v5-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-v5-table-setting-item {position: relative;-webkit-padding-before: var(--hi-v5-spacing-1, 2px);padding-block-start: var(--hi-v5-spacing-1, 2px);-webkit-padding-after: var(--hi-v5-spacing-1, 2px);padding-block-end: var(--hi-v5-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-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: calc(var(--hi-v5-spacing-3, 6px) - 1px) var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-table-setting-item__wrap:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-setting-item--dragging .hi-v5-table-setting-item__wrap {opacity: 0.6;}.hi-v5-table-setting-item::before {position: absolute;inset-inline-start: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: var(--hi-v5-height-2, 8px);height: var(--hi-v5-height-2, 8px);content: \"\";background-color: var(--hi-v5-color-static-white, #fff);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-radius: 100%;}.hi-v5-table-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-block-end-width: 0;border-block-end-style: solid;border-bottom-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));inset-inline-start: 0;width: 100%;}.hi-v5-table-setting-item::before, .hi-v5-table-setting-item::after {-webkit-margin-start: calc(-1 * var(--hi-v5-spacing-5, 10px));margin-inline-start: calc(-1 * var(--hi-v5-spacing-5, 10px));-webkit-margin-end: calc(-1 * var(--hi-v5-spacing-5, 10px));margin-inline-end: calc(-1 * var(--hi-v5-spacing-5, 10px));}.hi-v5-table-setting-item--direction-before::before {display: block;inset-block-start: -0.5px;-webkit-transform: translate3d(0, -4px, 0);transform: translate3d(0, -4px, 0);}.hi-v5-table-setting-item--direction-before::after {inset-block-start: -0.5px;border-block-end-width: 1px;}.hi-v5-table-setting-item--direction-after::before {display: block;inset-block-end: 0.5px;-webkit-transform: translate3d(0, 4px, 0);transform: translate3d(0, 4px, 0);}.hi-v5-table-setting-item--direction-after::after {inset-block-end: 0.5px;border-block-end-width: 1px;}.hi-v5-table-pagination {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: var(--hi-v5-spacing-4, 8px);padding: var(--hi-v5-spacing-6, 12px) 0;background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-table-pagination--placement-left {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}.hi-v5-table-pagination--placement-right {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v5-table-pagination--placement-middle {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v5-table--empty td {text-align: center;padding: var(--hi-v5-spacing-12, 24px) 0;}.hi-v5-table--empty.hi-v5-table--bordered tr:first-child th:first-child {-webkit-border-start: none;border-inline-start: none;}.hi-v5-table--empty.hi-v5-table--bordered td {-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-setting-drawer .hi-v5-setting-footer {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-setting-drawer .hi-v5-setting-footer__extra {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v5-setting-item {position: relative;-webkit-padding-before: var(--hi-v5-spacing-1, 2px);padding-block-start: var(--hi-v5-spacing-1, 2px);-webkit-padding-after: var(--hi-v5-spacing-1, 2px);padding-block-end: var(--hi-v5-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-setting-item:not(.hi-v5-setting-item--drag-disabled) .hi-v5-setting-item__wrap {cursor: move;}.hi-v5-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;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: calc(var(--hi-v5-spacing-3, 6px) - 1px) var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-setting-item__wrap:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-setting-item--dragging .hi-v5-setting-item__wrap {opacity: 0.6;}.hi-v5-setting-item::before {position: absolute;inset-inline-start: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: var(--hi-v5-height-2, 8px);height: var(--hi-v5-height-2, 8px);content: \"\";background-color: var(--hi-v5-color-static-white, #fff);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-radius: 100%;}.hi-v5-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-block-end-width: 0;border-block-end-style: solid;border-block-end-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));inset-inline-start: 0;width: 100%;}.hi-v5-setting-item::before, .hi-v5-setting-item::after {-webkit-margin-start: calc(-1 * var(--hi-v5-spacing-5, 10px));margin-inline-start: calc(-1 * var(--hi-v5-spacing-5, 10px));-webkit-margin-end: calc(-1 * var(--hi-v5-spacing-5, 10px));margin-inline-end: calc(-1 * var(--hi-v5-spacing-5, 10px));}.hi-v5-setting-item--direction-before::before {display: block;inset-block-start: -0.5px;-webkit-transform: translate3d(0, -4px, 0);transform: translate3d(0, -4px, 0);}.hi-v5-setting-item--direction-before::after {inset-block-start: -0.5px;border-block-end-width: 1px;}.hi-v5-setting-item--direction-after::before {display: block;inset-block-end: 0.5px;-webkit-transform: translate3d(0, 4px, 0);transform: translate3d(0, 4px, 0);}.hi-v5-setting-item--direction-after::after {inset-block-end: 0.5px;border-block-end-width: 1px;}";
 var __styleInject__ = require('@hi-ui/style-inject')["default"];
 __styleInject__(css_248z);
 exports["default"] = css_248z;

package/lib/cjs/use-table.js

@@ -468,7 +468,10 @@ var useTable = function useTable(_a) {
       return acc;
     }, []);
   }, [mergedColumns1]);
-  var getStickyColProps = useLatest.useLatestCallback(function (column) {
+  var getStickyColProps = useLatest.useLatestCallback(function (column, type) {
+    if (type === void 0) {
+      type = 'td';
+    }
     var rightStickyWidth = column.rightStickyWidth,
       leftStickyWidth = column.leftStickyWidth,
       align = column.align;
@@ -478,10 +481,10 @@ var useTable = function useTable(_a) {
     };
     if (sticky) {
       style.position = 'sticky';
-      style.right = rightStickyWidth + 'px';
-      style.left = leftStickyWidth + 'px';
-      // the value is same with v3
-      style.zIndex = 5;
+      style.insetInlineEnd = rightStickyWidth + 'px';
+      style.insetInlineStart = leftStickyWidth + 'px';
+      // the value is same with v4
+      style.zIndex = type === 'th' ? 5 : 4;
     }
     return {
       style: style,
@@ -491,7 +494,7 @@ var useTable = function useTable(_a) {
   var getTableHeaderProps = React__default["default"].useCallback(function () {
     var style = {
       position: sticky ? 'sticky' : 'relative',
-      top: sticky ? stickyTop : undefined,
+      insetBlockStart: sticky ? stickyTop : undefined,
       overflow: 'hidden',
       zIndex: sticky ? 10 : undefined
     };

package/lib/cjs/utils/index.js

@@ -68,11 +68,12 @@ var setColumnsDefaultWidth = function setColumnsDefaultWidth(columns, defaultWid
 var getGroupItemWidth = function getGroupItemWidth(columns) {
   var colWidths = [];
   var minColWidths = [];
+  var flattedColumnsWithoutChildren = [];
   var dig = function dig(column) {
-    column.forEach(function (_ref) {
-      var children = _ref.children,
-        width = _ref.width,
-        minWidth = _ref.minWidth;
+    column.forEach(function (item) {
+      var children = item.children,
+        width = item.width,
+        minWidth = item.minWidth;
       if (Array.isArray(children)) {
         dig(children);
         return;
@@ -82,12 +83,14 @@ var getGroupItemWidth = function getGroupItemWidth(columns) {
       var minColWidth = typeAssertion.isNumeric(minWidth) ? Number(minWidth) : 0;
       colWidths.push(colWidth);
       minColWidths.push(minColWidth);
+      flattedColumnsWithoutChildren.push(item);
     });
   };
   dig(columns);
   return {
     colWidths: colWidths,
-    minColWidths: minColWidths
+    minColWidths: minColWidths,
+    flattedColumnsWithoutChildren: flattedColumnsWithoutChildren
   };
 };
 var parseFixedColumns = function parseFixedColumns(item, index, columns, arr, key, parentStickyWidth) {
@@ -149,9 +152,9 @@ var parseFixedColumns = function parseFixedColumns(item, index, columns, arr, ke
 var uuid = function uuid() {
   return Math.random().toString(36).substring(5).split('').join('.');
 };
-var parseLocalArray = function parseLocalArray(_ref3) {
-  var key = _ref3.key,
-    defaultValue = _ref3.defaultValue;
+var parseLocalArray = function parseLocalArray(_ref2) {
+  var key = _ref2.key,
+    defaultValue = _ref2.defaultValue;
   if (key) {
     try {
       var localArr = window.localStorage.getItem(key);

package/lib/esm/BaseTable.js

@@ -227,6 +227,27 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
   var wrapperRef = React__default.useRef(null);
   var isTableContentExceedWrapperHeight = bodyTableRef.current && wrapperRef.current && bodyTableRef.current.offsetHeight > wrapperRef.current.offsetHeight;
   var renderTable = function renderTable() {
+    if (needDoubleTable) {
+      var _a2 = getTableHeaderProps(),
+        style = _a2.style,
+        restTableHeaderProps = __rest(_a2, ["style"]);
+      var doubleTableContent = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", Object.assign({}, restTableHeaderProps, {
+        style: Object.assign(Object.assign({}, style), {
+          overflow: undefined
+        })
+      }), /*#__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
+      }));
+      return doubleTableContent;
+    }
     var tableContent = /*#__PURE__*/React__default.createElement("table", {
       ref: bodyTableRef,
       style: {
@@ -248,25 +269,7 @@ var BaseTable = /*#__PURE__*/forwardRef(function (_a, ref) {
       ref: scrollBodyElementRef,
       onScroll: onTableBodyScroll
     }, isObject(scrollbar) ? scrollbar : null), tableContent)));
-    var _a = getTableHeaderProps(),
-      style = _a.style,
-      restTableHeaderProps = __rest(_a, ["style"]);
-    var doubleTableContent = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", Object.assign({}, restTableHeaderProps, {
-      style: Object.assign(Object.assign({}, style), {
-        overflow: undefined
-      })
-    }), /*#__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
-    }));
-    return needDoubleTable ? doubleTableContent : singleTableContent;
+    return singleTableContent;
   };
   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", {

package/lib/esm/Table.js

@@ -74,9 +74,10 @@ var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
     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"]);
   // 是否需要双表格
+  // 当 data 为空时，如果使用单表格，在表头分组下会导致表头错位（原生 table 特性），故而该情况下也要使用双表格
   var needDoubleTable = DOUBLE_TABLE_SCENE.some(function (prop) {
     return !!rest[prop];
-  });
+  }) || data.length === 0;
   var virtual = rest.virtual;
   // ************************ 预置标准模式 ************************ //
   var tableProps = withDefaultProps(rest, standard ? STANDARD_PRESET : undefined);

package/lib/esm/TableCell.js

@@ -92,7 +92,7 @@ var TableCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var cls = cx(prefixCls, className, raw.className, canScroll && sticky && prefixCls + "__col--sticky", isHighlightedCol(dataKey) && prefixCls + "__col--highlight", isHoveredHighlightCol(dataKey) && prefixCls + "__col--hovered-highlight");
   if (virtual) {
     var width = colWidths[colIndex];
-    var colProps = getStickyColProps(column);
+    var colProps = getStickyColProps(column, 'td');
     return /*#__PURE__*/React__default.createElement("div", Object.assign({
       ref: ref,
       key: dataKey,
@@ -130,7 +130,7 @@ var TableCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: ref,
     key: dataKey,
     className: cls
-  }, getStickyColProps(column), {
+  }, getStickyColProps(column, 'td'), {
     colSpan: cellContent.props.colSpan,
     rowSpan: cellContent.props.rowSpan,
     // 按需绑定函数，避免频繁调用 setState 特别消耗性能

package/lib/esm/TbodyContent.js

@@ -33,7 +33,8 @@ var TbodyContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
     sumRow = _useTableContext.sumRow,
     measureRowElementRef = _useTableContext.measureRowElementRef,
     rowClassName = _useTableContext.rowClassName,
-    fixedToRow = _useTableContext.fixedToRow;
+    fixedToRow = _useTableContext.fixedToRow,
+    flattedColumnsWithoutChildren = _useTableContext.flattedColumnsWithoutChildren;
   var getRequiredProps = useLatestCallback(function (id) {
     return {
       // @ts-ignore
@@ -79,19 +80,27 @@ var TbodyContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
     measureRowElementRefNeedUpdate.current = true;
   }, [columns]);
   // 外层增加 div 作为滚动容器
-  return /*#__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("tbody", null, /*#__PURE__*/React__default.createElement("tr", {
+    ref: measureRowElementRef,
+    "aria-hidden": true,
+    style: {
+      height: 0
+    }
+  }, flattedColumnsWithoutChildren.map(function (column) {
+    return /*#__PURE__*/React__default.createElement("td", {
+      key: column.id,
+      style: {
+        height: 0,
+        paddingTop: 0,
+        paddingBottom: 0,
+        borderTop: 'none',
+        borderBottom: 'none'
+      }
+    });
+  })), isArrayNonEmpty(transitionData) ? ( /*#__PURE__*/React__default.createElement(React__default.Fragment, null, transitionData.map(function (row, index) {
     return /*#__PURE__*/React__default.createElement(TableRow, Object.assign({
-      ref: function ref(el) {
-        // 当 el 的子节点数量和 columns 的数量相等时（考虑单元格合并的情况），并且measureRowElementRefNeedUpdate.current为true时，才更新measureRowElementRef
-        if ((el === null || el === void 0 ? void 0 : el.childNodes.length) === columns.length && measureRowElementRefNeedUpdate.current) {
-          measureRowElementRef.current = el;
-          measureRowElementRefNeedUpdate.current = false;
-        }
-      },
-      // key={depth + index}
       key: row.id,
       className: cx.apply(void 0, [rowClassName === null || rowClassName === void 0 ? void 0 : rowClassName(row, index)].concat(fixedToRowTopClassName(row, index))),
-      // @ts-ignore
       rowIndex: index,
       rowData: row
     }, getRequiredProps(row.id)));

package/lib/esm/TheadContent.js

@@ -64,14 +64,14 @@ var TheadContent = /*#__PURE__*/forwardRef(function (_a, ref) {
           groupLastColumn = true;
         }
       }
-      var stickyColProps = getStickyColProps(col);
+      var stickyColProps = getStickyColProps(col, 'th');
       var cell = /*#__PURE__*/React__default.createElement("th", Object.assign({
         key: dataKey
       }, stickyColProps, {
         style: Object.assign(Object.assign({}, stickyColProps.style), {
+          insetBlockStart: (_b = trRefs.current[colsIndex]) === null || _b === void 0 ? void 0 : _b.offsetTop,
           // 表头合并场景下，被合并的表头需要隐藏
-          display: (col === null || col === void 0 ? void 0 : col.colSpan) === 0 ? 'none' : undefined,
-          top: (_b = trRefs.current[colsIndex]) === null || _b === void 0 ? void 0 : _b.offsetTop
+          display: (col === null || col === void 0 ? void 0 : col.colSpan) === 0 ? 'none' : undefined
         }),
         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", groupLastColumn && prefixCls + "-cell--group-last-column"),
         // @ts-ignore

package/lib/esm/hooks/use-col-width.js

@@ -26,17 +26,21 @@ var useColWidth = function useColWidth(_ref) {
     setColWidths = _React$useState[1];
   /**
    * 根据实际内容区（table 的第一行）渲染，再次精确收集并设置每列宽度
+   * 如果实际总宽度大于设置的宽度，则将多余的宽度平分到没有设置 fixed 的列上
    */
   var getWidths = useCallback(function (measureRowElement) {
     if (measureRowElement && measureRowElement.childNodes) {
       // 超出的宽度，即每列真实的宽度超出设置的宽度的总和
       var exceedWidth = 0;
+      var _getGroupItemWidth = getGroupItemWidth(columns),
+        flattedColumnsWithoutChildren = _getGroupItemWidth.flattedColumnsWithoutChildren,
+        _colWidths = _getGroupItemWidth.colWidths;
       var _realColumnsWidth = Array.from(measureRowElement.childNodes).map(function (node, index) {
         var _a;
         var realWidth = node.offsetWidth || 60;
-        var _ref2 = (_a = columns[index]) !== null && _a !== void 0 ? _a : {},
+        var _ref2 = (_a = flattedColumnsWithoutChildren[index]) !== null && _a !== void 0 ? _a : {},
           fixed = _ref2.fixed;
-        var width = getGroupItemWidth(columns).colWidths[index];
+        var width = _colWidths[index];
         // 如果该列设置了 fixed 并且真实宽度大于设置的 width 则设置为 width
         if (fixed && width && width < realWidth) {
           exceedWidth += realWidth - width;
@@ -46,12 +50,12 @@ var useColWidth = function useColWidth(_ref) {
       });
       // 如果有多余的宽度，则将多余的宽度平分到没有设置 fixed 的列上
       if (exceedWidth > 0) {
-        var noFixedColumns = columns.filter(function (item) {
+        var noFixedColumns = flattedColumnsWithoutChildren.filter(function (item) {
           return !item.fixed;
         });
         _realColumnsWidth = _realColumnsWidth.map(function (item, index) {
           var _a;
-          if (!((_a = columns[index]) === null || _a === void 0 ? void 0 : _a.fixed)) {
+          if (!((_a = flattedColumnsWithoutChildren[index]) === null || _a === void 0 ? void 0 : _a.fixed)) {
             return item + Math.floor(exceedWidth / noFixedColumns.length);
           }
           return item;
@@ -161,7 +165,7 @@ var useColWidth = function useColWidth(_ref) {
   var _React$useState2 = React__default.useState(null),
     headerTableElement = _React$useState2[0],
     setHeaderTableElement = _React$useState2[1];
-  // 控制列最小可调整宽度
+  // 控制列最小可调整宽度，主要用于可拖拽调节列宽的场景，目前表头分组还不支持该功能
   var _React$useState3 = React__default.useState(getGroupItemWidth(columns).minColWidths),
     minColWidths = _React$useState3[0],
     setMinColWidths = _React$useState3[1];
@@ -171,14 +175,24 @@ var useColWidth = function useColWidth(_ref) {
     if (headerTableElement) {
       resizeObserver = new ResizeObserver(function () {
         var calcMinColWidths = Array.from(headerTableElement.childNodes).map(function (th, index) {
-          var minColWidth = getGroupItemWidth(columns).minColWidths[index];
-          // 如果设置了最小宽度，则直接使用最小宽度，否则使用标题宽度
+          var _a;
+          var _getGroupItemWidth2 = getGroupItemWidth(columns),
+            colWidths = _getGroupItemWidth2.colWidths,
+            minColWidths = _getGroupItemWidth2.minColWidths;
+          var colWidth = colWidths[index];
+          var minColWidth = minColWidths[index];
+          // 如果设置了最小宽度，则直接使用最小宽度
           if (minColWidth !== undefined && minColWidth !== 0) {
             return minColWidth;
           }
           var thPaddingLeft = parseFloat(window.getComputedStyle(th).getPropertyValue('padding-left'));
           var childNode = Array.from(th.childNodes)[0];
-          var childNodeWidth = childNode.offsetWidth + thPaddingLeft * 2;
+          // 计算真实标题内容宽度
+          var childNodeWidth = ((_a = childNode) === null || _a === void 0 ? void 0 : _a.offsetWidth) + thPaddingLeft * 2;
+          // 如果设置的标题宽度小于真实内容宽度，则使用设置的宽度，否则使用真实内容宽度
+          if (colWidth && colWidth < childNodeWidth) {
+            return colWidth;
+          }
           return childNodeWidth || 40;
         });
         setMinColWidths(calcMinColWidths);
@@ -191,25 +205,6 @@ var useColWidth = function useColWidth(_ref) {
       resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.disconnect();
     };
   }, [columns, columns.length, headerTableElement, resizable]);
-  /**
-   *  控制列最小可调整宽度
-   */
-  React__default.useMemo(function () {
-    if (resizable && headerTableElement) {
-      var resizableHandlerWidth = 4;
-      var _minColWidth = Array.from(headerTableElement.childNodes).map(function (th) {
-        var thPaddingLeft = parseFloat(window.getComputedStyle(th).getPropertyValue('padding-left'));
-        var childNodes = Array.from(th.childNodes);
-        return childNodes.map(function (child) {
-          return child.offsetWidth;
-        }).reduce(function (prev, next) {
-          return prev + next;
-        }) + thPaddingLeft * 2 + resizableHandlerWidth;
-      });
-      return _minColWidth;
-    }
-    return Array(columns.length).fill(0);
-  }, [columns.length, headerTableElement, resizable]);
   /**
    * 列宽拖拽 resize，只处理拖拽线两边的列宽度
    */

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

@@ -8,6 +8,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import __styleInject__ from '@hi-ui/style-inject';
-var css_248z = ".hi-v5-table {-webkit-box-sizing: border-box;box-sizing: border-box;font-size: var(--hi-v5-text-size-md, 0.875rem);position: relative;}.hi-v5-table table {width: 100%;text-align: start;background-color: var(--hi-v5-color-static-white, #fff);border-radius: var(--hi-v5-border-radius-sm, 2px) var(--hi-v5-border-radius-sm, 2px) 0 0;border-spacing: 0;border-collapse: separate;display: table;table-layout: fixed;}.hi-v5-table__wrapper {position: relative;z-index: 0;-webkit-border-before: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table__wrapper.hi-v5-table--exceed-wrapper-height::after {content: \"\";position: absolute;inset-block-end: 0;inset-inline-start: 0;width: 100%;-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--stretch-height {height: 100%;overflow: hidden;}.hi-v5-table--stretch-height .hi-v5-table__wrapper {-webkit-box-sizing: border-box;box-sizing: border-box;height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v5-table--stretch-height .hi-v5-table__wrapper .hi-v5-table-body {-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;overflow: auto;}.hi-v5-table--stretch-height .hi-v5-table-header-cell {position: sticky;inset-block-start: 0;z-index: 1;}.hi-v5-table--stretch-height.hi-v5-table--empty .hi-v5-table__wrapper .hi-v5-table-body table {height: 100%;}.hi-v5-table--stretch-height.hi-v5-table--empty .hi-v5-scrollbar__wrapper {height: 100%;}.hi-v5-table__switcher.hi-v5-icon-button {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-table__switcher--expanded.hi-v5-icon-button {color: var(--hi-v5-color-primary-400, var(--hi-v5-color-brandblue-400, #4d82ff));}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-sm .hi-v5-table-header-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-sm .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-md .hi-v5-table-header-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-md .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-lg .hi-v5-table-header-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-lg .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--virtual {width: 100%;overflow: hidden;}.hi-v5-table--virtual .hi-v5-table__wrapper::after {content: \"\";position: absolute;inset-block-end: 0;inset-inline-start: 0;width: 100%;-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--virtual .hi-v5-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-table--virtual.hi-v5-table--size-sm .hi-v5-table-header-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table--virtual.hi-v5-table--size-sm .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table--virtual.hi-v5-table--size-md .hi-v5-table-header-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table--virtual.hi-v5-table--size-md .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table--virtual.hi-v5-table--size-lg .hi-v5-table-header-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--virtual.hi-v5-table--size-lg .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--bordered > .hi-v5-table__wrapper {-webkit-border-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-inline-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);-webkit-border-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-inline-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--bordered > .hi-v5-table__wrapper .hi-v5-table-header-cell, .hi-v5-table--bordered > .hi-v5-table__wrapper .hi-v5-table-cell {-webkit-border-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-inline-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--bordered.hi-v5-table--bordered-left-none > .hi-v5-table__wrapper {-webkit-border-start: none;border-inline-start: none;}.hi-v5-table--bordered.hi-v5-table--virtual > .hi-v5-table__wrapper .hi-v5-table-row .hi-v5-table-cell {-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--sticky {position: sticky;top: 0;}.hi-v5-table-header {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;}.hi-v5-table-header__resizable {position: relative;background-clip: padding-box;}.hi-v5-table-header__resizable:hover {background-color: var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table-header__resizable-handle {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;z-index: 1;width: 2px;height: 100%;inset-block-start: 0;inset-inline-end: -2px;-webkit-border-start: 2px solid transparent;border-inline-start: 2px solid transparent;-webkit-border-end: 2px solid transparent;border-inline-end: 2px solid transparent;cursor: col-resize;background-color: transparent;background-clip: content-box;-webkit-transition: opacity 0.2s;transition: opacity 0.2s;}.hi-v5-table__selection-col > .hi-v5-table-header__resizable-handle {display: none;}.hi-v5-table-header__resizable-handle:hover {background-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-header-cell {-webkit-box-sizing: border-box;box-sizing: border-box;background-color: var(--hi-v5-color-static-white, #fff);color: var(--hi-v5-color-gray-600, #91959e);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-medium, 500);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-8, 16px);-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table-header-cell.hi-v5-table__embed-col {padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table-header-cell.hi-v5-table__selection-col {padding: 0 !important;text-align: center !important;}.hi-v5-table-header-cell.hi-v5-table-header-cell__col--highlight, .hi-v5-table-header-cell.hi-v5-table-header-cell__col--hovered-highlight, .hi-v5-table-header-cell.hi-v5-table-header-cell__col--active {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-table-header-cell.hi-v5-table-header-cell__col--highlight[data-sticky], .hi-v5-table-header-cell.hi-v5-table-header-cell__col--hovered-highlight[data-sticky], .hi-v5-table-header-cell.hi-v5-table-header-cell__col--active[data-sticky] {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-table-row--fixed-top, .hi-v5-table-row--fixed-bottom {position: sticky;z-index: 6;}.hi-v5-table-row--fixed-top {inset-block-start: 0;}.hi-v5-table-row--fixed-bottom {inset-block-end: 0;}.hi-v5-table-row--fixed-bottom .hi-v5-table-cell {-webkit-border-before: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);border-block-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);}.hi-v5-table-row:has(+ .hi-v5-table-row--fixed-bottom) .hi-v5-table-cell {-webkit-border-after: none;border-block-end: none;}.hi-v5-table-row--hover:hover > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--striped > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-row--expanded > .hi-v5-table-cell {color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-table-row--error > .hi-v5-table-cell {color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-table-row--highlight > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--dragging > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--drag-top > .hi-v5-table-cell {-webkit-border-before: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-block-start: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-row--drag-bottom > .hi-v5-table-cell {-webkit-border-after: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-block-end: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-row--avg > .hi-v5-table-cell, .hi-v5-table-row--total > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-row--avg:hover > .hi-v5-table-cell, .hi-v5-table-row--total:hover > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-row--virtual {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-table-header .hi-v5-table-header-col, .hi-v5-table-header .hi-v5-table-col {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-body .hi-v5-table-header-col[data-hover-highlight], .hi-v5-table-body .hi-v5-table-col[data-hover-highlight] {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-header .hi-v5-table-header-col[data-hover-highlight], .hi-v5-table-header .hi-v5-table-col[data-hover-highlight] {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-table-body, .hi-v5-table-content {position: relative;overflow: auto;}.hi-v5-table-body--virtual-holder {overflow: hidden;}.hi-v5-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;word-break: break-word;-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-normal, 400);color: var(--hi-v5-color-gray-800, #1a1d26);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-8, 16px);background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-table-cell__indent {display: inline-block;vertical-align: middle;width: var(--hi-v5-text-size-md, 0.875rem);height: 100%;-webkit-margin-end: var(--hi-v5-spacing-1, 2px);margin-inline-end: var(--hi-v5-spacing-1, 2px);}.hi-v5-table-cell__switcher.hi-v5-icon-button {-webkit-margin-end: var(--hi-v5-spacing-1, 2px);margin-inline-end: var(--hi-v5-spacing-1, 2px);color: var(--hi-v5-color-gray-600, #91959e);vertical-align: middle;}.hi-v5-table-cell.hi-v5-table__embed-col {padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table-cell.hi-v5-table__selection-col {padding: 0 !important;text-align: center !important;}.hi-v5-table-cell.hi-v5-table-cell__col--highlight {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-cell.hi-v5-table-cell__col--hovered-highlight {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-freeze-shadow {position: absolute;inset-block-start: 0;inset-block-end: 0;z-index: 20;pointer-events: none;overflow: hidden;height: 100%;width: 200px;}.hi-v5-table-freeze-shadow--left {-webkit-margin-end: var(--hi-v5-spacing-5, 10px);margin-inline-end: var(--hi-v5-spacing-5, 10px);inset-inline-start: 0;-webkit-box-shadow: var(--hi-v5-shadow-sm, 2px 0 4px 0 rgba(26, 29, 38, 0.02), 2px 0 4px 0 rgba(26, 29, 38, 0.02), 1px 0 2px -2px rgba(26, 29, 38, 0.02));box-shadow: var(--hi-v5-shadow-sm, 2px 0 4px 0 rgba(26, 29, 38, 0.02), 2px 0 4px 0 rgba(26, 29, 38, 0.02), 1px 0 2px -2px rgba(26, 29, 38, 0.02));}.hi-v5-table-freeze-shadow--right {-webkit-margin-start: var(--hi-v5-spacing-5, 10px);margin-inline-start: var(--hi-v5-spacing-5, 10px);inset-inline-end: 0;-webkit-box-shadow: var(--hi-v5-shadow-sm, -2px 0 8px 2px rgba(26, 29, 38, 0.02), -2px 0 4px 0 rgba(26, 29, 38, 0.02), -1px 0 2px -2px rgba(26, 29, 38, 0.02));box-shadow: var(--hi-v5-shadow-sm, -2px 0 8px 2px rgba(26, 29, 38, 0.02), -2px 0 4px 0 rgba(26, 29, 38, 0.02), -1px 0 2px -2px rgba(26, 29, 38, 0.02));}.hi-v5-table-header-filter-dropdown__trigger.hi-v5-icon-button {-webkit-margin-start: var(--hi-v5-spacing-2, 4px);margin-inline-start: var(--hi-v5-spacing-2, 4px);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-table-header-filter-dropdown__trigger--active.hi-v5-icon-button {-webkit-transform: rotate(180deg);transform: rotate(180deg);}.hi-v5-table-header-filter-dropdown__content {width: 124px;padding: var(--hi-v5-spacing-2, 4px);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-radius: var(--hi-v5-border-radius-xl, 8px);font-weight: var(--hi-v5-text-weight-normal, 400);}.hi-v5-table-header-filter-dropdown__item {padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);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-v5-color-gray-800, #1a1d26);font-size: var(--hi-v5-text-size-md, 0.875rem);}.hi-v5-table-header-filter-dropdown__item:hover {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-header-filter-dropdown__item--active {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-header-filter-dropdown__item--active:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-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: var(--hi-v5-height-5, 20px);vertical-align: middle;-webkit-margin-start: var(--hi-v5-spacing-3, 6px);margin-inline-start: var(--hi-v5-spacing-3, 6px);}.hi-v5-table-header-filter-sorter__icon {display: inline-block;height: var(--hi-v5-height-2, 8px);cursor: pointer;overflow: hidden;font-weight: var(--hi-v5-text-weight-normal, 400);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-table-header-filter-sorter__icon:hover {color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-table-header-filter-sorter__icon svg {position: relative;inset-block-start: -5px;}.hi-v5-table-header-filter-sorter__icon--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-header-filter-custom__trigger {-webkit-margin-start: var(--hi-v5-spacing-3, 6px);margin-inline-start: var(--hi-v5-spacing-3, 6px);color: var(--hi-v5-color-gray-600, #91959e);cursor: pointer;}.hi-v5-table-header-filter-custom__content {padding: var(--hi-v5-spacing-6, 12px);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-radius: var(--hi-v5-border-radius-xl, 8px);}.hi-v5-table-embed-row {position: relative;z-index: 0;}.hi-v5-table-embed-row > td {background-color: var(--hi-v5-color-gray-100, #f2f4f7);padding: var(--hi-v5-spacing-6, 12px);}.hi-v5-table-setting {position: absolute;height: calc(100% - 2px);z-index: 11;-webkit-box-sizing: border-box;box-sizing: border-box;inset-inline-end: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;color: var(--hi-v5-color-gray-600, #91959e);cursor: pointer;font-size: var(--hi-v5-text-size-sm, 0.75rem);width: 18px;background: var(--hi-v5-color-static-white, #fff);}.hi-v5-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-v5-table-setting-item {position: relative;-webkit-padding-before: var(--hi-v5-spacing-1, 2px);padding-block-start: var(--hi-v5-spacing-1, 2px);-webkit-padding-after: var(--hi-v5-spacing-1, 2px);padding-block-end: var(--hi-v5-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-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: calc(var(--hi-v5-spacing-3, 6px) - 1px) var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-table-setting-item__wrap:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-setting-item--dragging .hi-v5-table-setting-item__wrap {opacity: 0.6;}.hi-v5-table-setting-item::before {position: absolute;inset-inline-start: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: var(--hi-v5-height-2, 8px);height: var(--hi-v5-height-2, 8px);content: \"\";background-color: var(--hi-v5-color-static-white, #fff);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-radius: 100%;}.hi-v5-table-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-block-end-width: 0;border-block-end-style: solid;border-bottom-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));inset-inline-start: 0;width: 100%;}.hi-v5-table-setting-item::before, .hi-v5-table-setting-item::after {-webkit-margin-start: calc(-1 * var(--hi-v5-spacing-5, 10px));margin-inline-start: calc(-1 * var(--hi-v5-spacing-5, 10px));-webkit-margin-end: calc(-1 * var(--hi-v5-spacing-5, 10px));margin-inline-end: calc(-1 * var(--hi-v5-spacing-5, 10px));}.hi-v5-table-setting-item--direction-before::before {display: block;inset-block-start: -0.5px;-webkit-transform: translate3d(0, -4px, 0);transform: translate3d(0, -4px, 0);}.hi-v5-table-setting-item--direction-before::after {inset-block-start: -0.5px;border-block-end-width: 1px;}.hi-v5-table-setting-item--direction-after::before {display: block;inset-block-end: 0.5px;-webkit-transform: translate3d(0, 4px, 0);transform: translate3d(0, 4px, 0);}.hi-v5-table-setting-item--direction-after::after {inset-block-end: 0.5px;border-block-end-width: 1px;}.hi-v5-table-pagination {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: var(--hi-v5-spacing-4, 8px);padding: var(--hi-v5-spacing-6, 12px) 0;background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-table-pagination--placement-left {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}.hi-v5-table-pagination--placement-right {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v5-table-pagination--placement-middle {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v5-table--empty th:first-child {-webkit-border-start: none !important;border-inline-start: none !important;}.hi-v5-table--empty td {text-align: center;padding: var(--hi-v5-spacing-12, 24px) 0;}.hi-v5-setting-drawer .hi-v5-setting-footer {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-setting-drawer .hi-v5-setting-footer__extra {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v5-setting-item {position: relative;-webkit-padding-before: var(--hi-v5-spacing-1, 2px);padding-block-start: var(--hi-v5-spacing-1, 2px);-webkit-padding-after: var(--hi-v5-spacing-1, 2px);padding-block-end: var(--hi-v5-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-setting-item:not(.hi-v5-setting-item--drag-disabled) .hi-v5-setting-item__wrap {cursor: move;}.hi-v5-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;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: calc(var(--hi-v5-spacing-3, 6px) - 1px) var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-setting-item__wrap:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-setting-item--dragging .hi-v5-setting-item__wrap {opacity: 0.6;}.hi-v5-setting-item::before {position: absolute;inset-inline-start: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: var(--hi-v5-height-2, 8px);height: var(--hi-v5-height-2, 8px);content: \"\";background-color: var(--hi-v5-color-static-white, #fff);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-radius: 100%;}.hi-v5-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-block-end-width: 0;border-block-end-style: solid;border-block-end-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));inset-inline-start: 0;width: 100%;}.hi-v5-setting-item::before, .hi-v5-setting-item::after {-webkit-margin-start: calc(-1 * var(--hi-v5-spacing-5, 10px));margin-inline-start: calc(-1 * var(--hi-v5-spacing-5, 10px));-webkit-margin-end: calc(-1 * var(--hi-v5-spacing-5, 10px));margin-inline-end: calc(-1 * var(--hi-v5-spacing-5, 10px));}.hi-v5-setting-item--direction-before::before {display: block;inset-block-start: -0.5px;-webkit-transform: translate3d(0, -4px, 0);transform: translate3d(0, -4px, 0);}.hi-v5-setting-item--direction-before::after {inset-block-start: -0.5px;border-block-end-width: 1px;}.hi-v5-setting-item--direction-after::before {display: block;inset-block-end: 0.5px;-webkit-transform: translate3d(0, 4px, 0);transform: translate3d(0, 4px, 0);}.hi-v5-setting-item--direction-after::after {inset-block-end: 0.5px;border-block-end-width: 1px;}";
+var css_248z = ".hi-v5-table {-webkit-box-sizing: border-box;box-sizing: border-box;font-size: var(--hi-v5-text-size-md, 0.875rem);position: relative;}.hi-v5-table table {width: 100%;text-align: start;background-color: var(--hi-v5-color-static-white, #fff);border-radius: var(--hi-v5-border-radius-sm, 2px) var(--hi-v5-border-radius-sm, 2px) 0 0;border-spacing: 0;border-collapse: separate;display: table;table-layout: fixed;}.hi-v5-table__wrapper {position: relative;z-index: 0;-webkit-border-before: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table__wrapper.hi-v5-table--exceed-wrapper-height::after {content: \"\";position: absolute;inset-block-end: 0;inset-inline-start: 0;width: 100%;-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--stretch-height {height: 100%;overflow: hidden;}.hi-v5-table--stretch-height .hi-v5-table__wrapper {-webkit-box-sizing: border-box;box-sizing: border-box;height: 100%;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v5-table--stretch-height .hi-v5-table__wrapper .hi-v5-table-body {-webkit-box-flex: 1;-ms-flex-positive: 1;flex-grow: 1;overflow: auto;}.hi-v5-table--stretch-height .hi-v5-table-header-cell {position: sticky;inset-block-start: 0;z-index: 1;}.hi-v5-table--stretch-height.hi-v5-table--empty .hi-v5-table__wrapper .hi-v5-table-body table {height: 100%;}.hi-v5-table--stretch-height.hi-v5-table--empty .hi-v5-scrollbar__wrapper {height: 100%;}.hi-v5-table__switcher.hi-v5-icon-button {color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-table__switcher--expanded.hi-v5-icon-button {color: var(--hi-v5-color-primary-400, var(--hi-v5-color-brandblue-400, #4d82ff));}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-sm .hi-v5-table-header-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-sm .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-md .hi-v5-table-header-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-md .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-lg .hi-v5-table-header-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table:not(.hi-v5-table--virtual).hi-v5-table--size-lg .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--virtual {width: 100%;overflow: hidden;}.hi-v5-table--virtual .hi-v5-table__wrapper::after {content: \"\";position: absolute;inset-block-end: 0;inset-inline-start: 0;width: 100%;-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--virtual .hi-v5-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-table--virtual.hi-v5-table--size-sm .hi-v5-table-header-cell {height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table--virtual.hi-v5-table--size-sm .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-9, 36px);padding: var(--hi-v5-spacing-1, 2px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table--virtual.hi-v5-table--size-md .hi-v5-table-header-cell {height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table--virtual.hi-v5-table--size-md .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-10, 40px);padding: var(--hi-v5-spacing-2, 4px) var(--hi-v5-spacing-6, 12px);}.hi-v5-table--virtual.hi-v5-table--size-lg .hi-v5-table-header-cell {height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--virtual.hi-v5-table--size-lg .hi-v5-table-row:not(.hi-v5-table-body-empty-content) .hi-v5-table-cell {min-height: var(--hi-v5-height-12, 48px);padding: var(--hi-v5-spacing-4, 8px) var(--hi-v5-spacing-7, 14px);}.hi-v5-table--bordered > .hi-v5-table__wrapper {-webkit-border-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-inline-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);-webkit-border-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-inline-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--bordered > .hi-v5-table__wrapper .hi-v5-table-header-cell, .hi-v5-table--bordered > .hi-v5-table__wrapper .hi-v5-table-cell {-webkit-border-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-inline-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--bordered.hi-v5-table--bordered-left-none > .hi-v5-table__wrapper {-webkit-border-start: none;border-inline-start: none;}.hi-v5-table--bordered.hi-v5-table--virtual > .hi-v5-table__wrapper .hi-v5-table-row .hi-v5-table-cell {-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table--sticky {position: sticky;top: 0;}.hi-v5-table-header {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;overflow: hidden;}.hi-v5-table-header__resizable {position: relative;background-clip: padding-box;}.hi-v5-table-header__resizable:hover {background-color: var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table-header__resizable-handle {-webkit-box-sizing: content-box;box-sizing: content-box;position: absolute;z-index: 1;width: 2px;height: 100%;inset-block-start: 0;inset-inline-end: -2px;-webkit-border-start: 2px solid transparent;border-inline-start: 2px solid transparent;-webkit-border-end: 2px solid transparent;border-inline-end: 2px solid transparent;cursor: col-resize;background-color: transparent;background-clip: content-box;-webkit-transition: opacity 0.2s;transition: opacity 0.2s;}.hi-v5-table__selection-col > .hi-v5-table-header__resizable-handle {display: none;}.hi-v5-table-header__resizable-handle:hover {background-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-header-cell {-webkit-box-sizing: border-box;box-sizing: border-box;background-color: var(--hi-v5-color-static-white, #fff);color: var(--hi-v5-color-gray-600, #91959e);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-medium, 500);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-8, 16px);-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table-header-cell.hi-v5-table__embed-col {padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table-header-cell.hi-v5-table__selection-col {padding: 0 !important;text-align: center !important;}.hi-v5-table-header-cell.hi-v5-table-header-cell__col--highlight, .hi-v5-table-header-cell.hi-v5-table-header-cell__col--hovered-highlight, .hi-v5-table-header-cell.hi-v5-table-header-cell__col--active {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-table-header-cell.hi-v5-table-header-cell__col--highlight[data-sticky], .hi-v5-table-header-cell.hi-v5-table-header-cell__col--hovered-highlight[data-sticky], .hi-v5-table-header-cell.hi-v5-table-header-cell__col--active[data-sticky] {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-table-row--fixed-top, .hi-v5-table-row--fixed-bottom {position: sticky;z-index: 6;}.hi-v5-table-row--fixed-top {inset-block-start: 0;}.hi-v5-table-row--fixed-bottom {inset-block-end: 0;}.hi-v5-table-row--fixed-bottom .hi-v5-table-cell {-webkit-border-before: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);border-block-start: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-400, #dbdde0);}.hi-v5-table-row:has(+ .hi-v5-table-row--fixed-bottom) .hi-v5-table-cell {-webkit-border-after: none;border-block-end: none;}.hi-v5-table-row--hover:hover > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--striped > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-row--expanded > .hi-v5-table-cell {color: var(--hi-v5-color-gray-800, #1a1d26);}.hi-v5-table-row--error > .hi-v5-table-cell {color: var(--hi-v5-color-danger-500, var(--hi-v5-color-red-500, #fa4646));}.hi-v5-table-row--highlight > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--dragging > .hi-v5-table-cell {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-row--drag-top > .hi-v5-table-cell {-webkit-border-before: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-block-start: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-row--drag-bottom > .hi-v5-table-cell {-webkit-border-after: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-block-end: 2px dashed var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-row--avg > .hi-v5-table-cell, .hi-v5-table-row--total > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-row--avg:hover > .hi-v5-table-cell, .hi-v5-table-row--total:hover > .hi-v5-table-cell {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-row--virtual {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v5-table-header .hi-v5-table-header-col, .hi-v5-table-header .hi-v5-table-col {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-body .hi-v5-table-header-col[data-hover-highlight], .hi-v5-table-body .hi-v5-table-col[data-hover-highlight] {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-header .hi-v5-table-header-col[data-hover-highlight], .hi-v5-table-header .hi-v5-table-col[data-hover-highlight] {background-color: var(--hi-v5-color-gray-200, #edeff2);}.hi-v5-table-body, .hi-v5-table-content {position: relative;overflow: auto;}.hi-v5-table-body--virtual-holder {overflow: hidden;}.hi-v5-table-cell {-webkit-box-sizing: border-box;box-sizing: border-box;word-break: break-word;-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);font-size: var(--hi-v5-text-size-md, 0.875rem);font-weight: var(--hi-v5-text-weight-normal, 400);color: var(--hi-v5-color-gray-800, #1a1d26);line-height: var(--hi-v5-text-lineheight-md, 1.375rem);padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-8, 16px);background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-table-cell__indent {display: inline-block;vertical-align: middle;width: var(--hi-v5-text-size-md, 0.875rem);height: 100%;-webkit-margin-end: var(--hi-v5-spacing-1, 2px);margin-inline-end: var(--hi-v5-spacing-1, 2px);}.hi-v5-table-cell__switcher.hi-v5-icon-button {-webkit-margin-end: var(--hi-v5-spacing-1, 2px);margin-inline-end: var(--hi-v5-spacing-1, 2px);color: var(--hi-v5-color-gray-600, #91959e);vertical-align: middle;}.hi-v5-table-cell.hi-v5-table__embed-col {padding: var(--hi-v5-spacing-7, 14px) var(--hi-v5-spacing-5, 10px);}.hi-v5-table-cell.hi-v5-table__selection-col {padding: 0 !important;text-align: center !important;}.hi-v5-table-cell.hi-v5-table-cell__col--highlight {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-cell.hi-v5-table-cell__col--hovered-highlight {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-freeze-shadow {position: absolute;inset-block-start: 0;inset-block-end: 0;z-index: 20;pointer-events: none;overflow: hidden;height: 100%;width: 200px;}.hi-v5-table-freeze-shadow--left {-webkit-margin-end: var(--hi-v5-spacing-5, 10px);margin-inline-end: var(--hi-v5-spacing-5, 10px);inset-inline-start: 0;-webkit-box-shadow: var(--hi-v5-shadow-sm, 2px 0 4px 0 rgba(26, 29, 38, 0.02), 2px 0 4px 0 rgba(26, 29, 38, 0.02), 1px 0 2px -2px rgba(26, 29, 38, 0.02));box-shadow: var(--hi-v5-shadow-sm, 2px 0 4px 0 rgba(26, 29, 38, 0.02), 2px 0 4px 0 rgba(26, 29, 38, 0.02), 1px 0 2px -2px rgba(26, 29, 38, 0.02));}.hi-v5-table-freeze-shadow--right {-webkit-margin-start: var(--hi-v5-spacing-5, 10px);margin-inline-start: var(--hi-v5-spacing-5, 10px);inset-inline-end: 0;-webkit-box-shadow: var(--hi-v5-shadow-sm, -2px 0 8px 2px rgba(26, 29, 38, 0.02), -2px 0 4px 0 rgba(26, 29, 38, 0.02), -1px 0 2px -2px rgba(26, 29, 38, 0.02));box-shadow: var(--hi-v5-shadow-sm, -2px 0 8px 2px rgba(26, 29, 38, 0.02), -2px 0 4px 0 rgba(26, 29, 38, 0.02), -1px 0 2px -2px rgba(26, 29, 38, 0.02));}.hi-v5-table-header-filter-dropdown__trigger.hi-v5-icon-button {-webkit-margin-start: var(--hi-v5-spacing-2, 4px);margin-inline-start: var(--hi-v5-spacing-2, 4px);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-table-header-filter-dropdown__trigger--active.hi-v5-icon-button {-webkit-transform: rotate(180deg);transform: rotate(180deg);}.hi-v5-table-header-filter-dropdown__content {width: 124px;padding: var(--hi-v5-spacing-2, 4px);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-radius: var(--hi-v5-border-radius-xl, 8px);font-weight: var(--hi-v5-text-weight-normal, 400);}.hi-v5-table-header-filter-dropdown__item {padding: var(--hi-v5-spacing-3, 6px) var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);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-v5-color-gray-800, #1a1d26);font-size: var(--hi-v5-text-size-md, 0.875rem);}.hi-v5-table-header-filter-dropdown__item:hover {background-color: var(--hi-v5-color-gray-100, #f2f4f7);}.hi-v5-table-header-filter-dropdown__item--active {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-header-filter-dropdown__item--active:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-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: var(--hi-v5-height-5, 20px);vertical-align: middle;-webkit-margin-start: var(--hi-v5-spacing-3, 6px);margin-inline-start: var(--hi-v5-spacing-3, 6px);}.hi-v5-table-header-filter-sorter__icon {display: inline-block;height: var(--hi-v5-height-2, 8px);cursor: pointer;overflow: hidden;font-weight: var(--hi-v5-text-weight-normal, 400);color: var(--hi-v5-color-gray-600, #91959e);}.hi-v5-table-header-filter-sorter__icon:hover {color: var(--hi-v5-color-gray-700, #60636b);}.hi-v5-table-header-filter-sorter__icon svg {position: relative;inset-block-start: -5px;}.hi-v5-table-header-filter-sorter__icon--active {color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));}.hi-v5-table-header-filter-custom__trigger {-webkit-margin-start: var(--hi-v5-spacing-3, 6px);margin-inline-start: var(--hi-v5-spacing-3, 6px);color: var(--hi-v5-color-gray-600, #91959e);cursor: pointer;}.hi-v5-table-header-filter-custom__content {padding: var(--hi-v5-spacing-6, 12px);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-radius: var(--hi-v5-border-radius-xl, 8px);}.hi-v5-table-embed-row {position: relative;z-index: 0;}.hi-v5-table-embed-row > td {background-color: var(--hi-v5-color-gray-100, #f2f4f7);padding: var(--hi-v5-spacing-6, 12px);}.hi-v5-table-setting {position: absolute;height: calc(100% - 2px);z-index: 11;-webkit-box-sizing: border-box;box-sizing: border-box;inset-inline-end: 0;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;color: var(--hi-v5-color-gray-600, #91959e);cursor: pointer;font-size: var(--hi-v5-text-size-sm, 0.75rem);width: 18px;background: var(--hi-v5-color-static-white, #fff);}.hi-v5-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-v5-table-setting-item {position: relative;-webkit-padding-before: var(--hi-v5-spacing-1, 2px);padding-block-start: var(--hi-v5-spacing-1, 2px);-webkit-padding-after: var(--hi-v5-spacing-1, 2px);padding-block-end: var(--hi-v5-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-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: calc(var(--hi-v5-spacing-3, 6px) - 1px) var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-table-setting-item__wrap:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-table-setting-item--dragging .hi-v5-table-setting-item__wrap {opacity: 0.6;}.hi-v5-table-setting-item::before {position: absolute;inset-inline-start: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: var(--hi-v5-height-2, 8px);height: var(--hi-v5-height-2, 8px);content: \"\";background-color: var(--hi-v5-color-static-white, #fff);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-radius: 100%;}.hi-v5-table-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-block-end-width: 0;border-block-end-style: solid;border-bottom-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));inset-inline-start: 0;width: 100%;}.hi-v5-table-setting-item::before, .hi-v5-table-setting-item::after {-webkit-margin-start: calc(-1 * var(--hi-v5-spacing-5, 10px));margin-inline-start: calc(-1 * var(--hi-v5-spacing-5, 10px));-webkit-margin-end: calc(-1 * var(--hi-v5-spacing-5, 10px));margin-inline-end: calc(-1 * var(--hi-v5-spacing-5, 10px));}.hi-v5-table-setting-item--direction-before::before {display: block;inset-block-start: -0.5px;-webkit-transform: translate3d(0, -4px, 0);transform: translate3d(0, -4px, 0);}.hi-v5-table-setting-item--direction-before::after {inset-block-start: -0.5px;border-block-end-width: 1px;}.hi-v5-table-setting-item--direction-after::before {display: block;inset-block-end: 0.5px;-webkit-transform: translate3d(0, 4px, 0);transform: translate3d(0, 4px, 0);}.hi-v5-table-setting-item--direction-after::after {inset-block-end: 0.5px;border-block-end-width: 1px;}.hi-v5-table-pagination {display: -webkit-box;display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: var(--hi-v5-spacing-4, 8px);padding: var(--hi-v5-spacing-6, 12px) 0;background-color: var(--hi-v5-color-static-white, #fff);}.hi-v5-table-pagination--placement-left {-webkit-box-pack: start;-ms-flex-pack: start;justify-content: flex-start;}.hi-v5-table-pagination--placement-right {-webkit-box-pack: end;-ms-flex-pack: end;justify-content: flex-end;}.hi-v5-table-pagination--placement-middle {-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v5-table--empty td {text-align: center;padding: var(--hi-v5-spacing-12, 24px) 0;}.hi-v5-table--empty.hi-v5-table--bordered tr:first-child th:first-child {-webkit-border-start: none;border-inline-start: none;}.hi-v5-table--empty.hi-v5-table--bordered td {-webkit-border-after: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);border-block-end: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-setting-drawer .hi-v5-setting-footer {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v5-setting-drawer .hi-v5-setting-footer__extra {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;}.hi-v5-setting-item {position: relative;-webkit-padding-before: var(--hi-v5-spacing-1, 2px);padding-block-start: var(--hi-v5-spacing-1, 2px);-webkit-padding-after: var(--hi-v5-spacing-1, 2px);padding-block-end: var(--hi-v5-spacing-1, 2px);-webkit-box-sizing: border-box;box-sizing: border-box;}.hi-v5-setting-item:not(.hi-v5-setting-item--drag-disabled) .hi-v5-setting-item__wrap {cursor: move;}.hi-v5-setting-item__wrap {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;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: calc(var(--hi-v5-spacing-3, 6px) - 1px) var(--hi-v5-spacing-4, 8px);border-radius: var(--hi-v5-border-radius-lg, 6px);}.hi-v5-setting-item__wrap:hover {background-color: var(--hi-v5-color-primary-50, var(--hi-v5-color-brandblue-50, #edf2ff));}.hi-v5-setting-item--dragging .hi-v5-setting-item__wrap {opacity: 0.6;}.hi-v5-setting-item::before {position: absolute;inset-inline-start: 0;z-index: 9999;display: none;-webkit-box-sizing: border-box;box-sizing: border-box;width: var(--hi-v5-height-2, 8px);height: var(--hi-v5-height-2, 8px);content: \"\";background-color: var(--hi-v5-color-static-white, #fff);border: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));border-radius: 100%;}.hi-v5-setting-item::after {position: absolute;content: \"\";z-index: 9998;display: block;-webkit-box-sizing: border-box;box-sizing: border-box;border-block-end-width: 0;border-block-end-style: solid;border-block-end-color: var(--hi-v5-color-primary-500, var(--hi-v5-color-brandblue-500, #2660ff));inset-inline-start: 0;width: 100%;}.hi-v5-setting-item::before, .hi-v5-setting-item::after {-webkit-margin-start: calc(-1 * var(--hi-v5-spacing-5, 10px));margin-inline-start: calc(-1 * var(--hi-v5-spacing-5, 10px));-webkit-margin-end: calc(-1 * var(--hi-v5-spacing-5, 10px));margin-inline-end: calc(-1 * var(--hi-v5-spacing-5, 10px));}.hi-v5-setting-item--direction-before::before {display: block;inset-block-start: -0.5px;-webkit-transform: translate3d(0, -4px, 0);transform: translate3d(0, -4px, 0);}.hi-v5-setting-item--direction-before::after {inset-block-start: -0.5px;border-block-end-width: 1px;}.hi-v5-setting-item--direction-after::before {display: block;inset-block-end: 0.5px;-webkit-transform: translate3d(0, 4px, 0);transform: translate3d(0, 4px, 0);}.hi-v5-setting-item--direction-after::after {inset-block-end: 0.5px;border-block-end-width: 1px;}";
 __styleInject__(css_248z);
 export { css_248z as default };

package/lib/esm/use-table.js

@@ -456,7 +456,10 @@ var useTable = function useTable(_a) {
       return acc;
     }, []);
   }, [mergedColumns1]);
-  var getStickyColProps = useLatestCallback(function (column) {
+  var getStickyColProps = useLatestCallback(function (column, type) {
+    if (type === void 0) {
+      type = 'td';
+    }
     var rightStickyWidth = column.rightStickyWidth,
       leftStickyWidth = column.leftStickyWidth,
       align = column.align;
@@ -466,10 +469,10 @@ var useTable = function useTable(_a) {
     };
     if (sticky) {
       style.position = 'sticky';
-      style.right = rightStickyWidth + 'px';
-      style.left = leftStickyWidth + 'px';
-      // the value is same with v3
-      style.zIndex = 5;
+      style.insetInlineEnd = rightStickyWidth + 'px';
+      style.insetInlineStart = leftStickyWidth + 'px';
+      // the value is same with v4
+      style.zIndex = type === 'th' ? 5 : 4;
     }
     return {
       style: style,
@@ -479,7 +482,7 @@ var useTable = function useTable(_a) {
   var getTableHeaderProps = React__default.useCallback(function () {
     var style = {
       position: sticky ? 'sticky' : 'relative',
-      top: sticky ? stickyTop : undefined,
+      insetBlockStart: sticky ? stickyTop : undefined,
       overflow: 'hidden',
       zIndex: sticky ? 10 : undefined
     };

package/lib/esm/utils/index.js

@@ -63,11 +63,12 @@ var setColumnsDefaultWidth = function setColumnsDefaultWidth(columns, defaultWid
 var getGroupItemWidth = function getGroupItemWidth(columns) {
   var colWidths = [];
   var minColWidths = [];
+  var flattedColumnsWithoutChildren = [];
   var dig = function dig(column) {
-    column.forEach(function (_ref) {
-      var children = _ref.children,
-        width = _ref.width,
-        minWidth = _ref.minWidth;
+    column.forEach(function (item) {
+      var children = item.children,
+        width = item.width,
+        minWidth = item.minWidth;
       if (Array.isArray(children)) {
         dig(children);
         return;
@@ -77,12 +78,14 @@ var getGroupItemWidth = function getGroupItemWidth(columns) {
       var minColWidth = isNumeric(minWidth) ? Number(minWidth) : 0;
       colWidths.push(colWidth);
       minColWidths.push(minColWidth);
+      flattedColumnsWithoutChildren.push(item);
     });
   };
   dig(columns);
   return {
     colWidths: colWidths,
-    minColWidths: minColWidths
+    minColWidths: minColWidths,
+    flattedColumnsWithoutChildren: flattedColumnsWithoutChildren
   };
 };
 var parseFixedColumns = function parseFixedColumns(item, index, columns, arr, key, parentStickyWidth) {
@@ -144,9 +147,9 @@ var parseFixedColumns = function parseFixedColumns(item, index, columns, arr, ke
 var uuid = function uuid() {
   return Math.random().toString(36).substring(5).split('').join('.');
 };
-var parseLocalArray = function parseLocalArray(_ref3) {
-  var key = _ref3.key,
-    defaultValue = _ref3.defaultValue;
+var parseLocalArray = function parseLocalArray(_ref2) {
+  var key = _ref2.key,
+    defaultValue = _ref2.defaultValue;
   if (key) {
     try {
       var localArr = window.localStorage.getItem(key);

package/lib/types/context.d.ts

@@ -7,7 +7,7 @@ export declare const TableProvider: import("react").Provider<(Omit<{
             width: number | undefined;
         };
     };
-    getStickyColProps: (column: any) => {
+    getStickyColProps: (column: any, type?: "td" | "th") => {
         style: import("react").CSSProperties;
         'data-sticky': "" | undefined;
     };
@@ -139,7 +139,7 @@ export declare const useTableContext: () => Omit<{
             width: number | undefined;
         };
     };
-    getStickyColProps: (column: any) => {
+    getStickyColProps: (column: any, type?: "td" | "th") => {
         style: import("react").CSSProperties;
         'data-sticky': "" | undefined;
     };

package/lib/types/use-table.d.ts

@@ -9,7 +9,7 @@ export declare const useTable: ({ data, columns: columnsProp, defaultFixedToColu
             width: number | undefined;
         };
     };
-    getStickyColProps: (column: any) => {
+    getStickyColProps: (column: any, type?: 'th' | 'td') => {
         style: React.CSSProperties;
         'data-sticky': "" | undefined;
     };

package/lib/types/utils/index.d.ts

@@ -9,6 +9,7 @@ export declare const setColumnsDefaultWidth: (columns: any, defaultWidth: any) =
 export declare const getGroupItemWidth: (columns: TableColumnItem[]) => {
     colWidths: number[];
     minColWidths: number[];
+    flattedColumnsWithoutChildren: TableColumnItem[];
 };
 export declare const getMaskItemsWIdth: (columns: TableColumnItem[]) => number;
 export declare const parseFixedColumns: (item: any, index: number, columns: any[], arr: any[], key: string, parentStickyWidth?: number) => any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/table",
-  "version": "5.0.0-canary.25",
+  "version": "5.0.0-canary.26",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",