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

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 }),

package/HiTable/HiTableBody.js

@@ -5,6 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
+var _values = require('babel-runtime/core-js/object/values');
+
+var _values2 = _interopRequireDefault(_values);
+
+var _stringify = require('babel-runtime/core-js/json/stringify');
+
+var _stringify2 = _interopRequireDefault(_stringify);
+
 var _defineProperty2 = require('babel-runtime/helpers/defineProperty');
 
 var _defineProperty3 = _interopRequireDefault(_defineProperty2);
@@ -51,6 +59,12 @@ var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
 
+var _moment = require('moment');
+
+var _moment2 = _interopRequireDefault(_moment);
+
+require('moment/locale/fr');
+
 var _styles = require('../styles');
 
 var _BodyRow = require('./BodyRow');
@@ -69,6 +83,10 @@ var _constants = require('./constants');
 
 var cst = _interopRequireWildcard(_constants);
 
+var _lodash = require('lodash');
+
+var _ = _interopRequireWildcard(_lodash);
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -132,7 +150,7 @@ var HiTableBody = function (_React$Component) {
     function HiTableBody(props) {
         (0, _classCallCheck3.default)(this, HiTableBody);
 
-        var _this = (0, _possibleConstructorReturn3.default)(this, (HiTableBody.__proto__ || (0, _getPrototypeOf2.default)(HiTableBody)).call(this));
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiTableBody.__proto__ || (0, _getPrototypeOf2.default)(HiTableBody)).call(this, props));
 
         _this.buildIndicator = function (row) {
             var _this$props = _this.props,
@@ -165,17 +183,52 @@ var HiTableBody = function (_React$Component) {
 
         _this.state = {
             openedParentRowId: null,
-            openedDetailsRowIdList: []
+            openedDetailsRowIdList: [],
+            dataSource: props.dataSource,
+            groupByIds: {}
         };
 
+        if (props.groupBy && props.dataSource) {
+            var groupByIds = {};
+            props.dataSource.map(function (row) {
+                var value = row.datas[props.groupBy].value;
+                if (!groupByIds.hasOwnProperty(value)) {
+                    groupByIds[value] = [];
+                }
+                groupByIds[value].push(row.datas);
+            });
+            _this.state.groupByIds = groupByIds;
+        }
+
         _this.buildIndicator = _this.buildIndicator.bind(_this);
         _this.setOpenedParentRowId = _this.setOpenedParentRowId.bind(_this);
         _this.toggleOpenedDetailsRowId = _this.toggleOpenedDetailsRowId.bind(_this);
         _this.positionStickyRowNextButton = _this.positionStickyRowNextButton.bind(_this);
+
+        //Monkeypatch TableRow
+        /*var that = this;
+        TableRow.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState){
+          return (this.state.hovered !== nextState.hovered || this.props.selected !== nextProps.selected) && true;
+        }*/
         return _this;
     }
 
     (0, _createClass3.default)(HiTableBody, [{
+        key: 'deepCompare',
+        value: function deepCompare(object, base) {
+            var that = this;
+            return _.transform(object, function (result, value, key) {
+                if (!_.isEqual(value, base[key])) {
+                    result[key] = _.isObject(value) && _.isObject(base[key]) ? that.deepCompare(value, base[key]) : value;
+                }
+            }).length > 0;
+        }
+
+        /*shouldComponentUpdate(nextProps, nextState){
+          this.deepCompare(this.props,nextProps) || this.deepCompare(this.state,nextState);
+        }*/
+
+    }, {
         key: 'componentDidMount',
         value: function componentDidMount() {
             this.positionStickyRowNextButton();
@@ -185,6 +238,9 @@ var HiTableBody = function (_React$Component) {
         value: function componentDidUpdate(prevProps, prevState, prevContext) {
             this.positionStickyRowNextButton();
         }
+    }, {
+        key: 'setOpenedParentRowId',
+
 
         /**
          * Définit l'id de la ligne parente "ouverte" ou null
@@ -193,9 +249,6 @@ var HiTableBody = function (_React$Component) {
          *
          * @param row
          */
-
-    }, {
-        key: 'setOpenedParentRowId',
         value: function setOpenedParentRowId(row) {
             this.setState(function (prevState) {
                 return {
@@ -225,7 +278,7 @@ var HiTableBody = function (_React$Component) {
                             }
                             button.parentElement.style.top = '4px';
                         }
-                        var label = button.previousSibling.previousSibling;
+                        var label = button.previousSibling;
                         button.style.left = tableContainer.offsetWidth - label.offsetWidth - 48 - 160 + 'px';
                     }
                 });
@@ -272,7 +325,6 @@ var HiTableBody = function (_React$Component) {
                 tabId = _props.tabId,
                 columns = _props.columns,
                 orderedColumns = _props.orderedColumns,
-                dataSource = _props.dataSource,
                 onRowClick = _props.onRowClick,
                 selectable = _props.selectable,
                 onSelect = _props.onSelect,
@@ -287,7 +339,6 @@ var HiTableBody = function (_React$Component) {
                 translations = _props.translations,
                 dateLocale = _props.dateLocale,
                 numberLocale = _props.numberLocale,
-                groupByIds = _props.groupByIds,
                 sortedColumnId = _props.sortedColumnId,
                 lookupColumns = _props.lookupColumns,
                 loading = _props.loading,
@@ -296,7 +347,9 @@ var HiTableBody = function (_React$Component) {
                 detailRowsOptions = _props.detailRowsOptions;
             var _state = this.state,
                 openedParentRowId = _state.openedParentRowId,
-                openedDetailsRowIdList = _state.openedDetailsRowIdList;
+                openedDetailsRowIdList = _state.openedDetailsRowIdList,
+                groupByIds = _state.groupByIds,
+                dataSource = _state.dataSource;
 
 
             var nbColumnsDisplayed = 0;
@@ -315,31 +368,21 @@ var HiTableBody = function (_React$Component) {
                 // Gestion du sticky group by
                 if (typeof groupBy !== 'undefined' && groupBy === sortedColumnId) {
                     var currentGroupByValue = row.datas[groupBy].value;
-                    var date = new Date(currentGroupByValue);
-                    if (date instanceof Date && isFinite(date)) {
-                        currentGroupByValue = currentGroupByValue.substr(0, 10);
-                    }
+
                     // TODO => condition for other columns type
                     if (columns[groupBy].type === cst.TYPE_DATE) {
-                        if (index === 0 || currentGroupByValue !== stickyRowValue) {
-                            stickyRowValue = currentGroupByValue;
-                            var label = stickyRowValue;
-                            if (date instanceof Date && isFinite(date)) {
-                                label = new Date(label);
-                                var options = {
-                                    year: 'numeric',
-                                    month: 'long',
-                                    weekday: 'long',
-                                    day: 'numeric'
-                                };
-                                label = label.toLocaleString(dateLocale, options);
-                                label = label.charAt(0).toUpperCase() + label.substr(1);
-                            }
+
+                        _moment2.default.locale(dateLocale);
+                        var date = (0, _moment2.default)(currentGroupByValue);
+                        var label = date.format('dddd D MMMM YYYY');
+
+                        if (index === 0 || label !== stickyRowValue) {
+
+                            stickyRowValue = label;
 
                             tableRows.push(_react2.default.createElement(_HiStickyRow2.default, {
                                 key: 'sticky_row_' + row.rowId,
                                 dense: dense,
-                                value: stickyRowValue,
                                 label: label,
                                 length: groupByIds[currentGroupByValue].length,
                                 colSpan: nbColumnsDisplayed,
@@ -424,7 +467,9 @@ var HiTableBody = function (_React$Component) {
                                     sticky: sticky,
                                     isDetail: true,
                                     fixedColumnWidth: fixedColumnWidth,
-                                    disableContextMenu: disableContextMenu
+                                    disableContextMenu: disableContextMenu,
+                                    dateLocale: dateLocale,
+                                    numberLocale: numberLocale
                                 };
 
                                 tableRows.push(_react2.default.createElement(_BodyRow2.default, (0, _extends3.default)({ key: row.rowId + '-' + detailRow.rowId }, detailRowProps)));
@@ -453,6 +498,31 @@ var HiTableBody = function (_React$Component) {
                 })
             );
         }
+    }], [{
+        key: 'getDerivedStateFromProps',
+        value: function getDerivedStateFromProps(props, state) {
+            var nextState = {};
+            if (props.groupBy && props.dataSource && props.dataSource.length > 0) {
+                if ((0, _stringify2.default)(props.dataSource) !== (0, _stringify2.default)(state.dataSource)) {
+                    var groupByIds = {};
+                    props.dataSource.map(function (row) {
+                        var value = row.datas[props.groupBy].value;
+                        if (!groupByIds.hasOwnProperty(value)) {
+                            groupByIds[value] = [];
+                        }
+                        groupByIds[value].push(row.datas);
+                    });
+                    nextState.groupByIds = groupByIds;
+                }
+            }
+            if ((0, _stringify2.default)(props.dataSource) !== (0, _stringify2.default)(state.dataSource)) {
+                nextState.dataSource = props.dataSource;
+            }
+            if ((0, _values2.default)(nextState).length > 0) {
+                return nextState;
+            }
+            return null;
+        }
     }]);
     return HiTableBody;
 }(_react2.default.Component);