@kdcloudjs/table 1.0.0 → 1.0.3

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

@@ -26,8 +26,6 @@ var _utils = require("../../utils");
 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';
@@ -72,95 +70,101 @@ function multiSelect() {
         allKeys.push(rowKey);
       }
     });
-    var set = new _set.default(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 set = new _set.default(value); // todo: 暂使用hidden隐藏选择列 后续增加配置
 
-    var defaultCheckboxColumnTitle = /*#__PURE__*/_react.default.createElement(Checkbox, {
-      checked: isAllChecked,
-      indeterminate: !isAllChecked && isAnyChecked,
-      onChange: function onChange(_) {
-        if (isAllChecked) {
-          _onChange(_others.arrayUtils.diff(value, allKeys), '', allKeys, 'uncheck-all');
-        } else {
-          _onChange(_others.arrayUtils.merge(value, allKeys), '', allKeys, 'check-all');
+    if (opts.checkboxColumn && opts.checkboxColumn.hidden !== true) {
+      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.default.createElement(Checkbox, {
+        checked: isAllChecked,
+        indeterminate: !isAllChecked && isAnyChecked,
+        onChange: function onChange(_) {
+          if (isAllChecked) {
+            _onChange(_others.arrayUtils.diff(value, allKeys), '', allKeys, 'uncheck-all');
+          } else {
+            _onChange(_others.arrayUtils.merge(value, allKeys), '', allKeys, 'check-all');
+          }
         }
-      }
-    });
+      });
 
-    var checkboxColumn = (0, _extends2.default)((0, _extends2.default)({
-      name: '是否选中',
-      title: defaultCheckboxColumnTitle,
-      width: 50,
-      align: 'center'
-    }, opts.checkboxColumn), {
-      getCellProps: function getCellProps(value, row, rowIndex) {
-        var _a, _b;
-
-        var rowKey = _internals.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 checkboxColumn = (0, _extends2.default)((0, _extends2.default)({
+        name: '是否选中',
+        title: defaultCheckboxColumnTitle,
+        width: 50,
+        align: 'center'
+      }, opts.checkboxColumn), {
+        getCellProps: function getCellProps(value, row, rowIndex) {
+          var _a, _b;
+
+          var rowKey = _internals.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);
               }
+            };
+          }
 
-              onCheckboxChange(prevChecked, rowKey, e.shiftKey);
-            }
-          };
-        }
+          return (0, _utils.mergeCellProps)(preCellProps, checkboxCellProps);
+        },
+        render: function render(_, row, rowIndex) {
+          var key = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
 
-        return (0, _utils.mergeCellProps)(preCellProps, checkboxCellProps);
-      },
-      render: function render(_, row, rowIndex) {
-        var key = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
+          var checked = set.has(key);
+          return /*#__PURE__*/_react.default.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 checked = set.has(key);
-        return /*#__PURE__*/_react.default.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;
 
-            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();
+                }
 
-            if (nativeEvent) {
-              if (opts.stopClickEventPropagation) {
-                nativeEvent.stopPropagation();
+                onCheckboxChange(checked, key, nativeEvent.shiftKey);
               }
+            } : undefined
+          });
+        }
+      });
+      var nextColumns = (0, _slice.default)(_context = pipeline.getColumns()).call(_context);
+      var checkboxPlacement = (_l = opts.checkboxPlacement) !== null && _l !== void 0 ? _l : 'start';
 
-              onCheckboxChange(checked, key, nativeEvent.shiftKey);
-            }
-          } : undefined
-        });
+      if (checkboxPlacement === 'start') {
+        nextColumns.unshift(checkboxColumn);
+      } else {
+        nextColumns.push(checkboxColumn);
       }
-    });
-    var nextColumns = (0, _slice.default)(_context = pipeline.getColumns()).call(_context);
-    var checkboxPlacement = (_l = opts.checkboxPlacement) !== null && _l !== void 0 ? _l : 'start';
 
-    if (checkboxPlacement === 'start') {
-      nextColumns.unshift(checkboxColumn);
-    } else {
-      nextColumns.push(checkboxColumn);
+      pipeline.columns(nextColumns);
     }
 
-    pipeline.columns(nextColumns);
     pipeline.appendRowPropsGetter(function (row, rowIndex) {
       var rowKey = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
 

package/lib/table/pipeline/features/rangeSelection.d.ts

@@ -0,0 +1,10 @@
+import { TablePipeline } from '../pipeline';
+export interface RangeSelectionFeatureOptions {
+    /** 范围选中回调函数 */
+    rangeSelectedChange?(params: any): void;
+    /** 是否阻止keydown的默认行为 */
+    preventkDefaultOfKeyDownEvent?: boolean;
+}
+export declare const rangeSelectionKey = "rangeSelection";
+export declare const lastClickCell = "lastClickCell";
+export declare function rangeSelection(opts: RangeSelectionFeatureOptions): (pipeline: TablePipeline) => TablePipeline;

package/lib/table/pipeline/features/rangeSelection.js

@@ -0,0 +1,256 @@
+"use strict";
+
+var _mapInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/map");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lastClickCell = void 0;
+exports.rangeSelection = rangeSelection;
+exports.rangeSelectionKey = void 0;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/typeof"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+
+var _findIndex = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/find-index"));
+
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
+var _utils = require("../../utils");
+
+var _others = require("../../utils/others");
+
+var _rxjs = require("rxjs");
+
+var _operators = require("rxjs/operators");
+
+var _styles = require("../../base/styles");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var rangeSelectionKey = 'rangeSelection';
+exports.rangeSelectionKey = rangeSelectionKey;
+var lastClickCell = 'lastClickCell';
+exports.lastClickCell = lastClickCell;
+
+function rangeSelection(opts) {
+  return function step(pipeline) {
+    var SCROLL_SIZE = 30;
+    var tableBody = pipeline.ref.current.domHelper && pipeline.ref.current.domHelper.tableBody;
+
+    if (!tableBody) {
+      return pipeline;
+    }
+
+    var columns = pipeline.getColumns();
+
+    var rangeSelectedChange = function rangeSelectedChange(rangeSelection) {
+      var _a;
+
+      pipeline.setStateAtKey(rangeSelectionKey, rangeSelection);
+      (_a = opts === null || opts === void 0 ? void 0 : opts.rangeSelectedChange) === null || _a === void 0 ? void 0 : _a.call(opts, rangeSelection);
+    }; // if (!pipeline.getFeatureOptions(rangeSelectionKey)) {
+    //   pipeline.setFeatureOptions(rangeSelectionKey, {
+    //     optionKey: rangeSelectionKey,
+    //     rangeSelectedChange: rangeSelectedChange
+    //   })
+    // }
+
+
+    var setRangeSelection = function setRangeSelection(startDragCell, draggingCell) {
+      if (!startDragCell || !draggingCell || isSameCell(startDragCell, draggingCell)) return;
+      var rangeColumns = getRangeColumns(startDragCell, draggingCell, columns);
+      var isTopToBottom = startDragCell.rowIndex <= draggingCell.rowIndex;
+      var rangeSelection = {
+        startRow: isTopToBottom ? startDragCell.rowIndex : startDragCell.rowIndex + startDragCell.rowSpan - 1,
+        endRow: isTopToBottom ? draggingCell.rowIndex + draggingCell.rowSpan - 1 : draggingCell.rowIndex,
+        columns: rangeColumns,
+        startColumn: startDragCell.column
+      };
+      rangeSelectedChange(rangeSelection);
+    };
+
+    var shiftKeySelect = function shiftKeySelect(event) {
+      var target = event.target;
+      var clickCell = getTargetCell(target, columns);
+
+      if (clickCell) {
+        if (event.shiftKey) {
+          var _lastClickCell = pipeline.getStateAtKey(lastClickCell);
+
+          if (_lastClickCell) {
+            setRangeSelection(_lastClickCell, clickCell);
+          } else {
+            // 第一次进来就按住shift键，这时候要记住点击的单元格
+            pipeline.setStateAtKey(lastClickCell, clickCell);
+          }
+        } else {
+          pipeline.setStateAtKey(lastClickCell, clickCell);
+          rangeSelectedChange(null);
+        }
+      }
+    };
+
+    var onMouseDown = function onMouseDown(mouseDownEvent) {
+      if (mouseDownEvent.button !== 0 || !(0, _utils.isElementInEventPath)(tableBody, mouseDownEvent.nativeEvent)) return; // mouseDownEvent.preventDefault()
+      // shift + 点击选中
+
+      shiftKeySelect(mouseDownEvent);
+      var target = mouseDownEvent.target;
+      var startDragCell = getTargetCell(target, columns);
+      var mousemove$ = (0, _rxjs.fromEvent)(window, 'mousemove');
+      var mouseup$ = (0, _rxjs.fromEvent)(window, 'mouseup');
+      var tableBodyClientRect = tableBody.getBoundingClientRect();
+
+      var updateScrollPosition = function updateScrollPosition(client) {
+        var clientX = client.clientX,
+            clientY = client.clientY;
+        var left = tableBodyClientRect.left,
+            top = tableBodyClientRect.top,
+            height = tableBodyClientRect.height,
+            width = tableBodyClientRect.width;
+
+        if (clientX + SCROLL_SIZE >= left + width) {
+          pipeline.ref.current.domHelper.virtual.scrollLeft += SCROLL_SIZE;
+        }
+
+        if (clientX - SCROLL_SIZE <= left) {
+          pipeline.ref.current.domHelper.virtual.scrollLeft -= SCROLL_SIZE;
+        }
+
+        if (clientY + SCROLL_SIZE >= top + height) {
+          pipeline.ref.current.domHelper.tableBody.scrollTop += SCROLL_SIZE;
+        }
+
+        if (clientY + SCROLL_SIZE <= top) {
+          pipeline.ref.current.domHelper.tableBody.scrollTop -= SCROLL_SIZE;
+        }
+      };
+
+      var rangeSelected$ = mousemove$.pipe((0, _mapInstanceProperty(_operators))(function (mouseMoveEvent) {
+        var target = mouseMoveEvent.target || mouseMoveEvent.srcElement;
+        var draggingCell = getTargetCell(target, columns);
+        var client = {
+          clientX: mouseMoveEvent.clientX,
+          clientY: mouseMoveEvent.clientY
+        };
+        updateScrollPosition(client);
+        return {
+          startDragCell: startDragCell,
+          draggingCell: draggingCell
+        };
+      }), (0, _operators.takeUntil)(mouseup$));
+      rangeSelected$.subscribe(function (_ref) {
+        var startDragCell = _ref.startDragCell,
+            draggingCell = _ref.draggingCell;
+        setRangeSelection(startDragCell, draggingCell);
+      });
+    };
+
+    var onKeyDown = function onKeyDown(e) {
+      if ((e.ctrlKey || e.metaKey) && e.key === 'a') {
+        var rowLen = pipeline.getDataSource().length;
+
+        if (columns.length && rowLen) {
+          opts.preventkDefaultOfKeyDownEvent !== false && e.preventDefault();
+          rangeSelectedChange({
+            startRow: 0,
+            endRow: rowLen - 1,
+            columns: columns,
+            startColumn: columns[0]
+          });
+        }
+      }
+    };
+
+    pipeline.addTableProps({
+      onMouseDown: onMouseDown,
+      onKeyDown: onKeyDown,
+      tabIndex: -1
+    }); // todo: 后面可以把mousedown放到一个流里面
+
+    return pipeline.mapColumns((0, _utils.makeRecursiveMapper)(function (col) {
+      var _context;
+
+      var rangeSelection = pipeline.getStateAtKey(rangeSelectionKey);
+      if (!rangeSelection || (0, _findIndex.default)(_context = rangeSelection.columns).call(_context, function (selectedCol) {
+        return selectedCol.code === col.code;
+      }) === -1) return col;
+      var prevGetCellProps = col.getCellProps;
+      return (0, _extends2.default)((0, _extends2.default)({}, col), {
+        getCellProps: function getCellProps(value, record, rowIndex) {
+          var _cx;
+
+          var prevCellProps = prevGetCellProps === null || prevGetCellProps === void 0 ? void 0 : prevGetCellProps(value, record, rowIndex);
+          var startRow = rangeSelection.startRow,
+              endRow = rangeSelection.endRow,
+              columns = rangeSelection.columns;
+          var startIndex = startRow < endRow ? startRow : endRow;
+          var endIndex = startRow < endRow ? endRow : startRow;
+          var startCol = columns[0];
+          var endCol = columns[columns.length - 1];
+          var match = rowIndex >= startIndex && rowIndex <= endIndex;
+          var className = (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeSelected, match), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeTop, rowIndex === startIndex), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeLeft, col.code === startCol.code && match), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeBottom, rowIndex === endIndex), (0, _defineProperty2.default)(_cx, _styles.Classes.tableCellRangeRight, col.code === endCol.code && match), _cx));
+          return (0, _utils.mergeCellProps)(prevCellProps, {
+            className: className
+          });
+        }
+      });
+    }));
+  };
+}
+
+function getTargetCell(target, columns) {
+  while (target) {
+    if (target.getAttribute('data-role') === 'table-cell') {
+      var _ret = function () {
+        var columnCode = target.getAttribute('data-code');
+        var column = (0, _others.findByTree)(columns, function (item, index) {
+          return item.code === columnCode;
+        });
+        if (!column) return {
+          v: null
+        };
+        return {
+          v: {
+            rowIndex: parseInt(target.getAttribute('data-rowindex')),
+            rowSpan: parseInt(target.getAttribute('rowspan') || 1),
+            code: columnCode,
+            column: column
+          }
+        };
+      }();
+
+      if ((0, _typeof2.default)(_ret) === "object") return _ret.v;
+    }
+
+    target = target.parentElement;
+  }
+
+  return null;
+}
+
+function isSameCell(cell1, cell2) {
+  return cell1.rowIndex === cell2.rowIndex && cell1.code === cell2.code;
+}
+
+function getRangeColumns(startCell, endCell, columns) {
+  var flatColumns = (0, _utils.collectNodes)(columns, 'leaf-only');
+  var startIndex = (0, _findIndex.default)(flatColumns).call(flatColumns, function (col) {
+    return col.code === startCell.code;
+  });
+  var endIndex = (0, _findIndex.default)(flatColumns).call(flatColumns, function (col) {
+    return col.code === endCell.code;
+  });
+
+  if (startIndex < endIndex) {
+    return (0, _slice.default)(flatColumns).call(flatColumns, startIndex, endIndex + 1);
+  } else {
+    return (0, _slice.default)(flatColumns).call(flatColumns, endIndex, startIndex + 1);
+  }
+}

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

@@ -45,6 +45,10 @@ var _others = require("../../utils/others");
 
 var _console = _interopRequireDefault(require("../../utils/console"));
 
+var _renderTemplates = _interopRequireDefault(require("../../base/renderTemplates"));
+
+var _base = require("../../base");
+
 var rowDetailSymbol = (0, _symbol.default)('row-detail');
 
 var fallbackRenderDetail = function fallbackRenderDetail() {
@@ -67,23 +71,18 @@ function rowDetail() {
     var _a, _b, _c, _d, _e, _f, _g, _h;
 
     var stateKey = 'rowDetail';
-    var primaryKey = pipeline.ensurePrimaryKey('rowDetail');
-
-    if (typeof primaryKey !== 'string') {
-      throw new Error('rowDetail 仅支持字符串作为 primaryKey');
-    }
-
     var rowDetailMetaKey = (_a = opts.rowDetailMetaKey) !== null && _a !== void 0 ? _a : rowDetailSymbol;
+    var primaryKey = pipeline.ensurePrimaryKey('rowDetail');
     var indents = pipeline.ctx.indents;
     var textOffset = indents.iconIndent + indents.iconWidth + indents.iconGap;
     var clickArea = (_b = opts.clickArea) !== null && _b !== void 0 ? _b : 'cell';
-    var getDetailKey = (_c = opts.getDetailKey) !== null && _c !== void 0 ? _c : function (row) {
-      return row[primaryKey] + '_detail';
+    var getDetailKey = (_c = opts.getDetailKey) !== null && _c !== void 0 ? _c : function (row, rowIndex) {
+      return _internals.internals.safeGetRowKey(primaryKey, row, rowIndex) + '_detail';
     };
     var renderDetail = (_d = opts.renderDetail) !== null && _d !== void 0 ? _d : fallbackRenderDetail;
     var hasDetail = (_e = opts.hasDetail) !== null && _e !== void 0 ? _e : (0, _others.always)(true);
-    var openKeys = (_h = (_g = (_f = opts.openKeys) !== null && _f !== void 0 ? _f : pipeline.getStateAtKey(stateKey)) !== null && _g !== void 0 ? _g : opts.defaultOpenAll ? (0, _map.default)(_context = (0, _filter.default)(_context2 = pipeline.getDataSource()).call(_context2, hasDetail)).call(_context, function (row) {
-      return row[primaryKey];
+    var openKeys = (_h = (_g = (_f = opts.openKeys) !== null && _f !== void 0 ? _f : pipeline.getStateAtKey(stateKey)) !== null && _g !== void 0 ? _g : opts.defaultOpenAll ? (0, _map.default)(_context = (0, _filter.default)(_context2 = pipeline.getDataSource()).call(_context2, hasDetail)).call(_context, function (row, rowIndex) {
+      return _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
     }) : opts.defaultOpenKeys) !== null && _h !== void 0 ? _h : [];
 
     var onChangeOpenKeys = function onChangeOpenKeys(nextKeys, key, action) {
@@ -112,16 +111,18 @@ function rowDetail() {
       }
     };
 
+    var detailPrimaryKey = typeof primaryKey === 'string' ? primaryKey : rowDetailMetaKey.toString() + 'PrimaryKey';
     return pipeline.dataSource((0, _flatMapInstanceProperty(_others))(pipeline.getDataSource(), function (row, rowIndex) {
-      if (openKeySet.has(row[primaryKey])) {
-        return [row, (0, _extends4.default)((0, _extends4.default)((0, _defineProperty2.default)({}, rowDetailMetaKey, true), row), (0, _defineProperty2.default)({}, primaryKey, getDetailKey(row, rowIndex)))];
+      if (openKeySet.has(_internals.internals.safeGetRowKey(primaryKey, row, rowIndex))) {
+        return [row, (0, _extends4.default)((0, _extends4.default)((0, _defineProperty2.default)({}, rowDetailMetaKey, true), row), (0, _defineProperty2.default)({}, detailPrimaryKey, getDetailKey(row, rowIndex)))];
       } else {
         return [row];
       }
     })).columns(processColumns(pipeline.getColumns())).appendRowPropsGetter(function (row) {
       if (row[rowDetailMetaKey]) {
         return {
-          className: 'no-hover'
+          className: 'no-hover',
+          'data-row-detail-key': row[detailPrimaryKey]
         };
       }
     });
@@ -150,6 +151,19 @@ function rowDetail() {
 
       var render = function render(value, row, rowIndex) {
         if (row[rowDetailMetaKey]) {
+          // 第一列内容已经渲染
+          if (expandColumnIndex !== 0) return;
+          var renderRowDetail = (0, _renderTemplates.default)('rowDetail');
+
+          if (typeof renderRowDetail === 'function') {
+            return renderRowDetail({
+              row: row,
+              rowIndex: rowIndex,
+              domHelper: pipeline.ref.current.domHelper,
+              renderDetail: renderDetail
+            });
+          }
+
           return renderDetail(row, rowIndex);
         }
 
@@ -163,7 +177,8 @@ function rowDetail() {
           }, content);
         }
 
-        var rowKey = row[primaryKey];
+        var rowKey = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
+
         var expanded = openKeySet.has(rowKey);
 
         var onClick = function onClick(e) {
@@ -174,7 +189,7 @@ function rowDetail() {
           toggle(rowKey);
         };
 
-        var expandCls = expanded ? 'expanded' : 'collapsed';
+        var expandCls = expanded ? _base.Classes.expanded : _base.Classes.collapsed;
         var ExpandIcon = opts.expandIcon;
         return /*#__PURE__*/_react.default.createElement(_commonViews.ExpansionCell, {
           className: (0, _classnames.default)('expansion-cell', expandCls),
@@ -220,7 +235,7 @@ function rowDetail() {
               e.stopPropagation();
             }
 
-            toggle(row[primaryKey]);
+            toggle(_internals.internals.safeGetRowKey(primaryKey, row, rowIndex));
           },
           style: {
             cursor: 'pointer'
@@ -234,6 +249,17 @@ function rowDetail() {
 
       var firstColRender = function firstColRender(value, row, rowIndex) {
         if (row[rowDetailMetaKey]) {
+          var renderRowDetail = (0, _renderTemplates.default)('rowDetail');
+
+          if (typeof renderRowDetail === 'function') {
+            return renderRowDetail({
+              row: row,
+              rowIndex: rowIndex,
+              domHelper: pipeline.ref.current.domHelper,
+              renderDetail: renderDetail
+            });
+          }
+
           return renderDetail(row, rowIndex);
         }
 

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

@@ -41,6 +41,8 @@ var _utils = require("../../utils");
 
 var _others = require("../../utils/others");
 
+var _base = require("../../base");
+
 var groupingMetaSymbol = (0, _symbol.default)('row-grouping-meta');
 
 function attachGroupingMeta(row) {
@@ -149,7 +151,7 @@ function rowGrouping() {
         }
 
         var expanded = openKeySet.has(row[primaryKey]);
-        var expandCls = expanded ? 'expanded' : 'collapsed';
+        var expandCls = expanded ? _base.Classes.expanded : _base.Classes.collapsed;
         return /*#__PURE__*/_react.default.createElement(_commonViews.ExpansionCell, {
           className: (0, _classnames.default)('expansion-cell', expandCls)
         }, /*#__PURE__*/_react.default.createElement(_commonViews.icons.CaretRight, {

package/lib/table/pipeline/features/singleSelect.js

@@ -53,11 +53,12 @@ function singleSelect() {
       getCellProps: function getCellProps(value, row, rowIndex) {
         var _a, _b;
 
+        var preCellProps = (_b = (_a = opts.radioColumn) === null || _a === void 0 ? void 0 : _a.getCellProps) === null || _b === void 0 ? void 0 : _b.call(_a, value, row, rowIndex);
+
         if (clickArea === 'cell') {
           var rowKey = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);
 
           var disabled = isDisabled(row, rowIndex);
-          var preCellProps = (_b = (_a = opts.radioColumn) === null || _a === void 0 ? void 0 : _a.getCellProps) === null || _b === void 0 ? void 0 : _b.call(_a, value, row, rowIndex);
           return (0, _utils.mergeCellProps)(preCellProps, {
             style: {
               cursor: disabled ? 'not-allowed' : 'pointer'
@@ -71,6 +72,8 @@ function singleSelect() {
             }
           });
         }
+
+        return preCellProps;
       },
       render: function render(_, row, rowIndex) {
         var rowKey = _internals.internals.safeGetRowKey(primaryKey, row, rowIndex);

package/lib/table/pipeline/features/sort.js

@@ -8,8 +8,6 @@ var _Symbol = require("@babel/runtime-corejs3/core-js-stable/symbol");
 
 var _getIteratorMethod = require("@babel/runtime-corejs3/core-js/get-iterator-method");
 
-var _getIterator = require("@babel/runtime-corejs3/core-js/get-iterator");
-
 var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
@@ -49,7 +47,7 @@ var _styles = require("../../base/styles");
 
 var _templateObject;
 
-function _createForOfIteratorHelper(o, allowArrayLike) { var it; if (typeof _Symbol === "undefined" || _getIteratorMethod(o) == null) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = _getIterator(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof _Symbol !== "undefined" && _getIteratorMethod(o) || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
 
 function _unsupportedIterableToArray(o, minLen) { var _context4; if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = _sliceInstanceProperty2(_context4 = Object.prototype.toString.call(o)).call(_context4, 8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return _Array$from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
@@ -127,7 +125,7 @@ function hasAnySortableColumns(cols) {
   });
 }
 
-var TableHeaderCell = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n"])));
+var TableHeaderCell = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  // flex: auto;\n"])));
 
 var stateKey = 'sort';