Merge branch 'master' of github.com:tinper-bee/bee-table

CHANGELOG.md

@@ -1,3 +1,18 @@
+<a name="1.6.4"></a>
+## [1.6.4](https://github.com/tinper-bee/bee-table/compare/v1.6.3...v1.6.4) (2018-12-03)
+
+
+
+<a name="1.6.3"></a>
+## [1.6.3](https://github.com/tinper-bee/bee-table/compare/v1.6.2...v1.6.3) (2018-12-03)
+
+
+
+<a name="1.6.2"></a>
+## [1.6.2](https://github.com/tinper-bee/bee-table/compare/v1.6.1...v1.6.2) (2018-12-03)
+
+
+
 <a name="1.6.1"></a>
 ## [1.6.1](https://github.com/tinper-bee/bee-table/compare/v1.5.19...v1.6.1) (2018-12-03)
 
@@ -99,7 +114,7 @@
 
 
 <a name="1.5.1"></a>
-## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-18)
+## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-19)
 
 
 

build/Table.js

@@ -14,6 +14,10 @@ var _propTypes = require('prop-types');
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
 
+var _componentClasses = require('component-classes');
+
+var _componentClasses2 = _interopRequireDefault(_componentClasses);
+
 var _TableRow = require('./TableRow');
 
 var _TableRow2 = _interopRequireDefault(_TableRow);
@@ -364,8 +368,8 @@ var Table = function (_Component) {
   Table.prototype.getHeader = function getHeader(columns, fixed) {
     var _props = this.props,
         filterDelay = _props.filterDelay,
-        onFilterChange = _props.onFilterChange,
+        onFilterRowsDropChange = _props.onFilterRowsDropChange,
-        onFilterClear = _props.onFilterClear,
+        onFilterRowsChange = _props.onFilterRowsChange,
         filterable = _props.filterable,
         showHeader = _props.showHeader,
         expandIconAsCell = _props.expandIconAsCell,
@@ -417,9 +421,9 @@ var Table = function (_Component) {
       rowStyle: trStyle,
       fixed: fixed,
       filterable: filterable,
-      onFilterChange: onFilterChange //过滤行输入或下拉之后回调
+      onFilterRowsChange: onFilterRowsChange,
-      , onFilterClear: onFilterClear //过滤行清除后回调
+      onFilterRowsDropChange: onFilterRowsDropChange,
-      , filterDelay: filterDelay,
+      filterDelay: filterDelay,
       afterDragColWidth: afterDragColWidth,
       contentDomWidth: this.contentDomWidth,
       scrollbarWidth: this.scrollbarWidth,
@@ -745,8 +749,7 @@ var Table = function (_Component) {
         scroll = _props3$scroll === undefined ? {} : _props3$scroll,
         getBodyWrapper = _props3.getBodyWrapper,
         footerScroll = _props3.footerScroll,
-        headerScroll = _props3.headerScroll,
+        headerScroll = _props3.headerScroll;
-        hideBodyScroll = _props3.hideBodyScroll;
     var useFixedHeader = this.props.useFixedHeader;
 
     var bodyStyle = _extends({}, this.props.bodyStyle);
@@ -782,6 +785,7 @@ var Table = function (_Component) {
         //显示表头滚动条
         if (headerScroll) {
           if (fixed) {
+            //内容少，不用显示滚动条
             if (this.domWidthDiff <= 0) {
               headStyle.marginBottom = scrollbarWidth + 'px';
               bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
@@ -792,8 +796,6 @@ var Table = function (_Component) {
             //内容少，不用显示滚动条
             if (this.domWidthDiff > 0) {
               headStyle.overflowX = 'hidden';
-            } else if (hideBodyScroll) {
-              bodyStyle.overflowX = 'hidden';
             }
             headStyle.marginBottom = '0px';
           }
@@ -1020,8 +1022,10 @@ var Table = function (_Component) {
   };
 
   Table.prototype.handleBodyScroll = function handleBodyScroll(e) {
-    var _props$scroll = this.props.scroll,
+    var _props8 = this.props,
-        scroll = _props$scroll === undefined ? {} : _props$scroll;
+        _props8$scroll = _props8.scroll,
+        scroll = _props8$scroll === undefined ? {} : _props8$scroll,
+        clsPrefix = _props8.clsPrefix;
     var _refs = this.refs,
         headTable = _refs.headTable,
         bodyTable = _refs.bodyTable,
@@ -1034,17 +1038,21 @@ var Table = function (_Component) {
       return;
     }
     if (e.target.scrollLeft !== this.lastScrollLeft) {
+      var position = '';
       if (e.target === bodyTable && headTable) {
         headTable.scrollLeft = e.target.scrollLeft;
       } else if (e.target === headTable && bodyTable) {
         bodyTable.scrollLeft = e.target.scrollLeft;
       }
       if (e.target.scrollLeft === 0) {
-        this.setState({ scrollPosition: 'left' });
+        position = 'left';
       } else if (e.target.scrollLeft + 1 >= e.target.children[0].getBoundingClientRect().width - e.target.getBoundingClientRect().width) {
-        this.setState({ scrollPosition: 'right' });
+        position = 'right';
       } else if (this.state.scrollPosition !== 'middle') {
-        this.setState({ scrollPosition: 'middle' });
+        position = 'middle';
+      }
+      if (position) {
+        (0, _componentClasses2["default"])(this.contentTable).remove(new RegExp('^' + clsPrefix + '-scroll-position-.+$')).add(clsPrefix + '-scroll-position-' + position);
       }
     }
     if (scroll.y) {

build/TableHeader.js

@@ -469,7 +469,7 @@ var TableHeader = function (_Component) {
   //   if(this.drag.option === 'border'){return;}
   //   let data = this.getCurrentEventData(e);
   //   if (!this.currentObj || this.currentObj.key == data.key) return;
-  // };
+  // }; 
 
   /**
    * 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】

dist/demo.js

@@ -7237,7 +7237,7 @@
 	  duration: _propTypes2["default"].number,
 	  onClose: _propTypes2["default"].func,
 	  children: _propTypes2["default"].any,
-	  color: _propTypes2["default"].oneOf(['info', 'success', 'danger', 'warning', 'light', 'dark', 'news', 'infolight', 'successlight', 'dangerlight', 'warninglight']),
+	  color: _propTypes2["default"].oneOf(['light']),
 	  title: _propTypes2["default"].any
 	};
 	
@@ -7336,7 +7336,7 @@
 	
 	;
 	
-	Notice.propTypes = propTypes;
+	Notice.PropTypes = _propTypes2["default"];
 	Notice.defaultProps = defaultProps;
 	
 	exports["default"] = Notice;
@@ -10582,6 +10582,10 @@
 	
 	var _propTypes2 = _interopRequireDefault(_propTypes);
 	
+	var _componentClasses = __webpack_require__(46);
+	
+	var _componentClasses2 = _interopRequireDefault(_componentClasses);
+	
 	var _TableRow = __webpack_require__(106);
 	
 	var _TableRow2 = _interopRequireDefault(_TableRow);
@@ -10932,8 +10936,8 @@
 	  Table.prototype.getHeader = function getHeader(columns, fixed) {
 	    var _props = this.props,
 	        filterDelay = _props.filterDelay,
-	        onFilterChange = _props.onFilterChange,
+	        onFilterRowsDropChange = _props.onFilterRowsDropChange,
-	        onFilterClear = _props.onFilterClear,
+	        onFilterRowsChange = _props.onFilterRowsChange,
 	        filterable = _props.filterable,
 	        showHeader = _props.showHeader,
 	        expandIconAsCell = _props.expandIconAsCell,
@@ -10985,9 +10989,9 @@
 	      rowStyle: trStyle,
 	      fixed: fixed,
 	      filterable: filterable,
-	      onFilterChange: onFilterChange //过滤行输入或下拉之后回调
+	      onFilterRowsChange: onFilterRowsChange,
-	      , onFilterClear: onFilterClear //过滤行清除后回调
+	      onFilterRowsDropChange: onFilterRowsDropChange,
-	      , filterDelay: filterDelay,
+	      filterDelay: filterDelay,
 	      afterDragColWidth: afterDragColWidth,
 	      contentDomWidth: this.contentDomWidth,
 	      scrollbarWidth: this.scrollbarWidth,
@@ -11313,8 +11317,7 @@
 	        scroll = _props3$scroll === undefined ? {} : _props3$scroll,
 	        getBodyWrapper = _props3.getBodyWrapper,
 	        footerScroll = _props3.footerScroll,
-	        headerScroll = _props3.headerScroll,
+	        headerScroll = _props3.headerScroll;
-	        hideBodyScroll = _props3.hideBodyScroll;
 	    var useFixedHeader = this.props.useFixedHeader;
 	
 	    var bodyStyle = _extends({}, this.props.bodyStyle);
@@ -11350,6 +11353,7 @@
 	        //显示表头滚动条
 	        if (headerScroll) {
 	          if (fixed) {
+	            //内容少，不用显示滚动条
 	            if (this.domWidthDiff <= 0) {
 	              headStyle.marginBottom = scrollbarWidth + 'px';
 	              bodyStyle.marginBottom = '-' + scrollbarWidth + 'px';
@@ -11360,8 +11364,6 @@
 	            //内容少，不用显示滚动条
 	            if (this.domWidthDiff > 0) {
 	              headStyle.overflowX = 'hidden';
-	            } else if (hideBodyScroll) {
-	              bodyStyle.overflowX = 'hidden';
 	            }
 	            headStyle.marginBottom = '0px';
 	          }
@@ -11588,8 +11590,10 @@
 	  };
 	
 	  Table.prototype.handleBodyScroll = function handleBodyScroll(e) {
-	    var _props$scroll = this.props.scroll,
+	    var _props8 = this.props,
-	        scroll = _props$scroll === undefined ? {} : _props$scroll;
+	        _props8$scroll = _props8.scroll,
+	        scroll = _props8$scroll === undefined ? {} : _props8$scroll,
+	        clsPrefix = _props8.clsPrefix;
 	    var _refs = this.refs,
 	        headTable = _refs.headTable,
 	        bodyTable = _refs.bodyTable,
@@ -11602,17 +11606,21 @@
 	      return;
 	    }
 	    if (e.target.scrollLeft !== this.lastScrollLeft) {
+	      var position = '';
 	      if (e.target === bodyTable && headTable) {
 	        headTable.scrollLeft = e.target.scrollLeft;
 	      } else if (e.target === headTable && bodyTable) {
 	        bodyTable.scrollLeft = e.target.scrollLeft;
 	      }
 	      if (e.target.scrollLeft === 0) {
-	        this.setState({ scrollPosition: 'left' });
+	        position = 'left';
 	      } else if (e.target.scrollLeft + 1 >= e.target.children[0].getBoundingClientRect().width - e.target.getBoundingClientRect().width) {
-	        this.setState({ scrollPosition: 'right' });
+	        position = 'right';
 	      } else if (this.state.scrollPosition !== 'middle') {
-	        this.setState({ scrollPosition: 'middle' });
+	        position = 'middle';
+	      }
+	      if (position) {
+	        (0, _componentClasses2['default'])(this.contentTable).remove(new RegExp('^' + clsPrefix + '-scroll-position-.+$')).add(clsPrefix + '-scroll-position-' + position);
 	      }
 	    }
 	    if (scroll.y) {
@@ -12709,7 +12717,10 @@
 	      if (_this.drag.option === 'border') {
 	        return;
 	      }
-	      var currentIndex = parseInt(_utils.Event.getTarget(event).getAttribute("data-line-index"));
+	      // console.log('-------onDragStart----------',event.target);
+	      var th = _this.getThDome(event.target);
+	      if (!th) return;
+	      var currentIndex = parseInt(th.getAttribute("data-line-index"));
 	
 	      var currentKey = event.target.getAttribute('data-line-key');
 	      event.dataTransfer.effectAllowed = "move";
@@ -12729,6 +12740,7 @@
 	      }
 	      var data = _this.getCurrentEventData(e);
 	      if (!data) return;
+	      // console.log('-------onDrop----------',event.target);
 	      if (!_this.currentObj || _this.currentObj.key == data.key) return;
 	      if (!_this.props.onDrop) return;
 	      _this.props.onDrop(event, { dragSource: _this.currentObj, dragTarg: data });
@@ -13020,7 +13032,7 @@
 	  //   if(this.drag.option === 'border'){return;}
 	  //   let data = this.getCurrentEventData(e);
 	  //   if (!this.currentObj || this.currentObj.key == data.key) return;
-	  // };
+	  // }; 
 	
 	  /**
 	   * 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
@@ -13030,7 +13042,12 @@
 	
 	  TableHeader.prototype.getCurrentEventData = function getCurrentEventData(e) {
 	    var event = _utils.Event.getEvent(e);
-	    var key = event.target.getAttribute('data-line-key');
+	    var th = this.getThDome(event.target);
+	    if (!th) {
+	      console.log(" event target is not th ! ");
+	      return null;
+	    }
+	    var key = th.getAttribute('data-line-key');
 	    var data = this.props.rows[0].find(function (da) {
 	      return da.key == key;
 	    });
@@ -13041,7 +13058,27 @@
 	      return null;
 	    }
 	  };
+	
+	  /**
+	   *根据拖拽，获取当前的Th属性
+	   * @param {*} element
+	   * @returns
+	   * @memberof TableHeader
+	   */
+	
+	
+	  TableHeader.prototype.getThDome = function getThDome(element) {
+	    var _tagName = element.tagName.toLowerCase();
+	    if (_tagName === 'i') return null;
+	    if (_tagName != 'th') {
+	      return this.getThDome(element.parentElement);
+	    } else {
+	      return element;
+	    }
+	  };
+	
 	  //---拖拽列交换----end----- 
+	
 	  /**
 	   * 过滤输入后或下拉条件的回调函数
 	   */
@@ -21620,15 +21657,15 @@
 	    InputNumber.prototype.ComponentWillMount = function ComponentWillMount() {};
 	
 	    InputNumber.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-	        if (!nextProps.hasOwnProperty('precision')) {
+	        //  if(!nextProps.hasOwnProperty('precision')){//如果没有 precision
-	            var data = judgeValue(nextProps);
+	        var data = judgeValue(nextProps);
-	            this.setState({
+	        this.setState({
-	                value: data.value,
+	            value: data.value,
-	                minusDisabled: data.minusDisabled,
+	            minusDisabled: data.minusDisabled,
-	                plusDisabled: data.plusDisabled
+	            plusDisabled: data.plusDisabled
-	            });
+	        });
-	            this.tempStorage = data.value;
+	        this.tempStorage = data.value;
-	        }
+	        //  }
 	    };
 	
 	    InputNumber.prototype.ComponentWillUnMount = function ComponentWillUnMount() {
@@ -59411,18 +59448,18 @@
 	    }
 	  };
 	
-	  Popconfirm.prototype.handleClose = function handleClose(e) {
+	  Popconfirm.prototype.handleClose = function handleClose() {
 	    var onClose = this.props.onClose;
 	
 	    this.hide();
-	    onClose && onClose(e);
+	    onClose && onClose();
 	  };
 	
-	  Popconfirm.prototype.handleCancel = function handleCancel(e) {
+	  Popconfirm.prototype.handleCancel = function handleCancel() {
 	    var onCancel = this.props.onCancel;
 	
 	    this.hide();
-	    onCancel && onCancel(e);
+	    onCancel && onCancel();
 	  };
 	
 	  Popconfirm.prototype.handleHide = function handleHide() {
@@ -59458,8 +59495,7 @@
 	        content = _props.content,
 	        children = _props.children,
 	        onClick = _props.onClick,
-	        stopbubble = _props.stopbubble,
+	        props = _objectWithoutProperties(_props, ['content', 'children', 'onClick']);
-	        props = _objectWithoutProperties(_props, ['content', 'children', 'onClick', 'stopbubble']);
 	
 	    delete props.defaultOverlayShown;
 	
@@ -59476,7 +59512,6 @@
 	      _extends({}, confirmProps, {
 	        onClose: this.handleClose,
 	        onCancel: this.handleCancel,
-	        stopbubble: stopbubble,
 	        placement: props.placement }),
 	      content
 	    );
@@ -59591,11 +59626,6 @@
 	     */
 	    arrowOffsetLeft: _propTypes2["default"].oneOfType([_propTypes2["default"].number, _propTypes2["default"].string]),
 	
-	    /**
-	     * 阻止冒泡
-	     */
-	    stopbubble: _propTypes2["default"].number,
-	
 	    /**
 	     * Title content
 	     */
@@ -59606,7 +59636,6 @@
 	};
 	
 	var defaultProps = {
-	    stopbubble: 0,
 	    placement: 'right',
 	    clsPrefix: 'u-popconfirm',
 	    locale: {}
@@ -59618,27 +59647,7 @@
 	    function Confirm(props) {
 	        _classCallCheck(this, Confirm);
 	
-	        var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
+	        return _possibleConstructorReturn(this, _React$Component.call(this, props));
-	
-	        _this.cancel = function (e) {
-	            var _this$props = _this.props,
-	                stopbubble = _this$props.stopbubble,
-	                onCancel = _this$props.onCancel;
-	
-	            stopbubble && e.stopPropagation();
-	            onCancel(e);
-	        };
-	
-	        _this.close = function (e) {
-	            var _this$props2 = _this.props,
-	                stopbubble = _this$props2.stopbubble,
-	                onClose = _this$props2.onClose;
-	
-	            stopbubble && e.stopPropagation();
-	            onClose(e);
-	        };
-	
-	        return _this;
 	    }
 	
 	    Confirm.prototype.render = function render() {
@@ -59660,8 +59669,7 @@
 	            onClose = _props.onClose,
 	            color = _props.color,
 	            onCancel = _props.onCancel,
-	            stopbubble = _props.stopbubble,
+	            props = _objectWithoutProperties(_props, ['placement', 'positionTop', 'positionLeft', 'arrowOffsetTop', 'arrowOffsetLeft', 'clsPrefix', 'trigger', 'title', 'className', 'style', 'children', 'locale', 'onClose', 'color', 'onCancel']);
-	            props = _objectWithoutProperties(_props, ['placement', 'positionTop', 'positionLeft', 'arrowOffsetTop', 'arrowOffsetLeft', 'clsPrefix', 'trigger', 'title', 'className', 'style', 'children', 'locale', 'onClose', 'color', 'onCancel', 'stopbubble']);
 	
 	        var local = (0, _tool.getComponentLocale)(this.props, this.context, 'Popconfirm', function () {
 	            return _i18n2["default"];
@@ -59687,10 +59695,7 @@
 	            _extends({}, props, {
 	                role: 'tooltip',
 	                className: (0, _classnames2["default"])(className, classes),
-	                style: outerStyle,
+	                style: outerStyle
-	                onClick: function onClick(e) {
-	                    return stopbubble && e.stopPropagation();
-	                }
 	            }),
 	            _react2["default"].createElement('div', { className: 'arrow', style: arrowStyle }),
 	            _react2["default"].createElement(
@@ -59703,13 +59708,13 @@
 	                { className: (0, _classnames2["default"])(clsPrefix + '-confirm') },
 	                _react2["default"].createElement(
 	                    _beeButton2["default"],
-	                    { onClick: this.cancel, size: 'sm', style: { minWidth: 50 },
+	                    { onClick: onCancel, size: 'sm', style: { minWidth: 50 },
 	                        shape: 'border' },
 	                    local['cancel']
 	                ),
 	                _react2["default"].createElement(
 	                    _beeButton2["default"],
-	                    { onClick: this.close, size: 'sm', style: { minWidth: 50 }, colors: 'primary' },
+	                    { onClick: onClose, size: 'sm', style: { minWidth: 50 }, colors: 'primary' },
 	                    local['ok']
 	                )
 	            )

package.json

@@ -1,6 +1,6 @@
 {
  "name": "bee-table",
- "version": "1.6.2",
+ "version": "1.6.4",
  "description": "Table ui component for react",
  "keywords": [
   "react",
@@ -64,6 +64,7 @@
   "shallowequal": "^1.0.2",
   "throttle-debounce": "^2.0.1",
   "tinper-bee-core": "latest",
+  "component-classes": "^1.2.6",
   "warning": "^3.0.0"
  },
  "peerDependencies": {

src/Table.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import classes from 'component-classes';
 import TableRow from './TableRow';
 import TableHeader from './TableHeader';
 import { measureScrollbar, debounce, warningOnce ,getMaxColChildrenLength} from './utils';
@@ -293,7 +294,7 @@ class Table extends Component {
   }
 
   getHeader(columns, fixed) {
-    const { filterDelay, onFilterChange, onFilterClear, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop, draggable,
+    const { filterDelay, onFilterRowsDropChange, onFilterRowsChange, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop, draggable,
       onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered} = this.props;
     const rows = this.getHeaderRows(columns);
     if (expandIconAsCell && fixed !== 'right') {
@@ -328,8 +329,8 @@ class Table extends Component {
         rowStyle={trStyle}
         fixed={fixed}
         filterable={filterable}
-        onFilterChange={onFilterChange}//过滤行输入或下拉之后回调
+        onFilterRowsChange={onFilterRowsChange}
-        onFilterClear={onFilterClear}//过滤行清除后回调
+        onFilterRowsDropChange={onFilterRowsDropChange}
         filterDelay={filterDelay}
         afterDragColWidth = {afterDragColWidth}
         contentDomWidth={this.contentDomWidth}
@@ -646,7 +647,7 @@ class Table extends Component {
 
   getTable(options = {}) {
     const { columns, fixed } = options;
-    const { clsPrefix, scroll = {}, getBodyWrapper, footerScroll,headerScroll,hideBodyScroll } = this.props;
+    const { clsPrefix, scroll = {}, getBodyWrapper, footerScroll,headerScroll } = this.props;
     let { useFixedHeader } = this.props;
     const bodyStyle = { ...this.props.bodyStyle };
     const headStyle = {};
@@ -681,6 +682,7 @@ class Table extends Component {
         //显示表头滚动条
         if(headerScroll){
           if(fixed){
+           //内容少，不用显示滚动条
            if(this.domWidthDiff <= 0){
               headStyle.marginBottom = `${scrollbarWidth}px`;
               bodyStyle.marginBottom = `-${scrollbarWidth}px`;
@@ -689,14 +691,11 @@ class Table extends Component {
             }
           }else{
                //内容少，不用显示滚动条
-              if(this.domWidthDiff > 0){
+               if(this.domWidthDiff > 0){
                 headStyle.overflowX = 'hidden';
-              }else if(hideBodyScroll){
-                bodyStyle.overflowX = 'hidden';
               }
             headStyle.marginBottom = `0px`;
           }
-
         }else{
           if(fixed){
             if(this.domWidthDiff > 0){
@@ -898,7 +897,7 @@ class Table extends Component {
 
   handleBodyScroll(e) {
 
-    const { scroll = {} } = this.props;
+    const { scroll = {},clsPrefix } = this.props;
     const { headTable, bodyTable, fixedColumnsBodyLeft, fixedColumnsBodyRight } = this.refs;
     // Prevent scrollTop setter trigger onScroll event
     // http://stackoverflow.com/q/1386696
@@ -906,20 +905,27 @@ class Table extends Component {
       return;
     }
     if (e.target.scrollLeft !== this.lastScrollLeft) {
+      let position = '';
       if (e.target === bodyTable && headTable) {
         headTable.scrollLeft = e.target.scrollLeft;
       } else if (e.target === headTable && bodyTable) {
         bodyTable.scrollLeft = e.target.scrollLeft;
       }
       if (e.target.scrollLeft === 0) {
-        this.setState({ scrollPosition: 'left' });
+        position='left';
       } else if (e.target.scrollLeft + 1 >=
         e.target.children[0].getBoundingClientRect().width -
         e.target.getBoundingClientRect().width) {
-        this.setState({ scrollPosition: 'right' });
+          position='right';
       } else if (this.state.scrollPosition !== 'middle') {
-        this.setState({ scrollPosition: 'middle' });
+        position='middle';
       }
+      if(position){
+        classes(this.contentTable)
+        .remove(new RegExp(`^${clsPrefix}-scroll-position-.+$`))
+        .add(`${clsPrefix}-scroll-position-${position}`);
+      }
+    
     }
     if (scroll.y) {
       if (fixedColumnsBodyLeft && e.target !== fixedColumnsBodyLeft) {
@@ -972,7 +978,7 @@ class Table extends Component {
         {this.getTitle()}
         <div className={`${clsPrefix}-content`}>
          
-          <div className={isTableScroll ? `${clsPrefix}-scroll` : ''} >
+          <div className={isTableScroll ? `${clsPrefix}-scroll` : ''}>
             {this.getTable({ columns: this.columnManager.groupedColumns() })}
             {this.getEmptyText()}
             {this.getFooter()}