@hipay/hipay-material-ui 1.0.0-beta.23 → 1.0.0-beta.25

package/HiTable/BodyCells/CellText.js

@@ -13,18 +13,22 @@ var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
 
-var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+var _stringify = require('babel-runtime/core-js/json/stringify');
 
-var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+var _stringify2 = _interopRequireDefault(_stringify);
 
-var _createClass2 = require('babel-runtime/helpers/createClass');
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
 
-var _createClass3 = _interopRequireDefault(_createClass2);
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
 
 var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
 
 var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
 
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
 var _inherits2 = require('babel-runtime/helpers/inherits');
 
 var _inherits3 = _interopRequireDefault(_inherits2);
@@ -77,8 +81,14 @@ var styles = exports.styles = function styles(theme) {
     };
 };
 
-var CellText = function (_React$PureComponent) {
-    (0, _inherits3.default)(CellText, _React$PureComponent);
+var CellText = function (_React$Component) {
+    (0, _inherits3.default)(CellText, _React$Component);
+    (0, _createClass3.default)(CellText, [{
+        key: 'shouldComponentUpdate',
+        value: function shouldComponentUpdate(nextProps, nextState) {
+            return (0, _stringify2.default)(this.props) !== (0, _stringify2.default)(nextProps) || (0, _stringify2.default)(this.state) !== (0, _stringify2.default)(nextState);
+        }
+    }]);
 
     function CellText(props) {
         (0, _classCallCheck3.default)(this, CellText);
@@ -249,7 +259,7 @@ var CellText = function (_React$PureComponent) {
         }
     }]);
     return CellText;
-}(_react2.default.PureComponent);
+}(_react2.default.Component);
 
 CellText.propTypes = process.env.NODE_ENV !== "production" ? {
     /**

package/HiTable/BodyCells/CellThirdPartySecurity.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
+var _stringify = require('babel-runtime/core-js/json/stringify');
+
+var _stringify2 = _interopRequireDefault(_stringify);
+
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -58,8 +62,8 @@ var styles = exports.styles = {
  */
 // @inheritedComponent CellLayout
 
-var CellThirdPartySecurity = function (_React$PureComponent) {
-    (0, _inherits3.default)(CellThirdPartySecurity, _React$PureComponent);
+var CellThirdPartySecurity = function (_React$Component) {
+    (0, _inherits3.default)(CellThirdPartySecurity, _React$Component);
 
     function CellThirdPartySecurity() {
         (0, _classCallCheck3.default)(this, CellThirdPartySecurity);
@@ -67,6 +71,11 @@ var CellThirdPartySecurity = function (_React$PureComponent) {
     }
 
     (0, _createClass3.default)(CellThirdPartySecurity, [{
+        key: 'shouldComponentUpdate',
+        value: function shouldComponentUpdate(nextProps, nextState) {
+            return (0, _stringify2.default)(this.props) !== (0, _stringify2.default)(nextProps) || (0, _stringify2.default)(this.state) !== (0, _stringify2.default)(nextState);
+        }
+    }, {
         key: 'render',
         value: function render() {
             var _props = this.props,
@@ -133,7 +142,7 @@ var CellThirdPartySecurity = function (_React$PureComponent) {
         }
     }]);
     return CellThirdPartySecurity;
-}(_react2.default.PureComponent);
+}(_react2.default.Component);
 
 CellThirdPartySecurity.propTypes = process.env.NODE_ENV !== "production" ? {
     /**

package/HiTable/BodyRow.js

@@ -17,6 +17,10 @@ var _objectWithoutProperties2 = require('babel-runtime/helpers/objectWithoutProp
 
 var _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2);
 
+var _stringify = require('babel-runtime/core-js/json/stringify');
+
+var _stringify2 = _interopRequireDefault(_stringify);
+
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -104,8 +108,8 @@ var styles = exports.styles = function styles(theme) {
     };
 };
 
-var BodyRow = function (_React$PureComponent) {
-    (0, _inherits3.default)(BodyRow, _React$PureComponent);
+var BodyRow = function (_React$Component) {
+    (0, _inherits3.default)(BodyRow, _React$Component);
 
     function BodyRow(props) {
         (0, _classCallCheck3.default)(this, BodyRow);
@@ -133,6 +137,11 @@ var BodyRow = function (_React$PureComponent) {
     }
 
     (0, _createClass3.default)(BodyRow, [{
+        key: 'shouldComponentUpdate',
+        value: function shouldComponentUpdate(nextProps, nextState) {
+            return (0, _stringify2.default)(this.props) !== (0, _stringify2.default)(nextProps) || (0, _stringify2.default)(this.state) !== (0, _stringify2.default)(nextState);
+        }
+    }, {
         key: 'componentDidMount',
         value: function componentDidMount() {
             // Live data animation
@@ -337,7 +346,7 @@ var BodyRow = function (_React$PureComponent) {
         }
     }]);
     return BodyRow;
-}(_react2.default.PureComponent);
+}(_react2.default.Component);
 
 BodyRow.defaultProps = {
     selectable: false,

package/HiTable/ColumnFilter.js

@@ -95,9 +95,6 @@ var styles = exports.styles = function styles(theme) {
             padding: 10,
             color: theme.palette.neutral.normal
         },
-        menuItemSortable: {
-            paddingLeft: 8
-        },
         menuItemFilter: (0, _extends3.default)({}, theme.typography.body1, {
             color: theme.palette.neutral.dark,
             fontWeight: theme.typography.fontWeightMedium,
@@ -299,7 +296,7 @@ var ColumnFilter = function (_React$Component) {
                 ),
                 !!sortable && _react2.default.createElement(
                     'div',
-                    { className: classes.menuItemSortable },
+                    null,
                     _react2.default.createElement(
                         _MenuItem2.default,
                         {

package/HiTable/HeaderCell.js

@@ -9,6 +9,10 @@ var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
 
 var _defineProperty3 = _interopRequireDefault(_defineProperty2);
 
+var _stringify = require('babel-runtime/core-js/json/stringify');
+
+var _stringify2 = _interopRequireDefault(_stringify);
+
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -150,21 +154,22 @@ var styles = exports.styles = function styles(theme) {
  * Construit une cellule d'entête avec le titre, clickable, triable et filtrable
  */
 
-var HeaderCell = function (_React$PureComponent) {
-    (0, _inherits3.default)(HeaderCell, _React$PureComponent);
+var HeaderCell = function (_React$Component) {
+    (0, _inherits3.default)(HeaderCell, _React$Component);
 
     function HeaderCell(props) {
         (0, _classCallCheck3.default)(this, HeaderCell);
 
         var _this = (0, _possibleConstructorReturn3.default)(this, (HeaderCell.__proto__ || (0, _getPrototypeOf2.default)(HeaderCell)).call(this, props));
 
+        _this.anchorEl = null;
+
         _this.onFilterClick = function (event, columnDataset) {
             _this.openFilterMenu(event, columnDataset);
         };
 
         _this.state = {
             filterOpen: false,
-            anchorEl: null,
             menuFilters: []
         };
 
@@ -177,18 +182,24 @@ var HeaderCell = function (_React$PureComponent) {
     }
 
     (0, _createClass3.default)(HeaderCell, [{
+        key: 'shouldComponentUpdate',
+        value: function shouldComponentUpdate(nextProps, nextState) {
+            return (0, _stringify2.default)(nextProps) !== (0, _stringify2.default)(this.props) || (0, _stringify2.default)(nextState) !== (0, _stringify2.default)(this.state);
+        }
+    }, {
         key: 'openFilterMenu',
         value: function openFilterMenu(event, columnDataset) {
             this.setState({
                 filterOpen: true,
-                anchorEl: event.currentTarget,
                 menuFilters: columnDataset
             });
+            this.anchorEl = event.currentTarget;
         }
     }, {
         key: 'handleClose',
         value: function handleClose() {
-            this.setState({ filterOpen: false, anchorEl: null, menuFilters: [] });
+            this.setState({ filterOpen: false, menuFilters: [] });
+            this.anchorEl = null;
         }
 
         /**
@@ -236,7 +247,6 @@ var HeaderCell = function (_React$PureComponent) {
                 translations = _props.translations;
             var _state = this.state,
                 filterOpen = _state.filterOpen,
-                anchorEl = _state.anchorEl,
                 menuFilters = _state.menuFilters;
 
 
@@ -318,7 +328,6 @@ var HeaderCell = function (_React$PureComponent) {
                                     _filterable ? _this2.onFilterClick(event, filterSource) : _this2.handleSort(sortDirection === 'asc' ? 'desc' : 'asc');
                                 }
                             },
-                            align === 'right' && _icons,
                             _react2.default.createElement(
                                 'span',
                                 {
@@ -326,7 +335,7 @@ var HeaderCell = function (_React$PureComponent) {
                                 },
                                 view !== 's' ? title : smallTitle || title
                             ),
-                            align !== 'right' && _icons
+                            _icons
                         ) : _react2.default.createElement(
                             'div',
                             {
@@ -353,7 +362,7 @@ var HeaderCell = function (_React$PureComponent) {
                     filterValueList: menuFilters,
                     isOpen: filterOpen,
                     onClose: this.handleClose,
-                    anchorEl: anchorEl,
+                    anchorEl: this.anchorEl,
                     sortable: sortable,
                     onSort: this.handleSort,
                     onFilterChange: this.handleFilterChange,
@@ -363,7 +372,7 @@ var HeaderCell = function (_React$PureComponent) {
         }
     }]);
     return HeaderCell;
-}(_react2.default.PureComponent);
+}(_react2.default.Component);
 
 HeaderCell.defaultProps = {
     selectable: false,
@@ -375,7 +384,8 @@ HeaderCell.defaultProps = {
     dense: false,
     fixedColumnWidth: true,
     sticky: true,
-    padding: 8
+    padding: 8,
+    translations: {}
 };
 HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
     /**

package/HiTable/HiStickyRow.js

@@ -9,6 +9,10 @@ var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
 
 var _defineProperty3 = _interopRequireDefault(_defineProperty2);
 
+var _stringify = require('babel-runtime/core-js/json/stringify');
+
+var _stringify2 = _interopRequireDefault(_stringify);
+
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -138,6 +142,11 @@ var HiStickyRow = function (_React$PureComponent) {
     }
 
     (0, _createClass3.default)(HiStickyRow, [{
+        key: 'shouldComponentUpdate',
+        value: function shouldComponentUpdate(nextProps, nextState) {
+            return (0, _stringify2.default)(this.props) !== (0, _stringify2.default)(nextProps) || (0, _stringify2.default)(this.state) !== (0, _stringify2.default)(nextState);
+        }
+    }, {
         key: 'render',
         value: function render() {
             var _this2 = this;
@@ -189,18 +198,24 @@ var HiStickyRow = function (_React$PureComponent) {
                             className: 'stickyRowContent',
                             style: {
                                 position: 'relative',
-                                top: dense ? 3 : 2
+                                top: dense ? 3 : 2,
+                                display: 'flex',
+                                alignItems: 'center'
                             }
                         },
                         _react2.default.createElement(
-                            'span',
-                            { id: 'sticky-label', className: classes.label },
-                            label
-                        ),
-                        _react2.default.createElement(
-                            'span',
-                            { id: 'sticky-badge', style: { position: 'relative' } },
-                            _react2.default.createElement(_HiChip2.default, { label: length, classes: { root: classes.badgeRoot } })
+                            'div',
+                            null,
+                            _react2.default.createElement(
+                                'span',
+                                { id: 'sticky-label', className: classes.label },
+                                label
+                            ),
+                            _react2.default.createElement(
+                                'span',
+                                { id: 'sticky-badge', style: { position: 'relative' } },
+                                _react2.default.createElement(_HiChip2.default, { label: length, classes: { root: classes.badgeRoot } })
+                            )
                         ),
                         _react2.default.createElement(
                             _Button2.default,
@@ -287,10 +302,6 @@ HiStickyRow.propTypes = process.env.NODE_ENV !== "production" ? {
      * Objet contenant les éléments textuels du composant
      */
     translations: _propTypes2.default.object.isRequired,
-    /**
-     * Valeur de la ligne
-     */
-    value: _propTypes2.default.string,
     /**
      * Taille du tableau (L/M/S),
      * définit l'espace entre les cellules et leurs tailles par default

package/HiTable/HiTable.js

@@ -221,27 +221,9 @@ var HiTable = function (_React$Component) {
 
         _this.state = {
             dateUpdate: Date.now(),
-            isScrollToBottom: false,
-            groupByIds: {}
+            isScrollToBottom: false
         };
 
-        // create associative array (object) with sticky row key & its values
-        // => used for sticky row badges
-        if (props.groupBy) {
-            props.dataSource.map(function (row) {
-                var value = row.datas[props.groupBy].value;
-                var date = new Date(value);
-
-                if (date instanceof Date && isFinite(date)) {
-                    value = value.substr(0, 10);
-                }
-                if (!_this.state.groupByIds.hasOwnProperty(value)) {
-                    _this.state.groupByIds[value] = [];
-                }
-                _this.state.groupByIds[value].push(row.datas);
-            });
-        }
-
         // Orderable
         _this.openOrderColumnsMenu = _this.openOrderColumnsMenu.bind(_this);
         _this.closeOrderColumnsMenu = _this.closeOrderColumnsMenu.bind(_this);
@@ -313,8 +295,6 @@ var HiTable = function (_React$Component) {
     }, {
         key: 'componentDidUpdate',
         value: function componentDidUpdate(prevProps, prevState, prevContext) {
-            var _this2 = this;
-
             this.wrapperScrollOffset = this.wrapperDiv.scrollWidth - this.wrapperDiv.offsetWidth;
 
             // If orderedColumns has change, possibly the sticky cells has changed too
@@ -342,28 +322,10 @@ var HiTable = function (_React$Component) {
             // Only if needed
             if (this.props.dataSource.length > prevProps.dataSource.length || this.props.dense !== prevProps.dense || this.props.sortedColumnId !== prevProps.sortedColumnId || this.props.sortDirection !== prevProps.sortDirection) {
                 this.updateStickyRowsPosition();
-                if (this.props.dataSource.length > prevProps.dataSource.length) {
+                if (this.props.dataSource.length !== prevProps.dataSource.length) {
                     this.handleStickyRowPositions();
                 }
             }
-            if (this.props.dataSource.length > prevProps.dataSource.length && this.props.groupBy) {
-                // create associative array (object) with sticky row key & its values
-                // => used for sticky row badges
-                var groupByIds = {};
-                this.props.dataSource.map(function (row) {
-                    var value = row.datas[_this2.props.groupBy].value;
-                    var date = new Date(value);
-
-                    if (date instanceof Date && isFinite(date)) {
-                        value = value.substr(0, 10);
-                    }
-                    if (!groupByIds.hasOwnProperty(value)) {
-                        groupByIds[value] = [];
-                    }
-                    groupByIds[value].push(row.datas);
-                });
-                this.setState({ groupByIds: groupByIds });
-            }
 
             this.isScrollToBottom(this.scrollTop === this.tBody.scrollHeight - this.tBody.offsetHeight);
 
@@ -375,7 +337,7 @@ var HiTable = function (_React$Component) {
     }, {
         key: 'updateStickyRowsPosition',
         value: function updateStickyRowsPosition() {
-            var _this3 = this;
+            var _this2 = this;
 
             var rowHeight = this.props.dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT;
             this.groupByRowsPositions = [];
@@ -384,7 +346,7 @@ var HiTable = function (_React$Component) {
             var stickyRows = tableBody.getElementsByClassName('stickyGroupBy');
             if (stickyRows.length > 0) {
                 Array.prototype.filter.call(stickyRows, function (stickyRow) {
-                    _this3.groupByRowsPositions.push(stickyRow.nextSibling.nextSibling.offsetTop - rowHeight);
+                    _this2.groupByRowsPositions.push(stickyRow.nextSibling.nextSibling.offsetTop - rowHeight);
                 });
             }
         }
@@ -509,7 +471,7 @@ var HiTable = function (_React$Component) {
     }, {
         key: 'handleStickyRowPositions',
         value: function handleStickyRowPositions() {
-            var _this4 = this;
+            var _this3 = this;
 
             var tableBody = document.getElementById(this.props.tabId + '-body');
             var stickyRows = tableBody.getElementsByClassName('stickyGroupBy');
@@ -517,14 +479,14 @@ var HiTable = function (_React$Component) {
             if (stickyRows.length > 0) {
                 Array.prototype.filter.call(stickyRows, function (stickyRow, index) {
                     var fakeTr = stickyRow.nextSibling;
-                    if (tableBody.scrollTop > _this4.groupByRowsPositions[index]) {
+                    if (tableBody.scrollTop > _this3.groupByRowsPositions[index]) {
                         // Calcul de la position du 'pinned' item
                         // positionnement juste en dessous du header
                         if (typeof stickyRows[index + 1] === 'undefined' || tableBody.scrollTop < stickyRows[index + 1].offsetTop) {
                             // Si la prochaine ligne est aussi un 'pinned' item,
                             // il pousse le précédent vers le haut
-                            if (typeof _this4.groupByRowsPositions[index + 1] !== 'undefined' && _this4.groupByRowsPositions[index + 1] - tableBody.scrollTop < rowHeight - 10) {
-                                stickyRow.style.top = tableBody.scrollTop + _this4.groupByRowsPositions[index + 1] - tableBody.scrollTop - rowHeight + '\n                                px';
+                            if (typeof _this3.groupByRowsPositions[index + 1] !== 'undefined' && _this3.groupByRowsPositions[index + 1] - tableBody.scrollTop < rowHeight - 10) {
+                                stickyRow.style.top = tableBody.scrollTop + _this3.groupByRowsPositions[index + 1] - tableBody.scrollTop - rowHeight + '\n                                px';
                             } else {
                                 stickyRow.style.top = tableBody.scrollTop + 'px';
                             }
@@ -533,13 +495,13 @@ var HiTable = function (_React$Component) {
                                 // Repositionnement des éléments dans une row en position absolute
                                 stickyRow.style.position = 'absolute';
                                 fakeTr.style.display = 'inline-block';
-                                stickyRow.style.height = _this4.props.dense ? cst.CELL_HEIGHT_DENSE - 8 + 'px' : cst.CELL_HEIGHT - 8 + 'px';
-                                stickyRow.querySelector('button').style.maxHeight = _this4.props.dense ? cst.CELL_HEIGHT_DENSE - 16 + 'px' : cst.CELL_HEIGHT - 16 + 'px';
-                                stickyRow.querySelector('button').style.minHeight = _this4.props.dense ? cst.CELL_HEIGHT_DENSE - 16 + 'px' : cst.CELL_HEIGHT - 16 + 'px';
+                                stickyRow.style.height = _this3.props.dense ? cst.CELL_HEIGHT_DENSE - 8 + 'px' : cst.CELL_HEIGHT - 8 + 'px';
+                                stickyRow.querySelector('button').style.maxHeight = _this3.props.dense ? cst.CELL_HEIGHT_DENSE - 16 + 'px' : cst.CELL_HEIGHT - 16 + 'px';
+                                stickyRow.querySelector('button').style.minHeight = _this3.props.dense ? cst.CELL_HEIGHT_DENSE - 16 + 'px' : cst.CELL_HEIGHT - 16 + 'px';
                                 stickyRow.querySelector('button').style.top = '-3px';
-                                stickyRow.querySelector('#stickyRowContent').style.top = !_this4.props.dense ? '4px' : '-3px';
-                                stickyRow.querySelector('td').style.height = _this4.props.dense ? cst.CELL_HEIGHT_DENSE - 8 + 'px' : cst.CELL_HEIGHT - 8 + 'px';
-                                if (_this4.props.dense) {
+                                stickyRow.querySelector('#stickyRowContent').style.top = !_this3.props.dense ? '4px' : '-3px';
+                                stickyRow.querySelector('td').style.height = _this3.props.dense ? cst.CELL_HEIGHT_DENSE - 8 + 'px' : cst.CELL_HEIGHT - 8 + 'px';
+                                if (_this3.props.dense) {
                                     stickyRow.querySelector('button').style.top = '0px';
                                     stickyRow.querySelector('button span').style.position = 'relative';
                                     stickyRow.querySelector('button span').style.top = '-4px';
@@ -551,13 +513,13 @@ var HiTable = function (_React$Component) {
                         stickyRow.style.position = 'relative';
                         stickyRow.style.top = '0px';
                         fakeTr.style.display = 'none';
-                        stickyRow.style.height = _this4.props.dense ? cst.CELL_HEIGHT_DENSE + 'px' : cst.CELL_HEIGHT + 'px';
+                        stickyRow.style.height = _this3.props.dense ? cst.CELL_HEIGHT_DENSE + 'px' : cst.CELL_HEIGHT + 'px';
                         stickyRow.querySelector('#sticky-badge').style.top = '0px';
                         stickyRow.querySelector('#stickyRowContent').style.top = '2px';
-                        stickyRow.querySelector('td').style.height = _this4.props.dense ? cst.CELL_HEIGHT_DENSE + 'px' : cst.CELL_HEIGHT + 'px';
-                        stickyRow.querySelector('button').style.maxHeight = _this4.props.dense ? cst.CELL_HEIGHT_DENSE - 2 + 'px' : cst.CELL_HEIGHT - 8 + 'px';
-                        stickyRow.querySelector('button').style.minHeight = _this4.props.dense ? cst.CELL_HEIGHT_DENSE - 2 + 'px' : cst.CELL_HEIGHT - 8 + 'px';
-                        if (_this4.props.dense) {
+                        stickyRow.querySelector('td').style.height = _this3.props.dense ? cst.CELL_HEIGHT_DENSE + 'px' : cst.CELL_HEIGHT + 'px';
+                        stickyRow.querySelector('button').style.maxHeight = _this3.props.dense ? cst.CELL_HEIGHT_DENSE - 2 + 'px' : cst.CELL_HEIGHT - 8 + 'px';
+                        stickyRow.querySelector('button').style.minHeight = _this3.props.dense ? cst.CELL_HEIGHT_DENSE - 2 + 'px' : cst.CELL_HEIGHT - 8 + 'px';
+                        if (_this3.props.dense) {
                             stickyRow.querySelector('button span').style.top = '0px';
                         }
                     }
@@ -572,7 +534,7 @@ var HiTable = function (_React$Component) {
     }, {
         key: 'placeHorizontalFloatingElement',
         value: function placeHorizontalFloatingElement() {
-            var _this5 = this;
+            var _this4 = this;
 
             // live datas notification
             if (this.liveDataSpan) {
@@ -581,7 +543,7 @@ var HiTable = function (_React$Component) {
 
             // Replace left padding cells
             [].concat((0, _toConsumableArray3.default)(this.tBodyLeftPaddingElements), [this.tHeadLeftPadding]).forEach(function (element) {
-                element.style.left = _this5.scrollLeft + 'px';
+                element.style.left = _this4.scrollLeft + 'px';
             });
 
             // TODO - FIX
@@ -590,15 +552,15 @@ var HiTable = function (_React$Component) {
 
             // Replace right padding cells
             [].concat((0, _toConsumableArray3.default)(this.tBodyRightPaddingElements), [this.tHeadRightPadding]).forEach(function (element) {
-                element.style.right = Math.max(0, _this5.wrapperScrollOffset - _this5.scrollLeft - _this5.tBodyScrollbarWidth) + 'px';
+                element.style.right = Math.max(0, _this4.wrapperScrollOffset - _this4.scrollLeft - _this4.tBodyScrollbarWidth) + 'px';
             });
 
             // Replace first cells & add right shadows
             if (this.props.sticky) {
                 var shadowRight = '1px 0px 0px 0px rgba(128, 128, 128, 0.32)';
                 [].concat((0, _toConsumableArray3.default)(this.tBodyFirstElements), [this.tHeadFirst]).forEach(function (element) {
-                    element.style.left = _this5.scrollLeft + 'px';
-                    element.style['box-shadow'] = _this5.scrollLeft > 0 ? shadowRight : 'none';
+                    element.style.left = _this4.scrollLeft + 'px';
+                    element.style['box-shadow'] = _this4.scrollLeft > 0 ? shadowRight : 'none';
                 });
             }
 
@@ -612,7 +574,7 @@ var HiTable = function (_React$Component) {
             var stickyRowContentDiv = tableBody.getElementsByClassName('stickyRowContent');
             if (stickyRowContentDiv.length > 0) {
                 Array.prototype.filter.call(stickyRowContentDiv, function (div) {
-                    div.style.left = _this5.wrapperDiv.scrollLeft + (_this5.props.selectable ? 25 : 0) + 'px';
+                    div.style.left = _this4.wrapperDiv.scrollLeft + (_this4.props.selectable ? 25 : 0) + 'px';
                 });
             }
         }
@@ -677,7 +639,7 @@ var HiTable = function (_React$Component) {
     }, {
         key: 'render',
         value: function render() {
-            var _this6 = this;
+            var _this5 = this;
 
             var _props = this.props,
                 classes = _props.classes,
@@ -717,8 +679,7 @@ var HiTable = function (_React$Component) {
                 detailRowsOptions = _props.detailRowsOptions;
             var _state = this.state,
                 dateUpdate = _state.dateUpdate,
-                isScrollToBottom = _state.isScrollToBottom,
-                groupByIds = _state.groupByIds;
+                isScrollToBottom = _state.isScrollToBottom;
 
 
             var headerHeight = dense ? cst.CELL_HEADER_HEIGHT_DENSE : cst.CELL_HEADER_HEIGHT;
@@ -739,7 +700,7 @@ var HiTable = function (_React$Component) {
                         id: tabId,
                         className: classes.tableWrapper,
                         ref: function ref(div) {
-                            return _this6.wrapperDiv = div;
+                            return _this5.wrapperDiv = div;
                         },
                         onScroll: this.handleHorizontalScroll
                     },
@@ -796,7 +757,6 @@ var HiTable = function (_React$Component) {
                             translations: translations.tableBody,
                             groupBy: groupBy,
                             onClickNext: this.handleNextStickyRow,
-                            groupByIds: groupByIds,
                             lookupColumns: lookupColumns,
                             loading: loading,
                             fixedColumnWidth: fixedColumnWidth,
@@ -822,6 +782,7 @@ var HiTable = function (_React$Component) {
                     ),
                     _react2.default.createElement(_HiTableContextMenu2.default, {
                         tabId: tabId,
+                        columns: columns,
                         onSearch: this.props.onSearch,
                         onRedirect: this.props.onRedirect
                     }),
@@ -835,7 +796,7 @@ var HiTable = function (_React$Component) {
                                 color: 'primary',
                                 className: classes.backToTopButton,
                                 onClick: function onClick() {
-                                    return _this6.scrollToTop();
+                                    return _this5.scrollToTop();
                                 }
                             },
                             _react2.default.createElement(_ArrowUp2.default, { className: classes.backToTopButtonArrow }),