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

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @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
+
+- d5092f349: refactor(table): stretchHeight 模式不再使用双表格结构，使用 sticky 实现 (5.0)
+- Updated dependencies [c6c0159c4]
+  - @hi-ui/icons@5.0.0-canary.9
+
 ## 5.0.0-canary.24
 
 ### Patch Changes

package/lib/cjs/BaseTable.js

@@ -106,6 +106,7 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       dataKey: EMBED_DATA_KEY,
       title: '',
       width: 38,
+      fixed: true,
       className: prefixCls + "__embed-col",
       align: 'center',
       render: function render(_, rowItem) {
@@ -138,6 +139,8 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }, [embedExpandable, getEmbedPanelColumn, columns]);
   var i18n = core.useLocaleContext();
   var _useMemo = React.useMemo(function () {
+      var _a;
+      // 确保包含 avg 属性，且值为数字类型的字符串
       // 确保包含 avg 属性，且值为数字类型的字符串
       var avgRow = {
         id: 'avg',
@@ -146,9 +149,15 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
         }
       };
       var hasAvgColumn = false;
-      columns.forEach(function (column, index$1) {
-        // 行选中模式下，index=0是checkbox列，index=1才是第一列 ; fix issue: https://github.com/XiaoMi/hiui/issues/2863
-        if (index$1 === 0 || index$1 === 1 && columns[0].dataKey === Table.SELECTION_DATA_KEY) {
+      var flattenedColumns = index.flattenColumns(columns);
+      // 找第一个非选择框列
+      // 找第一个非选择框列
+      var firstDataColumnIndex = 0;
+      if (((_a = columns[0]) === null || _a === void 0 ? void 0 : _a.dataKey) === Table.SELECTION_DATA_KEY) {
+        firstDataColumnIndex = 1;
+      }
+      flattenedColumns.forEach(function (column, index$1) {
+        if (index$1 === firstDataColumnIndex) {
           // @ts-ignore
           avgRow.raw[column.dataKey] = i18n.get('table.average');
         }
@@ -167,6 +176,8 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     avgRow = _useMemo.avgRow,
     hasAvgColumn = _useMemo.hasAvgColumn;
   var _useMemo2 = React.useMemo(function () {
+      var _a;
+      // 确保包含total属性，且值为数字类型的字符串
       // 确保包含total属性，且值为数字类型的字符串
       var sumRow = {
         id: 'sum',
@@ -175,16 +186,19 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
         }
       };
       var hasSumColumn = false;
-      columns.forEach(function (column, index$1) {
-        if (index$1 === 0 || index$1 === 1 && columns[0].dataKey === Table.SELECTION_DATA_KEY) {
+      var flattenedColumns = index.flattenColumns(columns);
+      var firstDataColumnIndex = 0;
+      if (((_a = columns[0]) === null || _a === void 0 ? void 0 : _a.dataKey) === Table.SELECTION_DATA_KEY) {
+        firstDataColumnIndex = 1;
+      }
+      flattenedColumns.forEach(function (column, index$1) {
+        if (index$1 === firstDataColumnIndex) {
           // @ts-ignore
           sumRow.raw[column.dataKey] = i18n.get('table.total');
         }
         if (index.checkNeedTotalOrEvg(data, column, 'total')) {
           hasSumColumn = true;
-          // 获取当前数据最大小数点个数，并设置最后总和值小数点
           // @ts-ignore
-          // 获取当前数据最大小数点个数，并设置最后总和值小数点
           // @ts-ignore
           sumRow.raw[column.dataKey] = index.getTotalOrEvgRowData(data, column, false);
         }
@@ -223,7 +237,30 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var extraHeader = extra && extra.header;
   var extraFooter = extra && extra.footer;
   var alwaysFixedColumn = fixedColumnTrigger === 'always';
+  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: {
@@ -245,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", {
@@ -291,7 +310,8 @@ var BaseTable = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     role: role,
     className: cls
   }, rootProps), /*#__PURE__*/React__default["default"].createElement("div", {
-    className: prefixCls + "__wrapper"
+    ref: wrapperRef,
+    className: classname.cx(prefixCls + "__wrapper", isTableContentExceedWrapperHeight && prefixCls + "--exceed-wrapper-height")
   }, /*#__PURE__*/React__default["default"].createElement(context.TableProvider, {
     value: Object.assign(Object.assign({}, providedValue), {
       striped: striped,

package/lib/cjs/Table.js

@@ -47,7 +47,7 @@ var _prefix = classname.getPrefixCls('table');
  * 需要使用双表格的场景对应的 API
  * 这些场景下的功能无法通过单表格实现，故而设计成双表格，即表头和表体分别用一个 table 实现
  */
-var DOUBLE_TABLE_SCENE = ['needDoubleTable', 'maxHeight', 'sticky', 'stickyTop', 'setting', 'virtual', 'stretchHeight'];
+var DOUBLE_TABLE_SCENE = ['needDoubleTable', 'maxHeight', 'sticky', 'stickyTop', 'setting', 'virtual'];
 var STANDARD_PRESET = {
   striped: true,
   bordered: true,
@@ -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);
@@ -206,6 +207,12 @@ var Table = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       var rowKey = getRowKeyField(rowItem);
       var checked = isCheckedRowKey(rowKey);
       var disabledCheckbox = checkRowIsDisabledCheckbox(rowItem);
+      if (rowItem.key === 'avg' || rowItem.key === 'sum') {
+        return {
+          node: null,
+          checked: false
+        };
+      }
       return {
         node: type === 'checkbox' ? ( /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
           checked: checked,

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

@@ -46,12 +46,20 @@ var TheadContent = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     setHeaderTableElement = _useTableContext.setHeaderTableElement,
     _onResizeStop = _useTableContext.onResizeStop;
   var activeColumnKeysAction = useCheckState.useCheckState();
+  var trRefs = React.useRef([]);
   return /*#__PURE__*/React__default["default"].createElement("thead", Object.assign({}, rest), groupedColumns.map(function (cols, colsIndex) {
     return /*#__PURE__*/React__default["default"].createElement("tr", {
       key: colsIndex,
-      ref: setHeaderTableElement
+      ref: function ref(el) {
+        if (el) {
+          trRefs.current[colsIndex] = el;
+          if (colsIndex === 0) {
+            setHeaderTableElement(el);
+          }
+        }
+      }
     }, cols.map(function (col, colIndex) {
-      var _a;
+      var _a, _b;
       var _ref = col || {},
         dataKey = _ref.dataKey,
         title = _ref.title,
@@ -68,11 +76,12 @@ 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
         }),

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;
@@ -155,7 +159,7 @@ var useColWidth = function useColWidth(_ref) {
         if (virtual) {
           setColWidths(getVirtualWidths());
         } else {
-          // 当第一行有内容时并且没有重新设置列宽时，在去设置列宽
+          // 当第一行有内容时并且没有重新设置列宽时，再去设置列宽
           // Warning hasResetWidths.current 作用是防止某些浏览器下，下面逻辑死循环
           if ((measureRowElement === null || measureRowElement === void 0 ? void 0 : measureRowElement.childNodes) && hasResetWidths.current === false) {
             hasResetWidths.current = true;
@@ -173,8 +177,8 @@ 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([]),
+  // 控制列最小可调整宽度，主要用于可拖拽调节列宽的场景，目前表头分组还不支持该功能
+  var _React$useState3 = React__default["default"].useState(index.getGroupItemWidth(columns).minColWidths),
     minColWidths = _React$useState3[0],
     setMinColWidths = _React$useState3[1];
   // 当列变化时同步更新 minColWidths
@@ -182,17 +186,26 @@ var useColWidth = function useColWidth(_ref) {
     var resizeObserver;
     if (headerTableElement) {
       resizeObserver = new ResizeObserver(function () {
-        var resizableHandlerWidth = 4;
         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 childNodes = Array.from(th.childNodes);
-          var childNodesWidth = childNodes.map(function (child) {
-            return child.offsetWidth;
-          }).reduce(function (prev, next) {
-            return prev + next;
-          }, 0) + thPaddingLeft * 2 + resizableHandlerWidth;
-          return childNodesWidth > minColWidth ? minColWidth : childNodesWidth;
+          var childNode = Array.from(th.childNodes)[0];
+          // 计算真实标题内容宽度
+          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);
       });
@@ -204,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，只处理拖拽线两边的列宽度
    */
@@ -249,15 +243,15 @@ var useColWidth = function useColWidth(_ref) {
   }, [minColWidths, tableWidthAdjustOnResize]);
   var getColgroupProps = React__default["default"].useCallback(function (column, index) {
     var width = colWidths[index] || undefined;
-    var minWidth = minColWidths[index] || undefined;
+    // const minWidth = minColWidths[index] || undefined
     return {
       style: {
-        width: width,
-        minWidth: minWidth || width
+        width: width
+        // minWidth: minWidth || width,
       }
       // 'data-hover-highlight': setAttrStatus(isHoveredCol(column.dataKey)),
     };
-  }, [colWidths, minColWidths]);
+  }, [colWidths]);
   return {
     measureRowElementRef: measureRowElementRef,
     onColumnResizable: onColumnResizable,

package/lib/cjs/hooks/use-colgroup.js

@@ -42,7 +42,7 @@ var useColumns = function useColumns(_ref) {
           // TODO: remove it
           dataKey: raw.dataKey,
           title: raw.title,
-          align: (_a = raw.align) !== null && _a !== void 0 ? _a : 'left',
+          align: (_a = raw.align) !== null && _a !== void 0 ? _a : 'start',
           render: raw.render,
           colSpan: raw.colSpan
         });

package/lib/cjs/node_modules/rc-virtual-list/es/List.js

@@ -408,7 +408,12 @@ function RawList(props, ref) {
   useLayoutEffect["default"](function () {
     if (onVisibleChange) {
       var renderList = mergedData.slice(start, end + 1);
-      onVisibleChange(renderList, mergedData);
+      onVisibleChange(renderList, mergedData, {
+        start: start,
+        end: end,
+        scrollTop: scrollTop,
+        heights: heights
+      });
     }
   }, [start, end, mergedData]); // ================================ Render ================================
 

package/lib/cjs/node_modules/rc-virtual-list/es/hooks/useHeights.js

@@ -85,6 +85,17 @@ function _iterableToArrayLimit(arr, i) {
 function _arrayWithHoles(arr) {
   if (Array.isArray(arr)) return arr;
 }
+
+/**
+ * To get exact height to avoid scrolling deviation
+ */
+function getOuterHeight(el) {
+  var height = el.offsetHeight;
+  var computedStyle = window.getComputedStyle(el);
+  height += parseInt(computedStyle.marginTop, 10);
+  height += parseInt(computedStyle.marginBottom, 10);
+  return height;
+}
 function useHeights(getKey, onItemAdd, onItemRemove) {
   var _React$useState = React__namespace.useState(0),
     _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -102,9 +113,9 @@ function useHeights(getKey, onItemAdd, onItemRemove) {
       instanceRef.current.forEach(function (element, key) {
         if (element && element.offsetParent) {
           var htmlElement = findDOMNode["default"](element);
-          var offsetHeight = htmlElement.offsetHeight;
-          if (heightsRef.current.get(key) !== offsetHeight) {
-            heightsRef.current.set(key, htmlElement.offsetHeight);
+          var outerHeight = getOuterHeight(htmlElement);
+          if (heightsRef.current.get(key) !== outerHeight) {
+            heightsRef.current.set(key, outerHeight);
           }
         }
       }); // Always trigger update mark to tell parent that should re-calculate heights when resized

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;border-top: var(--hi-v5-border-size-normal, 1px solid) var(--hi-v5-color-gray-300, #e6e8eb);}.hi-v5-table__wrapper::after {content: \"\";position: absolute;inset-block-end: 0;inset-inline-start: 0;width: 100%;border-bottom: 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--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-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;