@hi-ui/table 4.0.0-beta.7 → 4.0.0

package/lib/esm/context.js

@@ -2,7 +2,7 @@
  * @hi-ui/table
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -22,4 +22,3 @@ var useTableContext = function useTableContext() {
 };
 
 export { TableProvider, useTableContext };
-//# sourceMappingURL=context.js.map

package/lib/esm/hooks/use-async-switch.js

@@ -2,7 +2,7 @@
  * @hi-ui/table
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -121,4 +121,3 @@ var useAsyncSwitch = function useAsyncSwitch(setCascaderData, onExpand, onLoadCh
 };
 
 export { useAsyncSwitch };
-//# sourceMappingURL=use-async-switch.js.map

package/lib/esm/hooks/use-check.js

@@ -2,7 +2,7 @@
  * @hi-ui/table
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -41,15 +41,22 @@ var useTableCheck = function useTableCheck(_ref) {
         return [false, false];
       }
 
-      var _checkedAll = flattedData.filter(function (item) {
+      var idsCanBeChecked = flattedData.filter(function (item) {
         return !checkRowIsDisabledCheckbox(item.raw);
-      }) // TODO: 数组项完全匹配工具函数
-      . // TODO: 数组项完全匹配工具函数
-      every(function (item) {
-        return isCheckedRowKey(item.id);
+      }).map(function (item) {
+        return item.id;
+      }); // TODO: 数组项完全匹配工具函数
+      // TODO: 数组项完全匹配工具函数
+
+      var _checkedAll = idsCanBeChecked.every(function (id) {
+        return isCheckedRowKey(id);
+      });
+
+      var _semiChecked = _checkedAll ? false : checkedRowKeys.length > 0 && idsCanBeChecked.some(function (id) {
+        return isCheckedRowKey(id);
       });
 
-      return [_checkedAll, _checkedAll ? false : checkedRowKeys.length > 0];
+      return [_checkedAll, _semiChecked];
     }
 
     return [false, false];
@@ -58,18 +65,34 @@ var useTableCheck = function useTableCheck(_ref) {
       semiChecked = _React$useMemo[1];
 
   var tryCheckAllRow = React.useCallback(function () {
-    if (checkedAll) {
-      trySetCheckedRowKeys([], [], false);
-      return;
-    }
-
     var targetItems = flattedData.filter(function (item) {
       return !checkRowIsDisabledCheckbox(item.raw);
     });
     var checkedRowKeys = targetItems.map(function (item) {
       return item.id;
     });
-    trySetCheckedRowKeys(checkedRowKeys, targetItems, true);
+    var targetRowItems = targetItems.map(function (item) {
+      return item.raw;
+    });
+    var checkedRowKeysSet = new Set(checkedRowKeys);
+
+    if (checkedAll) {
+      // 移除当前页所有行 ids
+      trySetCheckedRowKeys(function (prev) {
+        return prev.filter(function (id) {
+          return !checkedRowKeysSet.has(id);
+        });
+      }, targetRowItems, false);
+      return;
+    }
+
+    trySetCheckedRowKeys( // 添加当前页所有行 ids
+    function (prev) {
+      prev.forEach(function (id) {
+        return checkedRowKeysSet.add(id);
+      });
+      return Array.from(checkedRowKeysSet);
+    }, targetRowItems, true);
   }, [trySetCheckedRowKeys, flattedData, checkRowIsDisabledCheckbox, checkedAll]);
   return {
     tryCheckAllRow: tryCheckAllRow,
@@ -84,4 +107,3 @@ var useTableCheck = function useTableCheck(_ref) {
 };
 
 export { useTableCheck };
-//# sourceMappingURL=use-check.js.map

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

@@ -2,7 +2,7 @@
  * @hi-ui/table
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -64,4 +64,3 @@ var useColHidden = function useColHidden(_ref) {
 };
 
 export { useColHidden };
-//# sourceMappingURL=use-col-hidden.js.map

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

@@ -2,13 +2,15 @@
  * @hi-ui/table
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import { useState, useEffect } from 'react';
+import { useMemo, useEffect, useState } from 'react';
 import { useUpdateEffect } from '@hi-ui/use-update-effect';
+import { useUncontrolledState } from '@hi-ui/use-uncontrolled-state';
+import { useLatestRef } from '@hi-ui/use-latest';
 import { parseLocalArray } from '../utils/index.js';
 var DEFAULT_COLUMNS = [];
 /**
@@ -18,38 +20,59 @@ var DEFAULT_COLUMNS = [];
 var useColSorter = function useColSorter(_ref) {
   var uniqueId = _ref.uniqueId,
       _ref$columns = _ref.columns,
-      columns = _ref$columns === void 0 ? DEFAULT_COLUMNS : _ref$columns;
+      columns = _ref$columns === void 0 ? DEFAULT_COLUMNS : _ref$columns,
+      sortedColKeysProp = _ref.sortedColKeys,
+      onSortedColKeysChange = _ref.onSortedColKeysChange;
   var cacheKey = uniqueId ? uniqueId + "_sortCols" : '';
 
-  var _useState = useState(function () {
+  var _useUncontrolledState = useUncontrolledState(function () {
     return parseLocalArray({
       key: cacheKey,
-      defaultValue: columns
+      defaultValue: columns.map(function (column) {
+        return column.dataKey;
+      })
     });
-  }),
-      sortedCols = _useState[0],
-      setSortCols = _useState[1];
+  }, sortedColKeysProp, onSortedColKeysChange),
+      sortedColKeys = _useUncontrolledState[0],
+      setSortColKeys = _useUncontrolledState[1];
 
+  useUpdateEffect(function () {
+    // 当column发生改变的时候，同步 setting 的 sortedCols 设置
+    setSortColKeys(columns.map(function (column) {
+      return column.dataKey;
+    }));
+  }, [columns]);
+  var columnsLatestRef = useLatestRef(columns);
+  var sortedCols = useMemo(function () {
+    var columnsMap = columnsLatestRef.current.reduce(function (prev, cur) {
+      prev[cur.dataKey] = cur;
+      return prev;
+    }, {});
+    return sortedColKeys.map(function (colKey) {
+      return columnsMap[colKey];
+    }).filter(Boolean);
+  }, [sortedColKeys, columnsLatestRef]);
   useEffect(function () {
     if (!cacheKey) return;
-    window.localStorage.setItem(cacheKey, JSON.stringify(sortedCols));
-  }, [cacheKey, sortedCols]); // 用于维护列操作时排序临时状态（（未确认保存时））
+    window.localStorage.setItem(cacheKey, JSON.stringify(sortedColKeys));
+  }, [cacheKey, sortedColKeys]); // 用于维护列操作时排序临时状态（（未确认保存时））
 
-  var _useState2 = useState(sortedCols),
-      cacheSortedCols = _useState2[0],
-      setCacheSortedCols = _useState2[1];
+  var _useState = useState(sortedCols),
+      _cacheSortedCols = _useState[0],
+      setCacheSortedCols = _useState[1]; // 保证排序的 column，是有效的可展示的列
 
-  useUpdateEffect(function () {
-    // 当column发生改变的时候，同步 setting 的 sortedCols 设置
-    setSortCols(columns);
-  }, [columns]);
+
+  var cacheSortedCols = useMemo(function () {
+    return _cacheSortedCols.filter(function (col) {
+      return col && typeof col.dataKey === 'string' && col.dataKey !== '';
+    });
+  }, [_cacheSortedCols]);
   return {
     sortedCols: sortedCols,
-    setSortCols: setSortCols,
+    setSortColKeys: setSortColKeys,
     cacheSortedCols: cacheSortedCols,
     setCacheSortedCols: setCacheSortedCols
   };
 };
 
 export { useColSorter };
-//# sourceMappingURL=use-col-sorter.js.map

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

@@ -2,7 +2,7 @@
  * @hi-ui/table
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -117,4 +117,3 @@ var useColWidth = function useColWidth(_ref) {
 };
 
 export { useColWidth };
-//# sourceMappingURL=use-col-width.js.map

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

@@ -2,7 +2,7 @@
  * @hi-ui/table
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -36,6 +36,12 @@ var useColumns = function useColumns(_ref) {
         align: (_a = raw.align) !== null && _a !== void 0 ? _a : 'left',
         render: raw.render
       });
+    }); // 记录下标位置，方便冻结列操作计算时快速获取更新
+    // 记录下标位置，方便冻结列操作计算时快速获取更新
+
+    flattedColumns.forEach(function (column, index) {
+      // @ts-ignore
+      column.index = index;
     });
     return [flattedColumns, maxDepth];
   }, [columns]),
@@ -90,4 +96,3 @@ var useColumns = function useColumns(_ref) {
 };
 
 export { useColumns };
-//# sourceMappingURL=use-colgroup.js.map

package/lib/esm/hooks/use-drag.js

@@ -2,7 +2,7 @@
  * @hi-ui/table
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -17,20 +17,20 @@ var useTableDrag = function useTableDrag(_ref) {
       setCacheData = _ref.setCacheData,
       draggable = _ref.draggable,
       onDropEnd = _ref.onDropEnd,
-      onDropProp = _ref.onDrop;
+      onDropProp = _ref.onDrop,
+      fieldKey = _ref.fieldKey;
   var dragRowRef = React.useRef(null);
   var onDropEndLatest = useLatestCallback(onDropEnd);
   var onDrop = useCallback(function (evt, sourceId, targetId, dragDirection) {
-    // console.log(sourceId, targetId, dragDirection)
     if (!draggable) return;
     if (targetId === sourceId) return; // TODO： 根据 id 查询数据原始数据或者直接使用引用值，两者选择，避免bug
     // const { rowData, dropRowData, level } = dragRowRef.current
 
     var sourceNode = findNodeById(cacheData, sourceId, {
-      idFieldName: 'key'
+      idFieldName: fieldKey
     });
     var targetNode = findNodeById(cacheData, targetId, {
-      idFieldName: 'key'
+      idFieldName: fieldKey
     });
 
     if (!sourceNode || !targetNode) {
@@ -40,10 +40,10 @@ var useTableDrag = function useTableDrag(_ref) {
 
     var nextTreeData = cloneTree(cacheData);
     deleteNodeById(nextTreeData, sourceId, {
-      idFieldName: 'key'
+      idFieldName: fieldKey
     });
     insertNodeById(nextTreeData, targetId, sourceNode, dragDirection === 'top' ? 0 : 1, {
-      idFieldName: 'key'
+      idFieldName: fieldKey
     });
     var resultMaybePromise = isFunction(onDropProp) ? // TODO: 支持 tree 拖拽层级，第四个参数
     onDropProp(evt, {
@@ -88,4 +88,3 @@ var useTableDrag = function useTableDrag(_ref) {
 };
 
 export { useTableDrag };
-//# sourceMappingURL=use-drag.js.map

package/lib/esm/hooks/use-embed-expand.js

@@ -2,7 +2,7 @@
  * @hi-ui/table
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -157,4 +157,3 @@ var useEmbedExpand = function useEmbedExpand(_ref) {
 };
 
 export { useEmbedExpand };
-//# sourceMappingURL=use-embed-expand.js.map

package/lib/esm/hooks/use-expand.js

@@ -2,7 +2,7 @@
  * @hi-ui/table
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -77,7 +77,6 @@ var useExpand = function useExpand(flattedData, defaultExpandedIds, expandedIdsP
     trySetTransitionData(flattedData, expandedIds);
   }, [flattedData, trySetTransitionData, expandedIds]);
   var onNodeToggleStart = useCallback(function (expandedNode, shouldExpanded) {
-    console.error('onNodeToggleStart---------------', expandedNode, shouldExpanded);
     if (isExpandingRef.current) return;
     var expanded = expandedIdsRef.current.indexOf(expandedNode.id) !== -1;
 
@@ -125,8 +124,7 @@ var useExpand = function useExpand(flattedData, defaultExpandedIds, expandedIdsP
     }
 
     tryToggleExpandedIds(Array.from(expandedNodeIdSet), expandedNode, shouldExpanded);
-  }, [tryToggleExpandedIds, flattedData, trySetTransitionData, dequeue, expandedIdsRef, transitionDataRef]); // console.log('transitionData', transitionData, flattedData)
-
+  }, [tryToggleExpandedIds, flattedData, trySetTransitionData, dequeue, expandedIdsRef, transitionDataRef]);
   var onNodeToggleStartLatest = useLatestCallback(onNodeToggleStart);
   var onNodeExpand = useCallback(function (expandedNode, shouldExpanded) {
     enqueue([expandedNode, shouldExpanded]);
@@ -169,4 +167,3 @@ function flattenTreeDataWithExpand(flattedTreeData, expandedIds) {
 }
 
 export { useExpand, useExpandProps };
-//# sourceMappingURL=use-expand.js.map

package/lib/esm/hooks/use-pagination.js

@@ -2,7 +2,7 @@
  * @hi-ui/table
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -43,4 +43,3 @@ var useTablePagination = function useTablePagination(_ref) {
 };
 
 export { useTablePagination };
-//# sourceMappingURL=use-pagination.js.map

package/lib/esm/hooks/use-queue.js

@@ -2,7 +2,7 @@
  * @hi-ui/table
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -46,4 +46,3 @@ var useQueue = function useQueue(initialValue) {
 };
 
 export { useQueue };
-//# sourceMappingURL=use-queue.js.map

package/lib/esm/icons/index.js

@@ -2,7 +2,7 @@
  * @hi-ui/table
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -30,4 +30,3 @@ var defaultLeafIcon = /*#__PURE__*/React.createElement("span", {
 });
 var defaultLoadingIcon = /*#__PURE__*/React.createElement(Spinner, null);
 export { defaultCollapseIcon, defaultExpandIcon, defaultLeafIcon, defaultLoadingIcon };
-//# sourceMappingURL=index.js.map

package/lib/esm/index.js

@@ -2,11 +2,10 @@
  * @hi-ui/table
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 import './styles/index.scss.js';
 export { SELECTION_DATA_KEY, Table, Table as default } from './Table.js';
-//# sourceMappingURL=index.js.map

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

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

package/lib/esm/use-table.js

@@ -2,7 +2,7 @@
  * @hi-ui/table
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -51,6 +51,8 @@ var useTable = function useTable(_a) {
       showColHighlight = _a$showColHighlight === void 0 ? false : _a$showColHighlight,
       _a$showRowHighlight = _a.showRowHighlight,
       showRowHighlight = _a$showRowHighlight === void 0 ? true : _a$showRowHighlight,
+      _a$highlightRowOnDoub = _a.highlightRowOnDoubleClick,
+      highlightRowOnDoubleClick = _a$highlightRowOnDoub === void 0 ? true : _a$highlightRowOnDoub,
       _a$defaultExpandedRow = _a.defaultExpandedRowKeys,
       defaultExpandedRowKeys = _a$defaultExpandedRow === void 0 ? DEFAULT_EXPAND_ROW_KEYS : _a$defaultExpandedRow,
       expandRowKeysProp = _a.expandedRowKeys,
@@ -71,7 +73,7 @@ var useTable = function useTable(_a) {
       cellRender = _a.cellRender,
       _a$fieldKey = _a.fieldKey,
       fieldKey = _a$fieldKey === void 0 ? 'key' : _a$fieldKey,
-      rootProps = __rest(_a, ["data", "columns", "defaultFixedToColumn", "fixedToColumn", "onFixedToColumn", "scrollWidth", "resizable", "errorRowKeys", "highlightedColKeys", "highlightedRowKeys", "showColHighlight", "showRowHighlight", "defaultExpandedRowKeys", "expandedRowKeys", "onExpand", "defaultExpandAll", "onLoadChildren", "maxHeight", "sticky", "stickyTop", "draggable", "onDragStart", "onDrop", "onDropEnd", "showColMenu", "rowSelection", "cellRender", "fieldKey"]);
+      rootProps = __rest(_a, ["data", "columns", "defaultFixedToColumn", "fixedToColumn", "onFixedToColumn", "scrollWidth", "resizable", "errorRowKeys", "highlightedColKeys", "highlightedRowKeys", "showColHighlight", "showRowHighlight", "highlightRowOnDoubleClick", "defaultExpandedRowKeys", "expandedRowKeys", "onExpand", "defaultExpandAll", "onLoadChildren", "maxHeight", "sticky", "stickyTop", "draggable", "onDragStart", "onDrop", "onDropEnd", "showColMenu", "rowSelection", "cellRender", "fieldKey"]);
   /**
    * 获取 key 字段值
    */
@@ -120,7 +122,8 @@ var useTable = function useTable(_a) {
     draggable: draggable,
     flattedData: flattedData,
     onDropEnd: onDropEnd,
-    onDrop: onDropProp
+    onDrop: onDropProp,
+    fieldKey: fieldKey
   }),
       onDrop = _useTableDrag.onDrop,
       dragRowRef = _useTableDrag.dragRowRef; // ************************ colgroup ************************ //
@@ -160,10 +163,9 @@ var useTable = function useTable(_a) {
       setHoveredColKey = _useState[1];
 
   var _useSelect = useSelect({
-    disabled: !showRowHighlight,
+    disabled: !showColHighlight,
     selectedId: hoveredColKey,
-    onSelect: setHoveredColKey,
-    idFieldName: 'dataKey'
+    onSelect: setHoveredColKey
   }),
       onHoveredColChange = _useSelect[0],
       isHoveredHighlightCol = _useSelect[1]; // ************************ 列宽 resizable ************************ //
@@ -249,9 +251,9 @@ var useTable = function useTable(_a) {
         return index <= leftFrozenColIndex && item.depth === 0;
       });
       leftColumns.forEach(function (currentItem, index) {
-        var item = parseFixedColumns(currentItem, index, leftColumns, 'leftStickyWidth');
+        var item = parseFixedColumns(currentItem, index, nextColumns, leftColumns, 'leftStickyWidth');
         leftColumns[index] = item;
-        nextColumns[index] = item;
+        nextColumns[item.index] = item;
       });
     } // @TODO: resizable 和 列冻结宽兼容，统一宽度设置来源
     // const leftFixedColumnsWidth = colWidths.reduce(
@@ -295,9 +297,9 @@ var useTable = function useTable(_a) {
         return index > rightFrozenColIndex && item.depth === 0;
       })).reverse();
       rightColumns.forEach(function (currentItem, index) {
-        var _item = parseFixedColumns(currentItem, index, rightColumns, 'rightStickyWidth');
-
-        rightColumns[index] = _item;
+        var item = parseFixedColumns(currentItem, index, nextColumns, rightColumns, 'rightStickyWidth');
+        rightColumns[index] = item;
+        nextColumns[item.index] = item;
       });
     }
 
@@ -399,9 +401,9 @@ var useTable = function useTable(_a) {
       trySetHighlightedRowKeys = _useUncontrolledState3[1];
 
   var _useCheck2 = useCheck({
+    disabled: !highlightRowOnDoubleClick,
     checkedIds: highlightedRowKeys,
-    onCheck: trySetHighlightedRowKeys,
-    idFieldName: 'key'
+    onCheck: trySetHighlightedRowKeys
   }),
       onHighlightedRowChange = _useCheck2[0],
       isHighlightedRow = _useCheck2[1];
@@ -430,14 +432,20 @@ var useTable = function useTable(_a) {
         leftStickyWidth = column.leftStickyWidth,
         align = column.align;
     var sticky = canScroll && (typeof rightStickyWidth !== 'undefined' || typeof leftStickyWidth !== 'undefined');
-    return {
-      style: {
-        position: sticky ? 'sticky' : undefined,
-        textAlign: align,
-        right: rightStickyWidth + 'px',
-        left: leftStickyWidth + 'px' // backgroundColor: '#fff',
+    var style = {
+      textAlign: align
+    };
 
-      },
+    if (sticky) {
+      style.position = 'sticky';
+      style.right = rightStickyWidth + 'px';
+      style.left = leftStickyWidth + 'px'; // the value is same with v3
+
+      style.zIndex = 5;
+    }
+
+    return {
+      style: style,
       'data-sticky': setAttrStatus(sticky)
     };
   });
@@ -447,7 +455,7 @@ var useTable = function useTable(_a) {
       top: sticky ? stickyTop : undefined,
       boxShadow: maxHeight ? '0px 2px 6px 0px rgba(0,0,0,0.12)' : undefined,
       overflow: 'hidden',
-      zIndex: 10
+      zIndex: sticky ? 10 : undefined
     };
     return {
       style: style,
@@ -533,6 +541,8 @@ var useTable = function useTable(_a) {
     isHighlightedRow: isHighlightedRow,
     highlightedRowKeys: highlightedRowKeys,
     trySetHighlightedRowKeys: trySetHighlightedRowKeys,
+    // 行 hover
+    showRowHighlight: showRowHighlight,
     // 列高亮
     onHighlightedColChange: onHighlightedColChange,
     isHighlightedCol: isHighlightedCol,
@@ -564,4 +574,3 @@ var useTable = function useTable(_a) {
 };
 
 export { useTable };
-//# sourceMappingURL=use-table.js.map