@kdcloudjs/table 1.0.2 → 1.1.0

package/es/table/pipeline/features/multiSelect.js

@@ -9,8 +9,6 @@ import { mergeCellProps } from '../../utils';
 export function multiSelect() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return function multiSelectStep(pipeline) {
-    var _context;
-
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
 
     var stateKey = 'multiSelect';
@@ -54,94 +52,102 @@ export function multiSelect() {
         allKeys.push(rowKey);
       }
     });
-    var set = new _Set(value);
-    var isAllChecked = allKeys.length > 0 && allKeys.every(function (key) {
-      return set.has(key);
-    });
-    var isAnyChecked = allKeys.some(function (key) {
-      return set.has(key);
-    });
-    var defaultCheckboxColumnTitle = /*#__PURE__*/React.createElement(Checkbox, {
-      checked: isAllChecked,
-      indeterminate: !isAllChecked && isAnyChecked,
-      onChange: function onChange(_) {
-        if (isAllChecked) {
-          _onChange(arrayUtils.diff(value, allKeys), '', allKeys, 'uncheck-all');
-        } else {
-          _onChange(arrayUtils.merge(value, allKeys), '', allKeys, 'check-all');
-        }
-      }
-    });
+    var set = new _Set(value); // todo: 暂使用hidden隐藏选择列 后续增加配置
 
-    var checkboxColumn = _extends(_extends({
-      name: '是否选中',
-      title: defaultCheckboxColumnTitle,
-      width: 50,
-      align: 'center'
-    }, opts.checkboxColumn), {
-      getCellProps: function getCellProps(value, row, rowIndex) {
-        var _a, _b;
-
-        var rowKey = internals.safeGetRowKey(primaryKey, row, rowIndex);
-        var checkboxCellProps = {};
-        var preCellProps = (_b = (_a = opts.checkboxColumn) === null || _a === void 0 ? void 0 : _a.getCellProps) === null || _b === void 0 ? void 0 : _b.call(_a, value, row, rowIndex);
-
-        if (fullKeySet.has(rowKey) && clickArea === 'cell') {
-          var prevChecked = set.has(rowKey);
-          var disabled = isDisabled(row, rowIndex);
-          checkboxCellProps = {
-            style: {
-              cursor: disabled ? 'not-allowed' : 'pointer'
-            },
-            onClick: disabled ? undefined : function (e) {
-              if (opts.stopClickEventPropagation) {
-                e.stopPropagation();
-              }
+    var hiddenSelectColumn = opts.checkboxColumn && opts.checkboxColumn.hidden === true;
 
-              onCheckboxChange(prevChecked, rowKey, e.shiftKey);
-            }
-          };
+    if (!hiddenSelectColumn) {
+      var _context;
+
+      var isAllChecked = allKeys.length > 0 && allKeys.every(function (key) {
+        return set.has(key);
+      });
+      var isAnyChecked = allKeys.some(function (key) {
+        return set.has(key);
+      });
+      var defaultCheckboxColumnTitle = /*#__PURE__*/React.createElement(Checkbox, {
+        checked: isAllChecked,
+        indeterminate: !isAllChecked && isAnyChecked,
+        onChange: function onChange(_) {
+          if (isAllChecked) {
+            _onChange(arrayUtils.diff(value, allKeys), '', allKeys, 'uncheck-all');
+          } else {
+            _onChange(arrayUtils.merge(value, allKeys), '', allKeys, 'check-all');
+          }
         }
+      });
 
-        return mergeCellProps(preCellProps, checkboxCellProps);
-      },
-      render: function render(_, row, rowIndex) {
-        var key = internals.safeGetRowKey(primaryKey, row, rowIndex);
-        var checked = set.has(key);
-        return /*#__PURE__*/React.createElement(Checkbox, {
-          checked: checked,
-          disabled: isDisabled(row, rowIndex),
-          onChange: clickArea === 'checkbox' ? function (arg1, arg2) {
-            var _a; // 这里要同时兼容 antd 和 fusion 的用法
-            // fusion: arg2?.nativeEvent
-            // antd: arg1.nativeEvent
-
-
-            var nativeEvent = (_a = arg2 === null || arg2 === void 0 ? void 0 : arg2.nativeEvent) !== null && _a !== void 0 ? _a : arg1.nativeEvent;
-
-            if (nativeEvent) {
-              if (opts.stopClickEventPropagation) {
-                nativeEvent.stopPropagation();
+      var checkboxColumn = _extends(_extends({
+        name: '是否选中',
+        title: defaultCheckboxColumnTitle,
+        width: 50,
+        align: 'center'
+      }, opts.checkboxColumn), {
+        getCellProps: function getCellProps(value, row, rowIndex) {
+          var _a, _b;
+
+          var rowKey = internals.safeGetRowKey(primaryKey, row, rowIndex);
+          var checkboxCellProps = {};
+          var preCellProps = (_b = (_a = opts.checkboxColumn) === null || _a === void 0 ? void 0 : _a.getCellProps) === null || _b === void 0 ? void 0 : _b.call(_a, value, row, rowIndex);
+
+          if (fullKeySet.has(rowKey) && clickArea === 'cell') {
+            var prevChecked = set.has(rowKey);
+            var disabled = isDisabled(row, rowIndex);
+            checkboxCellProps = {
+              style: {
+                cursor: disabled ? 'not-allowed' : 'pointer'
+              },
+              onClick: disabled ? undefined : function (e) {
+                if (opts.stopClickEventPropagation) {
+                  e.stopPropagation();
+                }
+
+                onCheckboxChange(prevChecked, rowKey, e.shiftKey);
+              }
+            };
+          }
+
+          return mergeCellProps(preCellProps, checkboxCellProps);
+        },
+        render: function render(_, row, rowIndex) {
+          var key = internals.safeGetRowKey(primaryKey, row, rowIndex);
+          var checked = set.has(key);
+          return /*#__PURE__*/React.createElement(Checkbox, {
+            checked: checked,
+            disabled: isDisabled(row, rowIndex),
+            onChange: clickArea === 'checkbox' ? function (arg1, arg2) {
+              var _a; // 这里要同时兼容 antd 和 fusion 的用法
+              // fusion: arg2?.nativeEvent
+              // antd: arg1.nativeEvent
+
+
+              var nativeEvent = (_a = arg2 === null || arg2 === void 0 ? void 0 : arg2.nativeEvent) !== null && _a !== void 0 ? _a : arg1.nativeEvent;
+
+              if (nativeEvent) {
+                if (opts.stopClickEventPropagation) {
+                  nativeEvent.stopPropagation();
+                }
+
+                onCheckboxChange(checked, key, nativeEvent.shiftKey);
               }
+            } : undefined
+          });
+        }
+      });
 
-              onCheckboxChange(checked, key, nativeEvent.shiftKey);
-            }
-          } : undefined
-        });
-      }
-    });
+      var nextColumns = _sliceInstanceProperty(_context = pipeline.getColumns()).call(_context);
 
-    var nextColumns = _sliceInstanceProperty(_context = pipeline.getColumns()).call(_context);
+      var checkboxPlacement = (_l = opts.checkboxPlacement) !== null && _l !== void 0 ? _l : 'start';
 
-    var checkboxPlacement = (_l = opts.checkboxPlacement) !== null && _l !== void 0 ? _l : 'start';
+      if (checkboxPlacement === 'start') {
+        nextColumns.unshift(checkboxColumn);
+      } else {
+        nextColumns.push(checkboxColumn);
+      }
 
-    if (checkboxPlacement === 'start') {
-      nextColumns.unshift(checkboxColumn);
-    } else {
-      nextColumns.push(checkboxColumn);
+      pipeline.columns(nextColumns);
     }
 
-    pipeline.columns(nextColumns);
     pipeline.appendRowPropsGetter(function (row, rowIndex) {
       var rowKey = internals.safeGetRowKey(primaryKey, row, rowIndex);
 

package/es/table/pipeline/features/rowDetail.js

@@ -17,6 +17,7 @@ import { collectNodes, mergeCellProps } from '../../utils';
 import { always, flatMap } from '../../utils/others';
 import console from '../../utils/console';
 import getTableRenderTemplate from '../../base/renderTemplates';
+import { Classes } from '../../base';
 
 var rowDetailSymbol = _Symbol('row-detail');
 
@@ -157,7 +158,7 @@ export function rowDetail() {
           toggle(rowKey);
         };
 
-        var expandCls = expanded ? 'expanded' : 'collapsed';
+        var expandCls = expanded ? Classes.expanded : Classes.collapsed;
         var ExpandIcon = opts.expandIcon;
         return /*#__PURE__*/React.createElement(ExpansionCell, {
           className: cx('expansion-cell', expandCls),

package/es/table/pipeline/features/rowGrouping.js

@@ -14,6 +14,7 @@ import { ExpansionCell, icons, InlineFlexCell } from '../../common-views';
 import { internals } from '../../internals';
 import { collectNodes, isLeafNode, mergeCellProps } from '../../utils';
 import { flatMap } from '../../utils/others';
+import { Classes } from '../../base';
 
 var groupingMetaSymbol = _Symbol('row-grouping-meta');
 
@@ -122,7 +123,7 @@ export function rowGrouping() {
         }
 
         var expanded = openKeySet.has(row[primaryKey]);
-        var expandCls = expanded ? 'expanded' : 'collapsed';
+        var expandCls = expanded ? Classes.expanded : Classes.collapsed;
         return /*#__PURE__*/React.createElement(ExpansionCell, {
           className: cx('expansion-cell', expandCls)
         }, /*#__PURE__*/React.createElement(icons.CaretRight, {

package/es/table/pipeline/features/treeMode.js

@@ -21,6 +21,7 @@ import React from 'react';
 import { ExpansionCell, icons, InlineFlexCell } from '../../common-views';
 import { internals } from '../../internals';
 import { isLeafNode as standardIsLeafNode, mergeCellProps } from '../../utils';
+import { Classes } from '../../base/styles';
 export var treeMetaSymbol = _Symbol('treeMetaSymbol');
 export function treeMode() {
   var opts = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -146,7 +147,7 @@ export function treeMode() {
 
         if (isLeaf) {
           return /*#__PURE__*/React.createElement(InlineFlexCell, {
-            className: "expansion-cell leaf"
+            className: cx('expansion-cell', Classes.leaf)
           }, /*#__PURE__*/React.createElement("span", {
             style: {
               marginLeft: indent + iconWidth + iconGap
@@ -162,7 +163,7 @@ export function treeMode() {
           toggle(rowKey);
         };
 
-        var expandCls = expanded ? 'expanded' : 'collapsed';
+        var expandCls = expanded ? Classes.expanded : Classes.collapsed;
         return /*#__PURE__*/React.createElement(ExpansionCell, {
           className: cx('expansion-cell', expandCls),
           style: {

package/es/table/pipeline/pipeline.d.ts

@@ -36,6 +36,7 @@ export declare class TablePipeline {
     private _tableProps;
     private _dataSource;
     private _columns;
+    private _footerDataSource;
     static defaultIndents: TablePipelineIndentsConfig;
     readonly ctx: TablePipelineCtx;
     private readonly state;
@@ -51,6 +52,7 @@ export declare class TablePipeline {
     addTableProps(props: React.HTMLAttributes<HTMLTableElement>): void;
     getDataSource(name?: string): any[];
     getColumns(name?: string): any[];
+    getFooterDataSource(): any[];
     getStateAtKey<T = any>(stateKey: string, defaultValue?: T): T;
     /** 将 stateKey 对应的状态设置为 partialState  */
     setStateAtKey(stateKey: string, partialState: any, extraInfo?: any): void;
@@ -67,6 +69,8 @@ export declare class TablePipeline {
     columns(cols: ArtColumn[]): this;
     /** 设置主键 */
     primaryKey(key: PrimaryKey): this;
+    /** 设置页脚数据 */
+    footerDataSource(rows: any[]): this;
     /** 保存快照 */
     snapshot(name: string): this;
     /** @deprecated

package/es/table/pipeline/pipeline.js

@@ -85,6 +85,11 @@ export var TablePipeline = /*#__PURE__*/function () {
         return this._snapshots[name].columns;
       }
     }
+  }, {
+    key: "getFooterDataSource",
+    value: function getFooterDataSource() {
+      return this._footerDataSource;
+    }
   }, {
     key: "getStateAtKey",
     value: function getStateAtKey(stateKey, defaultValue) {
@@ -157,6 +162,14 @@ export var TablePipeline = /*#__PURE__*/function () {
       this.ctx.primaryKey = key;
       return this;
     }
+    /** 设置页脚数据 */
+
+  }, {
+    key: "footerDataSource",
+    value: function footerDataSource(rows) {
+      this._footerDataSource = rows;
+      return this;
+    }
     /** 保存快照 */
 
   }, {
@@ -237,6 +250,10 @@ export var TablePipeline = /*#__PURE__*/function () {
         result.primaryKey = this.ctx.primaryKey;
       }
 
+      if (this._footerDataSource) {
+        result.footerDataSource = this._footerDataSource;
+      }
+
       if (this._rowPropsGetters.length > 0) {
         result.getRowProps = function (row, rowIndex) {
           return _this2._rowPropsGetters.reduce(function (res, get) {

package/es/table/pivot/pivot-utils/convert-utils.js

@@ -20,10 +20,12 @@ import _filterInstanceProperty from "@babel/runtime-corejs3/core-js-stable/insta
 import React from 'react';
 import { noop } from 'rxjs';
 import styled from 'styled-components';
+import cx from 'classnames';
 import { icons } from '../../common-views';
 import { isLeafNode } from '../../utils';
 import simpleEncode from './simpleEncode';
-var ExpandSpan = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px 2px 0;\n  cursor: pointer;\n\n  .icon {\n    fill: #999;\n    margin-right: 4px;\n\n    &.expanded {\n      transform-origin: center center;\n      transform: rotate(90deg);\n    }\n  }\n"])));
+import { Classes } from '../../base/styles';
+var ExpandSpan = styled.span(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: inline-flex;\n  align-items: center;\n  padding: 2px 8px 2px 0;\n  cursor: pointer;\n\n  .icon {\n    fill: #999;\n    margin-right: 4px;\n\n    &.", " {\n      transform-origin: center center;\n      transform: rotate(90deg);\n    }\n  }\n"])), Classes.expanded);
 export function convertDrillTreeToCrossTree(drillTree) {
   var _ref = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
       indicators = _ref.indicators,
@@ -115,7 +117,7 @@ export function convertDrillTreeToCrossTree(drillTree) {
                 }), node, 'collapse');
               }
             }, /*#__PURE__*/React.createElement(icons.CaretRight, {
-              className: "icon expanded"
+              className: cx('icon', Classes.expanded)
             }), node.value);
             crossTreeNode.children = dfs(node.children, depth + 1);
           } else {

package/lib/table/base/calculations.js

@@ -218,7 +218,7 @@ function getHorizontalRenderRange(_ref) {
   return {
     leftIndex: leftIndex,
     leftBlank: leftBlank,
-    rightIndex: leftIndex + centerCount + flat.right.length,
+    rightIndex: leftIndex + centerCount,
     rightBlank: rightBlank
   };
 } // 一顿计算，将表格本次渲染所需要的数据都给算出来（代码写得有点乱，有较大优化空间）

package/lib/table/base/empty.js

@@ -47,10 +47,10 @@ function EmptyHtmlTable(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_colgroup.Colgroup, {
     descriptors: descriptors
   }), /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", {
-    className: (0, _classnames.default)(_styles.Classes.tableRow, 'first', 'last', 'no-hover'),
+    className: (0, _classnames.default)(_styles.Classes.tableRow, _styles.Classes.first, _styles.Classes.last, 'no-hover'),
     "data-rowindex": 0
   }, /*#__PURE__*/_react.default.createElement("td", {
-    className: (0, _classnames.default)(_styles.Classes.tableCell, 'first', 'last'),
+    className: (0, _classnames.default)(_styles.Classes.tableCell, _styles.Classes.first, _styles.Classes.last),
     colSpan: descriptors.length,
     style: {
       height: emptyCellHeight !== null && emptyCellHeight !== void 0 ? emptyCellHeight : 200

package/lib/table/base/header.js

@@ -15,6 +15,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = TableHeader;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/toConsumableArray"));
@@ -258,6 +260,8 @@ function TableHeader(_ref2) {
   var leftFlatCount = flat.left.length;
   var rightFlatCount = flat.right.length;
   var thead = (0, _map.default)(_context4 = headerRenderInfo.leveled).call(_context4, function (wrappedCols, level) {
+    var _cx2;
+
     var _wrappedCols = (0, _concat.default)(wrappedCols).call(wrappedCols); // 左中右区域渲染，分组列可能单独位于一个区域，此时其他区域也需要适配分组的高度
     // rowspan 需要空白的列头去占位, 需要补充额外的空白列头
 
@@ -275,6 +279,8 @@ function TableHeader(_ref2) {
       var _a, _b, _c;
 
       if (wrapped.type === 'normal') {
+        var _cx;
+
         var colIndex = wrapped.colIndex,
             colSpan = wrapped.colSpan,
             isLeaf = wrapped.isLeaf,
@@ -295,13 +301,7 @@ function TableHeader(_ref2) {
         var cell = /*#__PURE__*/_react.default.createElement("th", (0, _extends2.default)({
           key: colIndex
         }, headerCellProps, {
-          className: (0, _classnames.default)(_styles.Classes.tableHeaderCell, headerCellProps.className, {
-            first: colIndex === 0,
-            last: colIndex + colSpan === fullFlatCount,
-            'lock-left': colIndex < leftFlatCount || theaderPosition === 'left',
-            'lock-right': colIndex >= fullFlatCount - rightFlatCount || theaderPosition === 'right',
-            leaf: wrapped.isLeaf
-          }),
+          className: (0, _classnames.default)(_styles.Classes.tableHeaderCell, headerCellProps.className, (_cx = {}, (0, _defineProperty2.default)(_cx, _styles.Classes.first, colIndex === 0), (0, _defineProperty2.default)(_cx, _styles.Classes.last, colIndex + colSpan === fullFlatCount), (0, _defineProperty2.default)(_cx, _styles.Classes.lockLeft, colIndex < leftFlatCount || theaderPosition === 'left'), (0, _defineProperty2.default)(_cx, _styles.Classes.lockRight, colIndex >= fullFlatCount - rightFlatCount || theaderPosition === 'right'), (0, _defineProperty2.default)(_cx, _styles.Classes.leaf, wrapped.isLeaf), _cx)),
           colSpan: colSpan,
           rowSpan: isLeaf ? rowCount - level : undefined,
           style: (0, _extends2.default)((0, _extends2.default)({
@@ -332,10 +332,7 @@ function TableHeader(_ref2) {
     });
     return /*#__PURE__*/_react.default.createElement("tr", {
       key: level,
-      className: (0, _classnames.default)(_styles.Classes.tableHeaderRow, {
-        first: level === 0,
-        last: level === rowCount - 1
-      })
+      className: (0, _classnames.default)(_styles.Classes.tableHeaderRow, (_cx2 = {}, (0, _defineProperty2.default)(_cx2, _styles.Classes.first, level === 0), (0, _defineProperty2.default)(_cx2, _styles.Classes.last, level === rowCount - 1), _cx2))
     }, headerCells);
   });
   var colgroup = (0, _map.default)(_context5 = (0, _flat.default)(headerRenderInfo)).call(_context5, function (wrapped) {

package/lib/table/base/html-table.js

@@ -9,6 +9,8 @@ exports.HtmlTable = HtmlTable;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
 var _flat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/flat"));
 
 var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
@@ -49,17 +51,12 @@ function HtmlTable(_ref) {
   }), /*#__PURE__*/_react.default.createElement(tbodyHtmlTag, null, (0, _map.default)(data).call(data, renderRow)));
 
   function renderRow(record, i) {
-    var _context;
+    var _cx, _context;
 
     var rowIndex = verInfo.offset + i;
     spanManager.stripUpwards(rowIndex);
     var rowProps = getRowProps(record, rowIndex);
-    var rowClass = (0, _classnames.default)(_styles.Classes.tableRow, {
-      first: rowIndex === verInfo.first,
-      last: rowIndex === verInfo.last,
-      even: rowIndex % 2 === 0,
-      odd: rowIndex % 2 === 1
-    }, rowProps === null || rowProps === void 0 ? void 0 : rowProps.className);
+    var rowClass = (0, _classnames.default)(_styles.Classes.tableRow, (_cx = {}, (0, _defineProperty2.default)(_cx, _styles.Classes.first, rowIndex === verInfo.first), (0, _defineProperty2.default)(_cx, _styles.Classes.last, rowIndex === verInfo.last), (0, _defineProperty2.default)(_cx, _styles.Classes.even, rowIndex % 2 === 0), (0, _defineProperty2.default)(_cx, _styles.Classes.odd, rowIndex % 2 === 1), _cx), rowProps === null || rowProps === void 0 ? void 0 : rowProps.className);
     var visibleColumnDescriptor = (0, _concat.default)(_context = hozInfo.visible).call(_context); // 左中右区域渲染，存在融合单元格时需要适配rowspan属性
     // 如果固定的列均存在融合单元格，需空白一列做占位,否则融合的单元格不会渲染，导致显示异常
     // 这里无法区分是否存在融合列，默认左右固定区域均添加占位空白列
@@ -93,6 +90,8 @@ function HtmlTable(_ref) {
   }
 
   function renderBodyCell(record, rowIndex, column, colIndex) {
+    var _cx2;
+
     var _a, _b, _c;
 
     if (spanManager.testSkip(rowIndex, colIndex)) {
@@ -123,20 +122,20 @@ function HtmlTable(_ref) {
       if (cellProps.rowSpan != null) {
         rowSpan = cellProps.rowSpan;
       }
+    }
+
+    var hasSpan = colSpan > 1 || rowSpan > 1;
+
+    if (hasSpan) {
+      spanManager.add(rowIndex, colIndex, colSpan, rowSpan);
     } // rowSpan/colSpan 不能过大，避免 rowSpan/colSpan 影响因虚拟滚动而未渲染的单元格
 
 
     rowSpan = Math.min(rowSpan, verInfo.limit - rowIndex);
-    colSpan = Math.min(colSpan, leftFlatCount + hoz.rightIndex + rightFlatCount - colIndex); // todo: 右侧有列固定的情况下colSpan计算不对，这里先限制一下
+    colSpan = Math.min(colSpan, hozInfo.visible.length - colIndex); // todo: 右侧有列固定的情况下colSpan计算不对，这里先限制一下
 
     rowSpan = Math.max(rowSpan, 1);
     colSpan = Math.max(colSpan, 1);
-    var hasSpan = colSpan > 1 || rowSpan > 1;
-
-    if (hasSpan) {
-      spanManager.add(rowIndex, colIndex, colSpan, rowSpan);
-    }
-
     var positionStyle = {};
     var scrollbarWidth = hasScrollY ? (0, _utils.getScrollbarSize)().width : 0;
 
@@ -151,14 +150,7 @@ function HtmlTable(_ref) {
     return /*#__PURE__*/_react.default.createElement('td', (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({
       key: colIndex
     }, cellProps), {
-      className: (0, _classnames.default)(_styles.Classes.tableCell, cellProps.className, {
-        // class
-        first: colIndex === 0,
-        last: colIndex + colSpan === fullFlatCount,
-        'lock-left': colIndex < leftFlatCount || tbodyPosition === 'left',
-        'lock-right': colIndex >= fullFlatCount - rightFlatCount,
-        'row-span': rowSpan > 1
-      })
+      className: (0, _classnames.default)(_styles.Classes.tableCell, cellProps.className, (_cx2 = {}, (0, _defineProperty2.default)(_cx2, _styles.Classes.first, colIndex === 0), (0, _defineProperty2.default)(_cx2, _styles.Classes.last, colIndex + colSpan === fullFlatCount), (0, _defineProperty2.default)(_cx2, _styles.Classes.lockLeft, colIndex < leftFlatCount || tbodyPosition === 'left'), (0, _defineProperty2.default)(_cx2, _styles.Classes.lockRight, colIndex >= fullFlatCount - rightFlatCount), (0, _defineProperty2.default)(_cx2, _styles.Classes.rowSpan, rowSpan > 1), _cx2))
     }), hasSpan ? {
       colSpan: colSpan,
       rowSpan: rowSpan

package/lib/table/base/styles.d.ts

@@ -50,6 +50,16 @@ export declare const Classes: {
     readonly rowDetailContainer: string;
     readonly rowDetailItem: string;
     readonly emptyColCell: string;
+    readonly first: string;
+    readonly last: string;
+    readonly even: string;
+    readonly odd: string;
+    readonly lockLeft: string;
+    readonly lockRight: string;
+    readonly rowSpan: string;
+    readonly leaf: string;
+    readonly expanded: string;
+    readonly collapsed: string;
 };
 export declare const MenuClasses: {
     menu: string;

package/lib/table/base/styles.js

@@ -85,7 +85,17 @@ var Classes = {
   fixedRight: "".concat(prefix, "fixed-right"),
   rowDetailContainer: "".concat(prefix, "row-detail-container"),
   rowDetailItem: "".concat(prefix, "row-detail-item"),
-  emptyColCell: "".concat(prefix, "empty-col-cell")
+  emptyColCell: "".concat(prefix, "empty-col-cell"),
+  first: "".concat(prefix, "first"),
+  last: "".concat(prefix, "last"),
+  even: "".concat(prefix, "even"),
+  odd: "".concat(prefix, "odd"),
+  lockLeft: "".concat(prefix, "lock-left"),
+  lockRight: "".concat(prefix, "lock-right"),
+  rowSpan: "".concat(prefix, "row-span"),
+  leaf: "".concat(prefix, "leaf"),
+  expanded: "".concat(prefix, "expanded"),
+  collapsed: "".concat(prefix, "collapsed")
 };
 exports.Classes = Classes;
 var MenuClasses = {
@@ -106,7 +116,7 @@ var Z = {
   scrollItem: 30,
   loadingIndicator: 40
 };
-var outerBorderStyleMixin = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-top: 1px solid #cccccc;\n  border-right: 1px solid #cccccc;\n  border-bottom: 1px solid #cccccc;\n  border-left: 1px solid #cccccc;\n\n  td.first,\n  th.first {\n    border-left: none;\n  }\n  td.last,\n  th.last {\n    --border-right: none;\n  }\n\n  thead tr.first th,\n  tbody tr.first td {\n    border-top: none;\n  }\n  &.has-footer tfoot tr.last td {\n    border-bottom: none;\n  }\n  &:not(.has-footer) tbody tr.last td {\n    border-bottom: none;\n  }\n  td.row-span:not(.first){\n    border-left: var(---cell-border-vertical);\n  }\n  td.row-span:not(.last){\n    border-right: var(---cell-border-vertical);\n  }\n"])));
+var outerBorderStyleMixin = (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  border-top: 1px solid #cccccc;\n  border-right: 1px solid #cccccc;\n  border-bottom: 1px solid #cccccc;\n  border-left: 1px solid #cccccc;\n\n  td.", ",\n  th.", " {\n    border-left: none;\n  }\n  td.", ",\n  th.", " {\n    --border-right: none;\n  }\n\n  thead tr.", " th,\n  tbody tr.", " td {\n    border-top: none;\n  }\n  &.has-footer tfoot tr.", " td {\n    border-bottom: none;\n  }\n  &:not(.has-footer) tbody tr.", " td {\n    border-bottom: none;\n  }\n  td.", ":not(.", "){\n    border-left: var(---cell-border-vertical);\n  }\n  td.", ":not(.", "){\n    border-right: var(---cell-border-vertical);\n  }\n"])), Classes.first, Classes.first, Classes.last, Classes.last, Classes.first, Classes.first, Classes.last, Classes.last, Classes.rowSpan, Classes.first, Classes.rowSpan, Classes.last);
 var defaultCSSVariables = {
   '--row-height': '48px',
   '--color': '#333',
@@ -139,7 +149,7 @@ exports.defaultCSSVariables = defaultCSSVariables;
 var variableConst = getCssVariableText(defaultCSSVariables);
 exports.variableConst = variableConst;
 
-var StyledArtTableWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  :root {\n    ", "\n  }\n  ", "\n\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n  cursor: default;\n  color: var(--color);\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  position: relative;\n\n  // \u8868\u683C\u5916\u8FB9\u6846\u7531 art-table-wrapper \u63D0\u4F9B\uFF0C\u800C\u4E0D\u662F\u7531\u5355\u5143\u683C\u63D0\u4F9B\n  &.use-outer-border {\n    ", ";\n  }\n\n  .no-scrollbar {\n    ::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .", " {\n    overflow: auto;\n    flex-shrink: 1;\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    user-select:none;\n  }\n\n  .", " {\n    overflow: hidden;\n    background: var(--header-bgcolor);\n    display: flex;\n    flex-shrink: 0;\n    border-bottom: var(--header-cell-border-horizontal);\n  }\n\n  .", " {\n    display: flex;\n    // justify-content: flex-start;\n    align-items: center;\n    height: inherit;\n  }\n\n  .", " {\n     overflow-x:auto;\n     flex-shrink: 0;\n     flex-grow: 0;\n     scrollbar-width: none; // \u517C\u5BB9\u706B\u72D0\n     & {\n       ::-webkit-scrollbar {\n         display:none;\n       }\n     }\n   }\n\n  .", " {\n    display: flex;\n    flex: none;\n  }\n  .", ", .", " {\n    background: var(--bgcolor);\n    overflow: auto;\n    overflow-x: hidden;\n    overflow-anchor: none;\n    position:relative;\n    &.empty {\n      position: relative;\n    }\n  }\n\n  .", " {\n    position: relative;\n  }\n  .", " {\n    .", "{\n      background-color: #e6effb !important;\n    }\n    .", "{\n      border-top: 1px solid #0E5FD8 !important;\n    }\n    .", "{\n      border-left: 1px solid #0E5FD8 !important;\n    }\n    .", "{\n      border-bottom: 1px solid #0E5FD8 !important;\n    }\n    .", "{\n      border-right: 1px solid #0E5FD8 !important;\n    }\n  }\n  \n\n  &.sticky-header .", " {\n    position: sticky;\n    top: 0;\n    z-index: ", ";\n  }\n\n  &.sticky-footer .", " {\n    position: sticky;\n    bottom: 0;\n    z-index: ", ";\n  }\n\n  table {\n    width: 0;\n    table-layout: fixed;\n    border-collapse: separate;\n    border-spacing: 0;\n    display: table;\n    margin: 0;\n    padding: 0;\n    flex-shrink: 0;\n    flex-grow: 0;\n    position:relative;\n  }\n\n  // \u5728 tr \u4E0A\u8BBE\u7F6E .no-hover \u53EF\u4EE5\u7981\u7528\u9F20\u6807\u60AC\u505C\u6548\u679C\n  tr:not(.no-hover):hover > td {\n    background: var(--hover-bgcolor);\n  }\n  // \u5728 tr \u8BBE\u7F6E highlight \u53EF\u4EE5\u4E3A\u5E95\u4E0B\u7684 td \u8BBE\u7F6E\u4E3A\u9AD8\u4EAE\u8272\n  // \u800C\u8BBE\u7F6E .no-highlight \u7684\u8BDD\u5219\u53EF\u4EE5\u7981\u7528\u9AD8\u4EAE\u6548\u679C\uFF1B\n  tr:not(.no-highlight).highlight > td {\n    background: var(--highlight-bgcolor);\n  }\n\n  th {\n    font-weight: normal;\n    text-align: left;\n    padding: var(--cell-padding);\n    height: var(--header-row-height);\n    color: var(--header-color);\n    background: var(--header-bgcolor);\n    border:1px solid transparent;\n    border-right: var(--header-cell-border-vertical);\n    border-bottom: var(--header-cell-border-horizontal);\n    position: relative;\n  }\n\n  th.resizeable{\n    border-right:none\n  }\n\n  th.leaf {\n    border-right: none;\n    border-bottom: none;\n  }\n\n  tr.first th {\n    border-top: var(--header-cell-border-horizontal);\n  }\n  th.first {\n    border-left: var(--header-cell-border-vertical);\n  }\n\n  td {\n    padding: var(--cell-padding);\n    background: var(--bgcolor);\n    height: var(--row-height);\n    border:1px solid transparent;\n    border-right: var(--cell-border-vertical);\n    border-bottom: var(--cell-border-horizontal);\n    word-break: break-all;\n  }\n  td.first {\n    border-left: var(--cell-border-vertical);\n  }\n  tr.first td {\n    border-top: var(--cell-border-horizontal);\n  }\n  &.has-header tbody tr.first td {\n    border-top: none;\n  }\n  &.has-footer tbody tr.last td {\n    border-bottom: none;\n  }\n\n  .lock-left,\n  .lock-right {\n    z-index: ", ";\n  }\n\n  //#region \u9501\u5217\u9634\u5F71\n  .", " {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    z-index: ", ";\n    pointer-events: none;\n    overflow: hidden;\n\n    .", " {\n      height: 100%;\n    }\n\n    .", " {\n      margin-right: ", "px;\n      box-shadow: none;\n\n      &.show-shadow {\n        box-shadow: var(--lock-shadow);\n        border-right: var(--cell-border-vertical);\n      }\n    }\n\n    .", " {\n      margin-left: ", "px;\n      box-shadow: none;\n\n      &.show-shadow {\n        box-shadow: var(--lock-shadow);\n        border-left: var(--cell-border-vertical);\n      }\n    }\n  }\n  //#endregion\n\n  //#region \u7A7A\u8868\u683C\u5C55\u73B0\n  .", " {\n    pointer-events: none;\n    color: #99a3b3;\n    font-size: 12px;\n    text-align: center;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n\n    .empty-image {\n      width: 50px;\n      height: 50px;\n    }\n\n    .empty-tips {\n      margin-top: 16px;\n      line-height: 1.5;\n    }\n  }\n  //#endregion\n\n  //#region IE\u517C\u5BB9\n  &.ie-polyfill-wrapper {\n    //\u9501\u5B9A\u5217\u517C\u5BB9 \u4EC5\u5728\u9501\u5B9A\u5217\u7684\u60C5\u51B5\u4E0B\u751F\u6548\n    .", " {\n      overflow-x: hidden;\n    }\n    .", ", .", " {\n      position:relative;\n    }\n    .", " {\n      overflow: hidden;\n    }\n    .", " {\n      position: relative;\n    }\n\n    .", " {\n      overflow: auto;\n      overflow-x: hidden;\n      overflow-anchor: none;\n    }\n\n    .", ", .", "{\n      position: absolute;\n      z-index: ", ";\n      top: 0;\n    }\n    .", "{\n      left:0;\n    }\n    .", "{\n      right:0;\n    }\n\n    .", "{\n      .", "{\n        position: absolute;\n        top: 0;\n        width: 100%;\n        z-index: ", ";\n      }\n    }\n\n    tr:not(.no-hover).row-hover > td {\n      background: var(--hover-bgcolor);\n    }\n  }\n  //#endregion\n\n  //#region \u7C98\u6027\u6EDA\u52A8\u6761\n  .", " {\n    overflow-y: hidden;\n    overflow-x: auto;\n    z-index: ", ";\n    flex-shrink: 0;\n    flex-grow: 0;\n    border-top: 1px solid var(--border-color);\n    background: var(--bgcolor);\n  }\n\n  .", " {\n    // \u5FC5\u987B\u6709\u9AD8\u5EA6\u624D\u80FD\u51FA\u73B0\u6EDA\u52A8\u6761\n    height: 1px;\n    visibility: hidden;\n  }\n  //#endregion\n\n  //#region \u52A0\u8F7D\u6837\u5F0F\n  .", " {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n\n    .", " {\n      filter: none;\n      width: 100%;\n      height: 100%;\n      overflow: auto;\n      display: flex;\n      position: relative;\n      flex-direction: column;\n    }\n\n    .", " {\n      position: absolute;\n      left: 0;\n      right: 0;\n      top: 0;\n      bottom: 0;\n      pointer-events: none;\n    }\n\n    .", " {\n      position: sticky;\n      z-index: ", ";\n      transform: translateY(-50%);\n    }\n  }\n  //#endregion\n  \n  //#region \u8868\u683C\u8FC7\u6EE4\n  .", " {\n    color:var(--icon-color);\n    &.active{\n      color:var(--primary-color);\n    }\n  }\n  //#endregion\n\n  //#region \u8868\u683C\u6392\u5E8F\n  .", " {\n    color:var(--icon-color);\n    &.active{\n      color:var(--primary-color);\n    }\n  }\n  //#endregion\n\n  //#region \u6EDA\u52A8\u6761\u5360\u4F4D\n  .", " {\n    visibility: hidden;\n    flex-shrink: 0;\n  }\n  .", " .", " {\n    border-top: var(--cell-border-horizontal);\n  }\n  //#endregion\n  "])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.virtual, Classes.tableBody, Classes.tableFooter, Classes.tableHeaderMain, Classes.tableHeader, Classes.tableFooterMain, Classes.fixedLeft, Classes.fixedRight, Z.lock, Classes.fixedLeft, Classes.fixedRight, Classes.rowDetailContainer, Classes.rowDetailItem, Z.rowDetail, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.tableSortIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder);
+var StyledArtTableWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  :root {\n    ", "\n  }\n  ", "\n\n  box-sizing: border-box;\n  * {\n    box-sizing: border-box;\n  }\n  cursor: default;\n  color: var(--color);\n  font-size: var(--font-size);\n  line-height: var(--line-height);\n  position: relative;\n\n  // \u8868\u683C\u5916\u8FB9\u6846\u7531 art-table-wrapper \u63D0\u4F9B\uFF0C\u800C\u4E0D\u662F\u7531\u5355\u5143\u683C\u63D0\u4F9B\n  &.use-outer-border {\n    ", ";\n  }\n\n  .no-scrollbar {\n    ::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  .", " {\n    overflow: auto;\n    flex-shrink: 1;\n    flex-grow: 1;\n    display: flex;\n    flex-direction: column;\n    user-select:none;\n  }\n\n  .", " {\n    overflow: hidden;\n    background: var(--header-bgcolor);\n    display: flex;\n    flex-shrink: 0;\n    border-bottom: var(--header-cell-border-horizontal);\n  }\n\n  .", " {\n    display: flex;\n    // justify-content: flex-start;\n    align-items: center;\n    height: inherit;\n  }\n\n  .", " {\n     overflow-x:auto;\n     flex-shrink: 0;\n     flex-grow: 0;\n     scrollbar-width: none; // \u517C\u5BB9\u706B\u72D0\n     & {\n       ::-webkit-scrollbar {\n         display:none;\n       }\n     }\n   }\n\n  .", " {\n    display: flex;\n    flex: none;\n  }\n  .", ", .", " {\n    background: var(--bgcolor);\n    overflow: auto;\n    overflow-x: hidden;\n    overflow-anchor: none;\n    position:relative;\n    &.empty {\n      position: relative;\n    }\n  }\n\n  .", " {\n    position: relative;\n  }\n  .", " {\n    .", "{\n      background-color: #e6effb !important;\n    }\n    .", "{\n      border-top: 1px solid #0E5FD8 !important;\n    }\n    .", "{\n      border-left: 1px solid #0E5FD8 !important;\n    }\n    .", "{\n      border-bottom: 1px solid #0E5FD8 !important;\n    }\n    .", "{\n      border-right: 1px solid #0E5FD8 !important;\n    }\n  }\n  \n\n  &.sticky-header .", " {\n    position: sticky;\n    top: 0;\n    z-index: ", ";\n  }\n\n  &.sticky-footer .", " {\n    position: sticky;\n    bottom: 0;\n    z-index: ", ";\n  }\n\n  table {\n    width: 0;\n    table-layout: fixed;\n    border-collapse: separate;\n    border-spacing: 0;\n    display: table;\n    margin: 0;\n    padding: 0;\n    flex-shrink: 0;\n    flex-grow: 0;\n    position:relative;\n  }\n\n  // \u5728 tr \u4E0A\u8BBE\u7F6E .no-hover \u53EF\u4EE5\u7981\u7528\u9F20\u6807\u60AC\u505C\u6548\u679C\n  tr:not(.no-hover):hover > td {\n    background: var(--hover-bgcolor);\n  }\n  // \u5728 tr \u8BBE\u7F6E highlight \u53EF\u4EE5\u4E3A\u5E95\u4E0B\u7684 td \u8BBE\u7F6E\u4E3A\u9AD8\u4EAE\u8272\n  // \u800C\u8BBE\u7F6E .no-highlight \u7684\u8BDD\u5219\u53EF\u4EE5\u7981\u7528\u9AD8\u4EAE\u6548\u679C\uFF1B\n  tr:not(.no-highlight).highlight > td {\n    background: var(--highlight-bgcolor);\n  }\n\n  th {\n    font-weight: normal;\n    text-align: left;\n    padding: var(--cell-padding);\n    height: var(--header-row-height);\n    color: var(--header-color);\n    background: var(--header-bgcolor);\n    border:1px solid transparent;\n    border-right: var(--header-cell-border-vertical);\n    border-bottom: var(--header-cell-border-horizontal);\n    position: relative;\n  }\n\n  th.resizeable{\n    border-right:none\n  }\n\n  th.", " {\n    border-right: none;\n    border-bottom: none;\n  }\n\n  tr.", " th {\n    border-top: var(--header-cell-border-horizontal);\n  }\n  th.", " {\n    border-left: var(--header-cell-border-vertical);\n  }\n\n  td {\n    padding: var(--cell-padding);\n    background: var(--bgcolor);\n    height: var(--row-height);\n    border:1px solid transparent;\n    border-right: var(--cell-border-vertical);\n    border-bottom: var(--cell-border-horizontal);\n    word-break: break-all;\n  }\n  td.", " {\n    border-left: var(--cell-border-vertical);\n  }\n  tr.", " td {\n    border-top: var(--cell-border-horizontal);\n  }\n  &.has-header tbody tr.", " td {\n    border-top: none;\n  }\n  &.has-footer tbody tr.", " td {\n    border-bottom: none;\n  }\n\n  .", ",\n  .", " {\n    z-index: ", ";\n  }\n\n  //#region \u9501\u5217\u9634\u5F71\n  .", " {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    z-index: ", ";\n    pointer-events: none;\n    overflow: hidden;\n\n    .", " {\n      height: 100%;\n    }\n\n    .", " {\n      margin-right: ", "px;\n      box-shadow: none;\n\n      &.show-shadow {\n        box-shadow: var(--lock-shadow);\n        border-right: var(--cell-border-vertical);\n      }\n    }\n\n    .", " {\n      margin-left: ", "px;\n      box-shadow: none;\n\n      &.show-shadow {\n        box-shadow: var(--lock-shadow);\n        border-left: var(--cell-border-vertical);\n      }\n    }\n  }\n  //#endregion\n\n  //#region \u7A7A\u8868\u683C\u5C55\u73B0\n  .", " {\n    pointer-events: none;\n    color: #99a3b3;\n    font-size: 12px;\n    text-align: center;\n    position: absolute;\n    left: 50%;\n    top: 50%;\n    transform: translate(-50%, -50%);\n\n    .empty-image {\n      width: 50px;\n      height: 50px;\n    }\n\n    .empty-tips {\n      margin-top: 16px;\n      line-height: 1.5;\n    }\n  }\n  //#endregion\n\n  //#region IE\u517C\u5BB9\n  &.ie-polyfill-wrapper {\n    //\u9501\u5B9A\u5217\u517C\u5BB9 \u4EC5\u5728\u9501\u5B9A\u5217\u7684\u60C5\u51B5\u4E0B\u751F\u6548\n    .", " {\n      overflow-x: hidden;\n    }\n    .", ", .", " {\n      position:relative;\n    }\n    .", " {\n      overflow: hidden;\n    }\n    .", " {\n      position: relative;\n    }\n\n    .", " {\n      overflow: auto;\n      overflow-x: hidden;\n      overflow-anchor: none;\n    }\n\n    .", ", .", "{\n      position: absolute;\n      z-index: ", ";\n      top: 0;\n    }\n    .", "{\n      left:0;\n    }\n    .", "{\n      right:0;\n    }\n\n    .", "{\n      .", "{\n        position: absolute;\n        top: 0;\n        width: 100%;\n        z-index: ", ";\n      }\n    }\n\n    tr:not(.no-hover).row-hover > td {\n      background: var(--hover-bgcolor);\n    }\n  }\n  //#endregion\n\n  //#region \u7C98\u6027\u6EDA\u52A8\u6761\n  .", " {\n    overflow-y: hidden;\n    overflow-x: auto;\n    z-index: ", ";\n    flex-shrink: 0;\n    flex-grow: 0;\n    border-top: 1px solid var(--border-color);\n    background: var(--bgcolor);\n  }\n\n  .", " {\n    // \u5FC5\u987B\u6709\u9AD8\u5EA6\u624D\u80FD\u51FA\u73B0\u6EDA\u52A8\u6761\n    height: 1px;\n    visibility: hidden;\n  }\n  //#endregion\n\n  //#region \u52A0\u8F7D\u6837\u5F0F\n  .", " {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n\n    .", " {\n      filter: none;\n      width: 100%;\n      height: 100%;\n      overflow: auto;\n      display: flex;\n      position: relative;\n      flex-direction: column;\n    }\n\n    .", " {\n      position: absolute;\n      left: 0;\n      right: 0;\n      top: 0;\n      bottom: 0;\n      pointer-events: none;\n    }\n\n    .", " {\n      position: sticky;\n      z-index: ", ";\n      transform: translateY(-50%);\n    }\n  }\n  //#endregion\n  \n  //#region \u8868\u683C\u8FC7\u6EE4\n  .", " {\n    color:var(--icon-color);\n    &.active{\n      color:var(--primary-color);\n    }\n  }\n  //#endregion\n\n  //#region \u8868\u683C\u6392\u5E8F\n  .", " {\n    color:var(--icon-color);\n    &.active{\n      color:var(--primary-color);\n    }\n  }\n  //#endregion\n\n  //#region \u6EDA\u52A8\u6761\u5360\u4F4D\n  .", " {\n    visibility: hidden;\n    flex-shrink: 0;\n  }\n  .", " .", " {\n    border-top: var(--cell-border-horizontal);\n  }\n  //#endregion\n  "])), variableConst, variableConst, outerBorderStyleMixin, Classes.artTable, Classes.tableHeader, Classes.tableHeaderCellContent, Classes.virtual, Classes.tableFooter, Classes.tableBody, Classes.tableFooter, Classes.tableRow, Classes.tableBody, Classes.tableCellRangeSelected, Classes.tableCellRangeTop, Classes.tableCellRangeLeft, Classes.tableCellRangeBottom, Classes.tableCellRangeRight, Classes.tableHeader, Z.header, Classes.tableFooter, Z.footer, Classes.leaf, Classes.first, Classes.first, Classes.first, Classes.first, Classes.first, Classes.last, Classes.lockLeft, Classes.lockRight, Z.lock, Classes.lockShadowMask, Z.lockShadow, Classes.lockShadow, Classes.leftLockShadow, LOCK_SHADOW_PADDING, Classes.rightLockShadow, LOCK_SHADOW_PADDING, Classes.emptyWrapper, Classes.virtual, Classes.tableBody, Classes.tableFooter, Classes.tableHeaderMain, Classes.tableHeader, Classes.tableFooterMain, Classes.fixedLeft, Classes.fixedRight, Z.lock, Classes.fixedLeft, Classes.fixedRight, Classes.rowDetailContainer, Classes.rowDetailItem, Z.rowDetail, Classes.stickyScroll, Z.scrollItem, Classes.stickyScrollItem, Classes.loadingWrapper, Classes.loadingContentWrapper, Classes.loadingIndicatorWrapper, Classes.loadingIndicator, Z.loadingIndicator, Classes.tableFilterTrigger, Classes.tableSortIcon, Classes.verticalScrollPlaceholder, Classes.tableFooter, Classes.verticalScrollPlaceholder);
 
 exports.StyledArtTableWrapper = StyledArtTableWrapper;
 var ButtonCSS = (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  //#region \u6309\u94AE\n  .", "{\n    color: var(--color);\n    background:#ffffff;\n    border:1px solid var(--strong-border-color);\n    border-radius: 2px;\n    cursor: pointer;\n    &:hover{\n      color: var(--primary-color);\n      border:1px solid var(--primary-color);\n    }\n  }\n  .", " {\n    color:#ffffff;\n    background-color: var(--primary-color);\n    border:none;\n    &:hover{\n      color:#ffffff;\n      background-color: var(--primary-color-level2);\n      border:none;\n    }\n  }\n//#endregion\n"])), variableConst, Classes.button, Classes.buttonPrimary);

package/lib/table/common-views.js

@@ -22,7 +22,7 @@ var _templateObject, _templateObject2, _templateObject3;
 var InlineFlexCell = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: inline-flex;\n  align-items: center;\n"])));
 
 exports.InlineFlexCell = InlineFlexCell;
-var ExpansionCell = (0, _styledComponents.default)(InlineFlexCell)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  &.leaf {\n    cursor: default;\n  }\n\n  .expansion-icon {\n    fill: #999;\n    flex: 0 0 16px;\n    transition: transform 200ms;\n\n    &.expanded {\n      transform-origin: center center;\n      transform: rotate(90deg);\n    }\n  }\n"])));
+var ExpansionCell = (0, _styledComponents.default)(InlineFlexCell)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  &.", " {\n    cursor: default;\n  }\n\n  .expansion-icon {\n    fill: #999;\n    flex: 0 0 16px;\n    transition: transform 200ms;\n\n    &.", " {\n      transform-origin: center center;\n      transform: rotate(90deg);\n    }\n  }\n"])), _styles.Classes.leaf, _styles.Classes.expanded);
 exports.ExpansionCell = ExpansionCell;
 
 function CaretDownIcon(props) {