rsuite-table - npm Package Compare versions

Comparing version 3.0.4 to 3.0.5

CHANGELOG.md

@@ -0,1 +1,13 @@
+# 3.0.5
+
+> 2018-7-3
+
+- Feature: Support `showHeader` on `<Table>` ([#30])
+- Feature: Support `autoHeight` and `minHeight` on `<Table>` ([#29])
+- Feature: Support `cellBordered` on `<Table>` ([#28])
+
+[30]: https://github.com/rsuite/rsuite-table/pull/30
+[29]: https://github.com/rsuite/rsuite-table/pull/29
+[28]: https://github.com/rsuite/rsuite-table/pull/28
+
 # 3.0.4
@@ -5,3 +17,3 @@
 
-- Feature: Support `loadAnimaction` on `<Table>` ([#27])
+- Feature: Support `loadAnimation` on `<Table>` ([#27])
 - Bugfix: The position was updated incorrectly when the scrollbar was clicked on `<Table>` ([#26])
@@ -8,0 +20,0 @@

lib/Table.js

@@ -91,5 +91,5 @@ 'use strict';
 
-var handleClass = { add: _domLib.addClass, remove: _domLib.removeClass };
 var ReactChildren = React.Children;
 var CELL_PADDING_HEIGHT = 26;
+var columnHandledProps = ['align', 'width', 'fixed', 'resizable', 'flexGrow', 'minWidth', 'colSpan'];
 
@@ -207,3 +207,34 @@ function findRowKeys(rows, rowKey, expanded) {
     }
+
+    /**
+     * 获取表头高度
+     */
+
   }, {
+    key: 'getTableHeaderHeight',
+    value: function getTableHeaderHeight() {
+      var _props2 = this.props,
+          headerHeight = _props2.headerHeight,
+          showHeader = _props2.showHeader;
+
+      return showHeader ? headerHeight : 0;
+    }
+
+    /**
+     * 获取 Table 需要渲染的高度
+     */
+
+  }, {
+    key: 'getTableHeight',
+    value: function getTableHeight() {
+      var contentHeight = this.state.contentHeight;
+      var _props3 = this.props,
+          minHeight = _props3.minHeight,
+          height = _props3.height,
+          autoHeight = _props3.autoHeight;
+
+      var headerHeight = this.getTableHeaderHeight();
+      return autoHeight ? Math.max(headerHeight + contentHeight, minHeight) : height;
+    }
+  }, {
     key: 'getCells',
@@ -227,9 +258,11 @@ value: function getCells() {
       var tableWidth = this.state.width;
-      var _props2 = this.props,
-          sortColumn = _props2.sortColumn,
-          sortType = _props2.sortType,
-          onSortColumn = _props2.onSortColumn,
-          rowHeight = _props2.rowHeight,
-          headerHeight = _props2.headerHeight;
+      var _props4 = this.props,
+          sortColumn = _props4.sortColumn,
+          sortType = _props4.sortType,
+          onSortColumn = _props4.onSortColumn,
+          rowHeight = _props4.rowHeight,
+          showHeader = _props4.showHeader;
 
+      var headerHeight = this.getTableHeaderHeight();
+
       var _getTotalByColumns = (0, _utils.getTotalByColumns)(columns),
@@ -263,4 +296,2 @@ totalFlexGrow = _getTotalByColumns.totalFlexGrow,
 
-          var columnHandledProps = ['align', 'width', 'fixed', 'resizable', 'flexGrow', 'minWidth', 'colSpan'];
-
           var cellProps = _extends({}, (0, _pick3.default)(column.props, columnHandledProps), {
@@ -277,21 +308,24 @@ left: left,
 
-          var headerCellsProps = {
-            dataKey: columnChildren[1].props.dataKey,
-            isHeaderCell: true,
-            sortable: column.props.sortable,
-            sortColumn: sortColumn,
-            sortType: sortType,
-            onSortColumn: onSortColumn,
-            flexGrow: flexGrow
-          };
+          if (showHeader && headerHeight) {
+            var headerCellProps = {
+              dataKey: columnChildren[1].props.dataKey,
+              isHeaderCell: true,
+              sortable: column.props.sortable,
+              sortColumn: sortColumn,
+              sortType: sortType,
+              onSortColumn: onSortColumn,
+              flexGrow: flexGrow
+            };
 
-          if (resizable) {
-            (0, _merge3.default)(headerCellsProps, {
-              onColumnResizeEnd: _this3.handleColumnResizeEnd,
-              onColumnResizeStart: _this3.handleColumnResizeStart,
-              onColumnResizeMove: _this3.handleColumnResizeMove
-            });
+            if (resizable) {
+              (0, _merge3.default)(headerCellProps, {
+                onColumnResizeEnd: _this3.handleColumnResizeEnd,
+                onColumnResizeStart: _this3.handleColumnResizeStart,
+                onColumnResizeMove: _this3.handleColumnResizeMove
+              });
+            }
+
+            headerCells.push(React.cloneElement(columnChildren[0], _extends({}, cellProps, headerCellProps)));
           }
 
-          headerCells.push(React.cloneElement(columnChildren[0], _extends({}, cellProps, headerCellsProps)));
           bodyCells.push(React.cloneElement(columnChildren[1], cellProps));
@@ -332,3 +366,5 @@
       }
-      handleClass[this.scrollY < 0 ? 'add' : 'remove'](this.tableHeader, this.addPrefix('cell-group-shadow'));
+      if (this.tableHeader) {
+        (0, _utils.toggleClass)(this.tableHeader, this.addPrefix('cell-group-shadow'), this.scrollY < 0);
+      }
     }
@@ -338,4 +374,2 @@ }, {
     value: function updatePositionByFixedCell() {
-      var _this4 = this;
-
       var wheelGroupStyle = {};
@@ -356,4 +390,7 @@ var wheelStyle = {};
 
+      var shadowClassName = this.addPrefix('cell-group-shadow');
+      var condition = this.scrollX < 0;
+
       Array.from(fixedGroups).forEach(function (group) {
-        handleClass[_this4.scrollX < 0 ? 'add' : 'remove'](group, _this4.addPrefix('cell-group-shadow'));
+        (0, _utils.toggleClass)(group, shadowClassName, condition);
       });
@@ -364,3 +401,3 @@ }
     value: function calculateRowMaxHeight() {
-      var _this5 = this;
+      var _this4 = this;
 
@@ -372,3 +409,3 @@ var wordWrap = this.props.wordWrap;
         this.tableRows.forEach(function (row) {
-          var cells = row.querySelectorAll('.' + _this5.addPrefix('cell-wrap')) || [];
+          var cells = row.querySelectorAll('.' + _this4.addPrefix('cell-wrap')) || [];
           var maxHeight = 0;
@@ -388,4 +425,4 @@ Array.from(cells).forEach(function (cell) {
       var table = this.table;
-      var row = table.querySelectorAll('.' + this.addPrefix('row-header'))[0];
-      var contentWidth = (0, _domLib.getWidth)(row);
+      var row = table.querySelector('.' + this.addPrefix('row'));
+      var contentWidth = row ? (0, _domLib.getWidth)(row) : 0;
 
@@ -408,11 +445,14 @@ this.setState({ contentWidth: contentWidth });
       var table = this.table;
-      var rows = table.querySelectorAll('.' + this.addPrefix('row'));
-      var _props3 = this.props,
-          height = _props3.height,
-          headerHeight = _props3.headerHeight;
+      var rows = table.querySelectorAll('.' + this.addPrefix('row')) || [];
+      var _props5 = this.props,
+          height = _props5.height,
+          autoHeight = _props5.autoHeight,
+          rowHeight = _props5.rowHeight;
 
-      var contentHeight = 0;
-      Array.from(rows).forEach(function (row) {
-        contentHeight += (0, _domLib.getHeight)(row);
-      });
+      var headerHeight = this.getTableHeaderHeight();
+      var contentHeight = rows.length ? Array.from(rows).map(function (row) {
+        return (0, _domLib.getHeight)(row) || rowHeight;
+      }).reduce(function (x, y) {
+        return x + y;
+      }) : 0;
 
@@ -423,5 +463,8 @@ var nextContentHeight = contentHeight - headerHeight;
       });
-      // 这里 -10 是为了让滚动条不挡住内容部分
-      this.minScrollY = -(contentHeight - height) - 10;
 
+      if (!autoHeight) {
+        // 这里 -10 是为了让滚动条不挡住内容部分
+        this.minScrollY = -(contentHeight - height) - 10;
+      }
+
       /**
@@ -438,6 +481,6 @@ * 当 content height 更新后，更新纵向滚动条
     value: function shouldRenderExpandedRow(rowData) {
-      var _props4 = this.props,
-          rowKey = _props4.rowKey,
-          renderRowExpanded = _props4.renderRowExpanded,
-          isTree = _props4.isTree;
+      var _props6 = this.props,
+          rowKey = _props6.rowKey,
+          renderRowExpanded = _props6.renderRowExpanded,
+          isTree = _props6.isTree;
 
@@ -452,12 +495,12 @@ var expandedRowKeys = this.getExpandedRowKeys() || [];
     value: function renderRowData(bodyCells, rowData, props, shouldRenderExpandedRow) {
-      var _this6 = this;
+      var _this5 = this;
 
-      var _props5 = this.props,
-          onRowClick = _props5.onRowClick,
-          renderTreeToggle = _props5.renderTreeToggle,
-          rowKey = _props5.rowKey,
-          wordWrap = _props5.wordWrap;
+      var _props7 = this.props,
+          onRowClick = _props7.onRowClick,
+          renderTreeToggle = _props7.renderTreeToggle,
+          rowKey = _props7.rowKey,
+          wordWrap = _props7.wordWrap,
+          isTree = _props7.isTree;
 
-
-      var hasChildren = this.props.isTree && rowData.children && Array.isArray(rowData.children);
+      var hasChildren = isTree && rowData.children && Array.isArray(rowData.children);
       var nextRowKey = rowData[rowKey] || '_' + (Math.random() * 1e18).toString(36).slice(0, 5).toUpperCase() + '_' + props.index;
@@ -483,3 +526,3 @@
           renderTreeToggle: renderTreeToggle,
-          onTreeToggle: _this6.handleTreeToggle,
+          onTreeToggle: _this5.handleTreeToggle,
           rowKey: nextRowKey,
@@ -512,3 +555,3 @@ rowData: rowData,
             rowData.children.map(function (child, index) {
-              return _this6.renderRowData(bodyCells, child, _extends({}, props, {
+              return _this5.renderRowData(bodyCells, child, _extends({}, props, {
                 index: index
@@ -577,5 +620,5 @@ }));
     value: function renderRowExpanded(rowData) {
-      var _props6 = this.props,
-          renderRowExpanded = _props6.renderRowExpanded,
-          rowExpandedHeight = _props6.rowExpandedHeight;
+      var _props8 = this.props,
+          renderRowExpanded = _props8.renderRowExpanded,
+          rowExpandedHeight = _props8.rowExpandedHeight;
 
@@ -599,8 +642,5 @@ var styles = {
     value: function renderMouseArea() {
-      var _props7 = this.props,
-          height = _props7.height,
-          headerHeight = _props7.headerHeight;
+      var headerHeight = this.getTableHeaderHeight();
+      var styles = { height: this.getTableHeight() };
 
-      var styles = { height: height };
-
       return React.createElement(
@@ -619,6 +659,5 @@ 'div',
     value: function renderTableHeader(headerCells, rowWidth) {
-      var _props8 = this.props,
-          rowHeight = _props8.rowHeight,
-          headerHeight = _props8.headerHeight;
+      var rowHeight = this.props.rowHeight;
 
+      var headerHeight = this.getTableHeaderHeight();
       var rowProps = {
@@ -642,14 +681,15 @@ rowRef: this.bindTableHeaderRef,
     value: function renderTableBody(bodyCells, rowWidth) {
-      var _this7 = this;
+      var _this6 = this;
 
       var _props9 = this.props,
-          headerHeight = _props9.headerHeight,
           rowHeight = _props9.rowHeight,
           rowExpandedHeight = _props9.rowExpandedHeight,
-          height = _props9.height,
           data = _props9.data,
           isTree = _props9.isTree,
           setRowHeight = _props9.setRowHeight;
+
+      var headerHeight = this.getTableHeaderHeight();
       var tableRowsMaxHeight = this.state.tableRowsMaxHeight;
 
+      var height = this.getTableHeight();
       var bodyStyles = {
@@ -667,3 +707,3 @@ top: isTree ? 0 : headerHeight,
           var nextRowHeight = maxHeight ? maxHeight + CELL_PADDING_HEIGHT : rowHeight;
-          var shouldRenderExpandedRow = _this7.shouldRenderExpandedRow(rowData);
+          var shouldRenderExpandedRow = _this6.shouldRenderExpandedRow(rowData);
 
@@ -693,3 +733,3 @@ if (shouldRenderExpandedRow) {
 
-          return _this7.renderRowData(bodyCells, rowData, rowProps, shouldRenderExpandedRow);
+          return _this6.renderRowData(bodyCells, rowData, rowProps, shouldRenderExpandedRow);
         });
@@ -748,5 +788,5 @@ }
           disabledScroll = _props10.disabledScroll,
-          headerHeight = _props10.headerHeight,
-          height = _props10.height,
           loading = _props10.loading;
+
+      var headerHeight = this.getTableHeaderHeight();
       var _state = this.state,
@@ -756,2 +796,3 @@ contentWidth = _state.contentWidth,
 
+      var height = this.getTableHeight();
 
@@ -823,3 +864,2 @@ if (disabledScroll || loading) {
           width = _props12$width === undefined ? 0 : _props12$width,
-          height = _props12.height,
           style = _props12.style,
@@ -830,6 +870,8 @@ rowHeight = _props12.rowHeight,
           bordered = _props12.bordered,
+          cellBordered = _props12.cellBordered,
           wordWrap = _props12.wordWrap,
           classPrefix = _props12.classPrefix,
           loading = _props12.loading,
-          rest = _objectWithoutProperties(_props12, ['children', 'className', 'width', 'height', 'style', 'rowHeight', 'isTree', 'hover', 'bordered', 'wordWrap', 'classPrefix', 'loading']);
+          showHeader = _props12.showHeader,
+          rest = _objectWithoutProperties(_props12, ['children', 'className', 'width', 'style', 'rowHeight', 'isTree', 'hover', 'bordered', 'cellBordered', 'wordWrap', 'classPrefix', 'loading', 'showHeader']);
 
@@ -844,7 +886,7 @@ var isColumnResizing = this.state.isColumnResizing;
       var rowWidth = allColumnsWidth > width ? allColumnsWidth : width;
-      var clesses = (0, _classnames2.default)(classPrefix, className, (_classNames2 = {}, _defineProperty(_classNames2, this.addPrefix('word-wrap'), wordWrap), _defineProperty(_classNames2, this.addPrefix('treetable'), isTree), _defineProperty(_classNames2, this.addPrefix('bordered'), bordered), _defineProperty(_classNames2, this.addPrefix('column-resizing'), isColumnResizing), _defineProperty(_classNames2, this.addPrefix('hover'), hover), _defineProperty(_classNames2, this.addPrefix('loading'), loading), _classNames2));
+      var clesses = (0, _classnames2.default)(classPrefix, className, (_classNames2 = {}, _defineProperty(_classNames2, this.addPrefix('word-wrap'), wordWrap), _defineProperty(_classNames2, this.addPrefix('treetable'), isTree), _defineProperty(_classNames2, this.addPrefix('bordered'), bordered), _defineProperty(_classNames2, this.addPrefix('cell-bordered'), cellBordered), _defineProperty(_classNames2, this.addPrefix('column-resizing'), isColumnResizing), _defineProperty(_classNames2, this.addPrefix('hover'), hover), _defineProperty(_classNames2, this.addPrefix('loading'), loading), _classNames2));
 
       var styles = _extends({
         width: width || 'auto',
-        height: height
+        height: this.getTableHeight()
       }, style);
@@ -857,5 +899,5 @@
         _extends({}, unhandled, { className: clesses, style: styles, ref: this.bindTableRef }),
-        this.renderTableHeader(headerCells, rowWidth),
+        showHeader && this.renderTableHeader(headerCells, rowWidth),
         children && this.renderTableBody(bodyCells, rowWidth),
-        this.renderMouseArea()
+        showHeader && this.renderMouseArea()
       );
@@ -874,5 +916,7 @@ }
   headerHeight: 40,
+  minHeight: 0,
   rowExpandedHeight: 100,
   sortType: 'asc',
   hover: true,
+  showHeader: true,
   rowKey: 'key',
@@ -884,3 +928,3 @@ locale: {
 };
-Table.handledProps = ['bodyRef', 'bordered', 'children', 'className', 'classPrefix', 'data', 'defaultExpandAllRows', 'defaultExpandedRowKeys', 'disabledScroll', 'expandedRowKeys', 'headerHeight', 'height', 'hover', 'isTree', 'loadAnimation', 'loading', 'locale', 'onExpandChange', 'onRowClick', 'onScroll', 'onSortColumn', 'onTouchMove', 'onTouchStart', 'renderRowExpanded', 'renderTreeToggle', 'rowExpandedHeight', 'rowHeight', 'rowKey', 'setRowHeight', 'sortColumn', 'sortType', 'style', 'width', 'wordWrap'];
+Table.handledProps = ['autoHeight', 'bodyRef', 'bordered', 'cellBordered', 'children', 'className', 'classPrefix', 'data', 'defaultExpandAllRows', 'defaultExpandedRowKeys', 'disabledScroll', 'expandedRowKeys', 'headerHeight', 'height', 'hover', 'isTree', 'loadAnimation', 'loading', 'locale', 'minHeight', 'onExpandChange', 'onRowClick', 'onScroll', 'onSortColumn', 'onTouchMove', 'onTouchStart', 'renderRowExpanded', 'renderTreeToggle', 'rowExpandedHeight', 'rowHeight', 'rowKey', 'setRowHeight', 'showHeader', 'sortColumn', 'sortType', 'style', 'width', 'wordWrap'];
 Table.propTypes = {
@@ -890,6 +934,8 @@ width: _propTypes2.default.number,
   height: _propTypes2.default.number.isRequired,
+  autoHeight: _propTypes2.default.bool,
+  minHeight: _propTypes2.default.number.isRequired,
   rowHeight: _propTypes2.default.number.isRequired,
+  headerHeight: _propTypes2.default.number.isRequired,
   setRowHeight: _propTypes2.default.func,
   rowKey: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]).isRequired,
-  headerHeight: _propTypes2.default.number.isRequired,
   isTree: _propTypes2.default.bool,
@@ -915,2 +961,3 @@ defaultExpandAllRows: _propTypes2.default.bool,
   bordered: _propTypes2.default.bool,
+  cellBordered: _propTypes2.default.bool,
   wordWrap: _propTypes2.default.bool,
@@ -928,14 +975,15 @@ onRowClick: _propTypes2.default.func,
   },
-  loadAnimation: _propTypes2.default.bool
+  loadAnimation: _propTypes2.default.bool,
+  showHeader: _propTypes2.default.bool
 };
 
 var _initialiseProps = function _initialiseProps() {
-  var _this8 = this;
+  var _this7 = this;
 
   this.handleColumnResizeEnd = function (columnWidth, cursorDelta, dataKey, index) {
-    _this8.setState(_defineProperty({
+    _this7.setState(_defineProperty({
       isColumnResizing: false
     }, dataKey + '_' + index + '_width', columnWidth));
 
-    (0, _domLib.addStyle)(_this8.mouseArea, {
+    (0, _domLib.addStyle)(_this7.mouseArea, {
       display: 'none'
@@ -946,10 +994,10 @@ });
   this.handleColumnResizeStart = function (width, left, fixed) {
-    _this8.setState({
+    _this7.setState({
       isColumnResizing: true
     });
     var mouseAreaLeft = width + left;
-    var x = fixed ? mouseAreaLeft : mouseAreaLeft + (_this8.scrollX || 0);
+    var x = fixed ? mouseAreaLeft : mouseAreaLeft + (_this7.scrollX || 0);
     var styles = { display: 'block' };
     (0, _domLib.translateDOMPositionXY)(styles, x, 0);
-    (0, _domLib.addStyle)(_this8.mouseArea, styles);
+    (0, _domLib.addStyle)(_this7.mouseArea, styles);
   };
@@ -959,11 +1007,11 @@
     var mouseAreaLeft = width + left;
-    var x = fixed ? mouseAreaLeft : mouseAreaLeft + (_this8.scrollX || 0);
+    var x = fixed ? mouseAreaLeft : mouseAreaLeft + (_this7.scrollX || 0);
     var styles = {};
     (0, _domLib.translateDOMPositionXY)(styles, x, 0);
-    (0, _domLib.addStyle)(_this8.mouseArea, styles);
+    (0, _domLib.addStyle)(_this7.mouseArea, styles);
   };
 
   this.handleTreeToggle = function (rowKey, rowIndex, rowData) {
-    var onExpandChange = _this8.props.onExpandChange;
-    var expandedRowKeys = _this8.state.expandedRowKeys;
+    var onExpandChange = _this7.props.onExpandChange;
+    var expandedRowKeys = _this7.state.expandedRowKeys;
 
@@ -984,3 +1032,3 @@
     }
-    _this8.setState({
+    _this7.setState({
       expandedRowKeys: nextExpandedRowKeys
@@ -992,27 +1040,27 @@ });
   this.handleScrollX = function (delta) {
-    _this8.handleWheel(delta, 0);
+    _this7.handleWheel(delta, 0);
   };
 
   this.handleScrollY = function (delta) {
-    _this8.handleWheel(0, delta);
+    _this7.handleWheel(0, delta);
   };
 
   this.handleWheel = function (deltaX, deltaY) {
-    var onScroll = _this8.props.onScroll;
+    var onScroll = _this7.props.onScroll;
 
-    if (!_this8.table) {
+    if (!_this7.table) {
       return;
     }
-    var nextScrollX = _this8.scrollX - deltaX;
-    var nextScrollY = _this8.scrollY - deltaY;
+    var nextScrollX = _this7.scrollX - deltaX;
+    var nextScrollY = _this7.scrollY - deltaY;
 
-    _this8.scrollY = Math.min(0, nextScrollY < _this8.minScrollY ? _this8.minScrollY : nextScrollY);
-    _this8.scrollX = Math.min(0, nextScrollX < _this8.minScrollX ? _this8.minScrollX : nextScrollX);
-    _this8.updatePosition();
+    _this7.scrollY = Math.min(0, nextScrollY < _this7.minScrollY ? _this7.minScrollY : nextScrollY);
+    _this7.scrollX = Math.min(0, nextScrollX < _this7.minScrollX ? _this7.minScrollX : nextScrollX);
+    _this7.updatePosition();
 
-    onScroll && onScroll(_this8.scrollX, _this8.scrollY);
+    onScroll && onScroll(_this7.scrollX, _this7.scrollY);
   };
 
   this.handleTouchStart = function (event) {
-    var onTouchStart = _this8.props.onTouchStart;
+    var onTouchStart = _this7.props.onTouchStart;
 
@@ -1023,4 +1071,4 @@ var _ref = event.touches ? event.touches[0] : {},
 
-    _this8.touchX = pageX;
-    _this8.touchY = pageY;
+    _this7.touchX = pageX;
+    _this7.touchY = pageY;
     onTouchStart && onTouchStart(event);
@@ -1033,3 +1081,3 @@ };
 
-    var onTouchMove = _this8.props.onTouchMove;
+    var onTouchMove = _this7.props.onTouchMove;
 
@@ -1040,9 +1088,9 @@ var _ref2 = event.touches ? event.touches[0] : {},
 
-    var deltaX = _this8.touchX - nextPageX;
-    var deltaY = _this8.touchY - nextPageY;
-    _this8.handleWheel(deltaX, deltaY);
-    _this8.scrollbarX.onWheelScroll(deltaX);
-    _this8.scrollbarY.onWheelScroll(deltaY);
-    _this8.touchX = nextPageX;
-    _this8.touchY = nextPageY;
+    var deltaX = _this7.touchX - nextPageX;
+    var deltaY = _this7.touchY - nextPageY;
+    _this7.handleWheel(deltaX, deltaY);
+    _this7.scrollbarX.onWheelScroll(deltaX);
+    _this7.scrollbarY.onWheelScroll(deltaY);
+    _this7.touchX = nextPageX;
+    _this7.touchY = nextPageY;
 
@@ -1053,6 +1101,6 @@ onTouchMove && onTouchMove(event);
   this.shouldHandleWheelX = function (delta) {
-    var _props13 = _this8.props,
+    var _props13 = _this7.props,
         disabledScroll = _props13.disabledScroll,
         loading = _props13.loading;
-    var _state2 = _this8.state,
+    var _state2 = _this7.state,
         contentWidth = _state2.contentWidth,
@@ -1069,7 +1117,7 @@ width = _state2.width;
 
-    return delta >= 0 && _this8.scrollX > _this8.minScrollX || delta < 0 && _this8.scrollX < 0;
+    return delta >= 0 && _this7.scrollX > _this7.minScrollX || delta < 0 && _this7.scrollX < 0;
   };
 
   this.shouldHandleWheelY = function (delta) {
-    var _props14 = _this8.props,
+    var _props14 = _this7.props,
         disabledScroll = _props14.disabledScroll,
@@ -1081,3 +1129,3 @@ loading = _props14.loading;
     }
-    return delta >= 0 && _this8.scrollY > _this8.minScrollY || delta < 0 && _this8.scrollY < 0;
+    return delta >= 0 && _this7.scrollY > _this7.minScrollY || delta < 0 && _this7.scrollY < 0;
   };
@@ -1091,11 +1139,11 @@
   this.addPrefix = function (name) {
-    return (0, _utils.prefix)(_this8.props.classPrefix)(name);
+    return (0, _utils.prefix)(_this7.props.classPrefix)(name);
   };
 
   this.calculateTableWidth = function () {
-    var table = _this8.table;
+    var table = _this7.table;
     if (table) {
-      _this8.scrollX = 0;
-      _this8.scrollbarX && _this8.scrollbarX.resetScrollBarPosition();
-      _this8.setState({
+      _this7.scrollX = 0;
+      _this7.scrollbarX && _this7.scrollbarX.resetScrollBarPosition();
+      _this7.setState({
         width: (0, _domLib.getWidth)(table)
@@ -1108,3 +1156,3 @@ });
     return function (ref) {
-      _this8.tableRows[index] = ref;
+      _this7.tableRows[index] = ref;
     };
@@ -1114,21 +1162,21 @@ };
   this.bindMouseAreaRef = function (ref) {
-    _this8.mouseArea = ref;
+    _this7.mouseArea = ref;
   };
 
   this.bindTableHeaderRef = function (ref) {
-    _this8.tableHeader = ref;
+    _this7.tableHeader = ref;
   };
 
   this.bindHeaderWrapperRef = function (ref) {
-    _this8.headerWrapper = ref;
+    _this7.headerWrapper = ref;
   };
 
   this.bindTableRef = function (ref) {
-    _this8.table = ref;
+    _this7.table = ref;
   };
 
   this.bindWheelWrapperRef = function (ref) {
-    var bodyRef = _this8.props.bodyRef;
+    var bodyRef = _this7.props.bodyRef;
 
-    _this8.wheelWrapper = ref;
+    _this7.wheelWrapper = ref;
     bodyRef && bodyRef(ref);
@@ -1138,11 +1186,11 @@ };
   this.bindBodyRef = function (ref) {
-    _this8.tableBody = ref;
+    _this7.tableBody = ref;
   };
 
   this.bindScrollbarXRef = function (ref) {
-    _this8.scrollbarX = ref;
+    _this7.scrollbarX = ref;
   };
 
   this.bindScrollbarYRef = function (ref) {
-    _this8.scrollbarY = ref;
+    _this7.scrollbarY = ref;
   };
@@ -1149,0 +1197,0 @@ };

lib/utils/index.js

@@ -6,3 +6,3 @@ 'use strict';
 });
-exports.colSpanCells = exports.getTotalByColumns = exports.getUnhandledProps = exports.isNullOrUndefined = undefined;
+exports.toggleClass = exports.colSpanCells = exports.getTotalByColumns = exports.getUnhandledProps = exports.isNullOrUndefined = undefined;
 
@@ -37,2 +37,6 @@ var _prefix = require('./prefix');
 
+var _toggleClass2 = require('./toggleClass');
+
+var _toggleClass3 = _interopRequireDefault(_toggleClass2);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -43,2 +47,3 @@
 exports.getTotalByColumns = _getTotalByColumns3.default;
-exports.colSpanCells = _colSpanCells3.default;
+exports.colSpanCells = _colSpanCells3.default;
+exports.toggleClass = _toggleClass3.default;

package.json

 {
   "name": "rsuite-table",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "description": "A React table component",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

src/Table.js

@@ -8,11 +8,3 @@ // @flow
 
-import {
-  addStyle,
-  addClass,
-  removeClass,
-  getWidth,
-  getHeight,
-  translateDOMPositionXY,
-  WheelHandler
-} from 'dom-lib';
+import { addStyle, getWidth, getHeight, translateDOMPositionXY, WheelHandler } from 'dom-lib';
 
@@ -28,8 +20,17 @@ import Row from './Row';
   defaultClassPrefix,
+  toggleClass,
   prefix
 } from './utils';
 
-const handleClass = { add: addClass, remove: removeClass };
 const ReactChildren = React.Children;
 const CELL_PADDING_HEIGHT = 26;
+const columnHandledProps = [
+  'align',
+  'width',
+  'fixed',
+  'resizable',
+  'flexGrow',
+  'minWidth',
+  'colSpan'
+];
 
@@ -41,7 +42,8 @@ type SortType = 'desc' | 'asc';
   height: number,
+  autoHeight?: boolean,
+  minHeight: number,
   rowHeight: number,
+  headerHeight: number,
   setRowHeight?: (rowData: Object) => number,
   rowKey: string | number,
-  headerHeight: number,
-
   isTree?: boolean,
@@ -70,2 +72,3 @@
   bordered?: boolean,
+  cellBordered?: boolean,
   wordWrap?: boolean,
@@ -79,3 +82,4 @@ onRowClick?: (rowData: Object) => void,
   bodyRef?: React.ElementRef<*>,
-  loadAnimation?: boolean
+  loadAnimation?: boolean,
+  showHeader?: boolean
 };
@@ -115,5 +119,7 @@
     headerHeight: 40,
+    minHeight: 0,
     rowExpandedHeight: 100,
     sortType: 'asc',
     hover: true,
+    showHeader: true,
     rowKey: 'key',
@@ -205,2 +211,20 @@ locale: {
 
+  /**
+   * 获取表头高度
+   */
+  getTableHeaderHeight() {
+    const { headerHeight, showHeader } = this.props;
+    return showHeader ? headerHeight : 0;
+  }
+
+  /**
+   * 获取 Table 需要渲染的高度
+   */
+  getTableHeight() {
+    const { contentHeight } = this.state;
+    const { minHeight, height, autoHeight } = this.props;
+    const headerHeight = this.getTableHeaderHeight();
+    return autoHeight ? Math.max(headerHeight + contentHeight, minHeight) : height;
+  }
+
   getCells() {
@@ -221,4 +245,4 @@ let left = 0; // Cell left margin
     const { width: tableWidth } = this.state;
-    const { sortColumn, sortType, onSortColumn, rowHeight, headerHeight } = this.props;
-
+    const { sortColumn, sortType, onSortColumn, rowHeight, showHeader } = this.props;
+    const headerHeight = this.getTableHeaderHeight();
     const { totalFlexGrow, totalWidth } = getTotalByColumns(columns);
@@ -251,13 +275,3 @@
 
-        const columnHandledProps = [
-          'align',
-          'width',
-          'fixed',
-          'resizable',
-          'flexGrow',
-          'minWidth',
-          'colSpan'
-        ];
-
-        let cellProps = {
+        const cellProps = {
           ..._.pick(column.props, columnHandledProps),
@@ -274,26 +288,29 @@ left,
 
-        let headerCellsProps = {
-          dataKey: columnChildren[1].props.dataKey,
-          isHeaderCell: true,
-          sortable: column.props.sortable,
-          sortColumn,
-          sortType,
-          onSortColumn,
-          flexGrow
-        };
+        if (showHeader && headerHeight) {
+          const headerCellProps = {
+            dataKey: columnChildren[1].props.dataKey,
+            isHeaderCell: true,
+            sortable: column.props.sortable,
+            sortColumn,
+            sortType,
+            onSortColumn,
+            flexGrow
+          };
 
-        if (resizable) {
-          _.merge(headerCellsProps, {
-            onColumnResizeEnd: this.handleColumnResizeEnd,
-            onColumnResizeStart: this.handleColumnResizeStart,
-            onColumnResizeMove: this.handleColumnResizeMove
-          });
+          if (resizable) {
+            _.merge(headerCellProps, {
+              onColumnResizeEnd: this.handleColumnResizeEnd,
+              onColumnResizeStart: this.handleColumnResizeStart,
+              onColumnResizeMove: this.handleColumnResizeMove
+            });
+          }
+
+          headerCells.push(
+            React.cloneElement(columnChildren[0], {
+              ...cellProps,
+              ...headerCellProps
+            })
+          );
         }
 
-        headerCells.push(
-          React.cloneElement(columnChildren[0], {
-            ...cellProps,
-            ...headerCellsProps
-          })
-        );
         bodyCells.push(React.cloneElement(columnChildren[1], cellProps));
@@ -432,7 +449,7 @@
     }
-    handleClass[this.scrollY < 0 ? 'add' : 'remove'](
-      this.tableHeader,
-      this.addPrefix('cell-group-shadow')
-    );
+    if (this.tableHeader) {
+      toggleClass(this.tableHeader, this.addPrefix('cell-group-shadow'), this.scrollY < 0);
+    }
   }
+
   updatePositionByFixedCell() {
@@ -454,4 +471,7 @@ const wheelGroupStyle = {};
 
+    const shadowClassName = this.addPrefix('cell-group-shadow');
+    const condition = this.scrollX < 0;
+
     Array.from(fixedGroups).forEach(group => {
-      handleClass[this.scrollX < 0 ? 'add' : 'remove'](group, this.addPrefix('cell-group-shadow'));
+      toggleClass(group, shadowClassName, condition);
     });
@@ -530,4 +550,4 @@ }
     const table = this.table;
-    const row = table.querySelectorAll(`.${this.addPrefix('row-header')}`)[0];
-    const contentWidth = getWidth(row);
+    const row = table.querySelector(`.${this.addPrefix('row')}`);
+    const contentWidth = row ? getWidth(row) : 0;
 
@@ -549,8 +569,10 @@ this.setState({ contentWidth });
     const table = this.table;
-    const rows = table.querySelectorAll(`.${this.addPrefix('row')}`);
-    const { height, headerHeight } = this.props;
-    let contentHeight = 0;
-    Array.from(rows).forEach(row => {
-      contentHeight += getHeight(row);
-    });
+    const rows = table.querySelectorAll(`.${this.addPrefix('row')}`) || [];
+    const { height, autoHeight, rowHeight } = this.props;
+    const headerHeight = this.getTableHeaderHeight();
+    const contentHeight = rows.length
+      ? Array.from(rows)
+          .map(row => getHeight(row) || rowHeight)
+          .reduce((x, y) => x + y)
+      : 0;
 
@@ -561,5 +583,8 @@ const nextContentHeight = contentHeight - headerHeight;
     });
-    // 这里 -10 是为了让滚动条不挡住内容部分
-    this.minScrollY = -(contentHeight - height) - 10;
 
+    if (!autoHeight) {
+      // 这里 -10 是为了让滚动条不挡住内容部分
+      this.minScrollY = -(contentHeight - height) - 10;
+    }
+
     /**
@@ -628,5 +653,4 @@ * 当 content height 更新后，更新纵向滚动条
   ) {
-    const { onRowClick, renderTreeToggle, rowKey, wordWrap } = this.props;
-
-    const hasChildren = this.props.isTree && rowData.children && Array.isArray(rowData.children);
+    const { onRowClick, renderTreeToggle, rowKey, wordWrap, isTree } = this.props;
+    const hasChildren = isTree && rowData.children && Array.isArray(rowData.children);
     const nextRowKey =
@@ -748,4 +772,4 @@ rowData[rowKey] ||
   renderMouseArea() {
-    const { height, headerHeight } = this.props;
-    const styles = { height };
+    const headerHeight = this.getTableHeaderHeight();
+    const styles = { height: this.getTableHeight() };
 
@@ -764,3 +788,4 @@ return (
   renderTableHeader(headerCells: Array<any>, rowWidth: number) {
-    const { rowHeight, headerHeight } = this.props;
+    const { rowHeight } = this.props;
+    const headerHeight = this.getTableHeaderHeight();
     const rowProps = {
@@ -783,13 +808,6 @@ rowRef: this.bindTableHeaderRef,
   renderTableBody(bodyCells: Array<any>, rowWidth: number) {
-    const {
-      headerHeight,
-      rowHeight,
-      rowExpandedHeight,
-      height,
-      data,
-      isTree,
-      setRowHeight
-    } = this.props;
-
+    const { rowHeight, rowExpandedHeight, data, isTree, setRowHeight } = this.props;
+    const headerHeight = this.getTableHeaderHeight();
     const { tableRowsMaxHeight } = this.state;
+    const height = this.getTableHeight();
     const bodyStyles = {
@@ -876,4 +894,6 @@ top: isTree ? 0 : headerHeight,
   renderScrollbar() {
-    const { disabledScroll, headerHeight, height, loading } = this.props;
+    const { disabledScroll, loading } = this.props;
+    const headerHeight = this.getTableHeaderHeight();
     const { contentWidth, contentHeight } = this.state;
+    const height = this.getTableHeight();
 
@@ -928,3 +948,2 @@ if (disabledScroll || loading) {
       width = 0,
-      height,
       style,
@@ -935,5 +954,7 @@ rowHeight,
       bordered,
+      cellBordered,
       wordWrap,
       classPrefix,
       loading,
+      showHeader,
       ...rest
@@ -949,2 +970,3 @@ } = this.props;
       [this.addPrefix('bordered')]: bordered,
+      [this.addPrefix('cell-bordered')]: cellBordered,
       [this.addPrefix('column-resizing')]: isColumnResizing,
@@ -957,3 +979,3 @@ [this.addPrefix('hover')]: hover,
       width: width || 'auto',
-      height,
+      height: this.getTableHeight(),
       ...style
@@ -966,5 +988,5 @@ };
       <div {...unhandled} className={clesses} style={styles} ref={this.bindTableRef}>
-        {this.renderTableHeader(headerCells, rowWidth)}
+        {showHeader && this.renderTableHeader(headerCells, rowWidth)}
         {children && this.renderTableBody(bodyCells, rowWidth)}
-        {this.renderMouseArea()}
+        {showHeader && this.renderMouseArea()}
       </div>
@@ -971,0 +993,0 @@ );

src/utils/index.js

@@ -6,1 +6,2 @@ export * from './prefix';
 export colSpanCells from './colSpanCells';
+export toggleClass from './toggleClass';

No alert changes

Improved metrics

Total package byte prevSize

169350

increased by2.33%

Number of package files

56

increased by3.7%

Lines of code

3730

increased by2.42%

No dependency changes