@hipay/hipay-material-ui 1.0.0-beta.1

package/HiTable/HiTable.js

@@ -0,0 +1,1012 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.SORTED_COLUMN_ERROR_MESSAGE = exports.MANDATORY_COLUMN_ERROR_MESSAGE = exports.styles = undefined;
+
+var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
+
+var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _Table = require('material-ui/Table');
+
+var _Table2 = _interopRequireDefault(_Table);
+
+var _ArrowUp = require('mdi-material-ui/ArrowUp');
+
+var _ArrowUp2 = _interopRequireDefault(_ArrowUp);
+
+var _reactProptypeConditionalRequire = require('react-proptype-conditional-require');
+
+var _reactProptypeConditionalRequire2 = _interopRequireDefault(_reactProptypeConditionalRequire);
+
+var _HiButton = require('../HiButton');
+
+var _HiButton2 = _interopRequireDefault(_HiButton);
+
+var _styles = require('../styles');
+
+var _HiTableHead = require('./HiTableHead');
+
+var _HiTableHead2 = _interopRequireDefault(_HiTableHead);
+
+var _HiTableBody = require('./HiTableBody');
+
+var _HiTableBody2 = _interopRequireDefault(_HiTableBody);
+
+var _HiTableFooterScroll = require('./HiTableFooterScroll');
+
+var _HiTableFooterScroll2 = _interopRequireDefault(_HiTableFooterScroll);
+
+var _constants = require('./constants');
+
+var cst = _interopRequireWildcard(_constants);
+
+var _HiTableContextMenu = require('./HiTableContextMenu');
+
+var _HiTableContextMenu2 = _interopRequireDefault(_HiTableContextMenu);
+
+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 }; }
+
+var styles = exports.styles = function styles(theme) {
+    return {
+        root: {
+            position: 'relative',
+            backgroundColor: theme.palette.background3
+        },
+        tableWrapper: {
+            overflowX: 'auto',
+            overflowY: 'hidden'
+        },
+        filter: {
+            position: 'relative',
+            top: 2,
+            left: 2,
+            cursor: 'pointer'
+        },
+        table: {
+            position: 'relative',
+            width: '100%',
+            overflow: 'hidden',
+            borderCollapse: 'collapse',
+            backgroundColor: theme.palette.background3,
+            zIndex: 10
+        },
+        backToTopButtonContainer: {
+            position: 'absolute',
+            width: '100%',
+            textAlign: 'center',
+            height: 48,
+            top: -99999
+        },
+        backToTopButton: {
+            zIndex: 11
+        },
+        backToTopButtonArrow: {
+            height: 18,
+            width: 18,
+            position: 'relative',
+            top: -2,
+            margin: 2
+        }
+    };
+};
+
+var MANDATORY_COLUMN_ERROR_MESSAGE = exports.MANDATORY_COLUMN_ERROR_MESSAGE = 'Vous devez saisir la propriété "mandatoryColumnId" pour les tableaux "orderable"';
+var SORTED_COLUMN_ERROR_MESSAGE = exports.SORTED_COLUMN_ERROR_MESSAGE = 'Vous devez saisir la propriété "sortedColumnId" pour les tableaux "sortable"';
+
+/**
+ * Display a list of elements in a table
+ * The click on FilterVariant opens a menu that allows the user
+ * to filter by value or to order by a specific column
+ *
+ * Renderer behaviors:
+ * - Widths:
+ *      - all cells types have default width size (px) for each kind of view (L/M/S).
+ *      - if view isn't set we use the largest one (large).
+ *      - cell width can be overriden by column's props.
+ *      - if there is not enough space to render all cells,
+ *        we use horizontal scroll and cells width are fixed
+ *      - if there is enough space, no scroll and only the first cell (column),
+ *      which is not explicitly set as unfixed (fixedWidth = false),
+ *      has not fixed width and may enlarge his width to fit available space.
+ *
+ * - Fixed Header:
+ *      - header rows should be fixed and always be visible on body scroll.
+ *      - vertical scrollbar should be hidden
+ *      - if nbRows * cellHeight > tableHeight,
+ *        we virtually enlarge the table then crop arbitrary width to hide the scrollbar.
+ *      as each browsers may have different scrollbar widths,
+ *      it may trouble column header alignment.
+ */
+
+var _ref = _react2.default.createElement('div', null);
+
+var _ref2 = _react2.default.createElement('div', null);
+
+var _ref3 = _react2.default.createElement('div', null);
+
+var _ref4 = _react2.default.createElement('div', null);
+
+var _ref5 = _react2.default.createElement('div', null);
+
+var _ref6 = _react2.default.createElement('div', null);
+
+var _ref7 = _react2.default.createElement('div', null);
+
+var _ref8 = _react2.default.createElement('div', null);
+
+var HiTable = function (_React$Component) {
+    (0, _inherits3.default)(HiTable, _React$Component);
+
+    function HiTable(props) {
+        (0, _classCallCheck3.default)(this, HiTable);
+
+        var _this = (0, _possibleConstructorReturn3.default)(this, (HiTable.__proto__ || (0, _getPrototypeOf2.default)(HiTable)).call(this, props));
+
+        _this.wrapperDiv = _ref;
+        _this.wrapperWidth = 0;
+        _this.tHead = _ref2;
+        _this.tHeadLeftPadding = _ref3;
+        _this.tHeadRightPadding = _ref4;
+        _this.tHeadFirst = _ref5;
+        _this.tBody = _ref6;
+        _this.tBodyScrollbarWidth = 0;
+        _this.tBodyLeftPaddingElements = [];
+        _this.tBodyRightPaddingElements = [];
+        _this.tBodyFirstElements = [];
+        _this.tFoot = _ref7;
+        _this.tFootCenteredDiv = _ref8;
+        _this.backToTopButton = null;
+        _this.liveDataSpan = null;
+        _this.scrollTop = 0;
+        _this.scrollLeft = 0;
+        _this.groupByRowsPositions = [];
+
+        _this.updateFloatingBodyElementRefs = function () {
+            _this.tBodyScrollbarWidth = _this.tBody.offsetWidth - _this.tBody.clientWidth;
+
+            if (_this.tHead && _this.tBodyScrollbarWidth > 0) {
+                _this.tHead.style.width = 'calc(100% - ' + _this.tBodyScrollbarWidth + 'px)';
+            }
+
+            _this.tBodyLeftPaddingElements = _this.tBody.querySelectorAll('tr td:nth-child(1), .floating-parent-row-label');
+            _this.tBodyRightPaddingElements = _this.tBody.querySelectorAll('tr td:nth-last-child(1), .floating-parent-row-indicator');
+
+            _this.tBodyFirstElements = _this.tBody.querySelectorAll('tr td:nth-child(2)');
+        };
+
+        _this.addNewRowRefs = function () {
+            // delayed refs getting to let time at new rows to build up
+            setTimeout(function () {
+                _this.updateFloatingBodyElementRefs();
+                _this.placeHorizontalFloatingElement();
+            }, 10);
+        };
+
+        _this.state = {
+            dateUpdate: Date.now(),
+            isScrollToBottom: false,
+            groupByIds: {}
+        };
+
+        // 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);
+
+        // Selectable
+        _this.toggleItem = _this.toggleItem.bind(_this);
+        _this.toggleAll = _this.toggleAll.bind(_this);
+        _this.selectAll = _this.selectAll.bind(_this);
+        _this.deselectAll = _this.deselectAll.bind(_this);
+
+        // Manage scrolling
+        _this.handleHorizontalScroll = _this.handleHorizontalScroll.bind(_this);
+        _this.handleVerticalScroll = _this.handleVerticalScroll.bind(_this);
+        _this.placeHorizontalFloatingElement = _this.placeHorizontalFloatingElement.bind(_this);
+        _this.scrollToTop = _this.scrollToTop.bind(_this);
+
+        _this.isScrollToBottom = _this.isScrollToBottom.bind(_this);
+        _this.handleRequestLiveDatas = _this.handleRequestLiveDatas.bind(_this);
+        _this.handleNextStickyRow = _this.handleNextStickyRow.bind(_this);
+        _this.handleStickyRowPositions = _this.handleStickyRowPositions.bind(_this);
+        return _this;
+    }
+
+    /**
+     * DOM references
+     * use to replace element on horizontal & vertical scroll
+     */
+
+
+    (0, _createClass3.default)(HiTable, [{
+        key: 'componentDidMount',
+
+
+        /** Lifecycle methods */
+
+        value: function componentDidMount() {
+            this.wrapperScrollOffset = this.wrapperDiv.scrollWidth - this.wrapperDiv.offsetWidth;
+
+            // Set DOM references
+            this.tHead = this.wrapperDiv.querySelector('table thead');
+            this.tHeadLeftPadding = this.tHead.querySelector('tr th:nth-child(1)');
+            this.tHeadRightPadding = this.tHead.querySelector('tr th:nth-last-child(1)');
+            this.tHeadFirst = this.tHead.querySelector('tr th:nth-child(2)');
+            this.tBody = this.wrapperDiv.querySelector('table tbody');
+            this.tFoot = this.wrapperDiv.querySelector('table tfoot');
+            this.tFootCenteredDiv = this.wrapperDiv.querySelector('table tfoot tr td div');
+            this.backToTopButton = this.wrapperDiv.querySelector('.back-to-top-button');
+
+            this.updateFloatingBodyElementRefs();
+
+            // Detect if root has horizontal scroll bar
+            if (this.wrapperDiv.scrollWidth > this.wrapperDiv.offsetWidth) {
+                // adapt first column to fixed width
+                if (this.tHeadFirst && this.tHeadFirst.style) {
+                    this.tHeadFirst.style.width = 'auto';
+                }
+                // fixed footer width
+                if (this.tFootCenteredDiv && this.tFootCenteredDiv.style) {
+                    this.tFootCenteredDiv.style.width = Math.round(this.wrapperDiv.offsetWidth / 2) + 'px';
+                    this.tFootCenteredDiv.style.position = 'absolute';
+                    this.tFootCenteredDiv.style.bottom = '0px';
+                }
+            }
+
+            this.updateStickyRowsPosition();
+
+            this.placeHorizontalFloatingElement();
+        }
+    }, {
+        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
+            if (this.props.orderedColumns[0].colId !== prevProps.orderedColumns[0].colId) {
+                this.tHeadFirst = this.tHead.querySelector('tr th:nth-child(2)');
+                this.tBodyFirstElements = this.wrapperDiv.querySelectorAll('table tbody tr td:nth-child(2)');
+            }
+
+            // If there is new rows, update tbody first element list and left padding cells
+            if (this.props.dataSource.length > prevProps.dataSource.length) {
+                this.updateFloatingBodyElementRefs();
+            }
+
+            if (this.props.countLiveDatas > 0) {
+                this.liveDataSpan = this.tHead.querySelector('tr:nth-child(2) th span');
+                this.backToTopButton.style.top = '-99999px';
+            }
+
+            if (prevProps.countLiveDatas > this.props.countLiveDatas) {
+                this.setState({
+                    dateUpdate: Date.now()
+                });
+            }
+
+            // 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) {
+                    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);
+
+            this.placeHorizontalFloatingElement();
+        }
+
+        /**    END Lifecycle methods   */
+
+    }, {
+        key: 'updateStickyRowsPosition',
+        value: function updateStickyRowsPosition() {
+            var _this3 = this;
+
+            var rowHeight = this.props.dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT;
+            this.groupByRowsPositions = [];
+            // Initialize new stickyRows position
+            var tableBody = document.getElementById(this.props.tabId + '-body');
+            var stickyRows = tableBody.getElementsByClassName('stickyGroupBy');
+            if (stickyRows.length > 0) {
+                Array.prototype.filter.call(stickyRows, function (stickyRow) {
+                    _this3.groupByRowsPositions.push(stickyRow.nextSibling.nextSibling.offsetTop - rowHeight);
+                });
+            }
+        }
+    }, {
+        key: 'isScrollToBottom',
+        value: function isScrollToBottom(value) {
+            if (this.state.isScrollToBottom !== value) {
+                this.setState({
+                    isScrollToBottom: value
+                });
+            }
+        }
+
+        /**
+         * Ajoute / Supprime l'id de l'item du selectedIdList
+         * @param item
+         */
+
+    }, {
+        key: 'toggleItem',
+        value: function toggleItem(item) {
+            if (this.props.selectedIdList.includes(item.rowId)) {
+                this.props.onSelect(this.props.selectedIdList.filter(function (itemId) {
+                    return itemId !== item.rowId;
+                }));
+            } else {
+                this.props.onSelect([].concat((0, _toConsumableArray3.default)(this.props.selectedIdList), [item.rowId]));
+            }
+        }
+
+        /**
+         * Sélectionne / Déselectionne tous les éléments en fonction de l'état de la liste
+         */
+
+    }, {
+        key: 'toggleAll',
+        value: function toggleAll() {
+            if (this.props.selectedIdList.length === this.props.dataSource.length) {
+                this.deselectAll();
+            } else {
+                this.selectAll();
+            }
+        }
+
+        /**
+         * Sélectionne tous les items
+         */
+
+    }, {
+        key: 'selectAll',
+        value: function selectAll() {
+            this.props.onSelect(this.props.dataSource.map(function (item) {
+                return item.rowId;
+            }));
+        }
+
+        /**
+         * Désélectionne tous les items
+         */
+
+    }, {
+        key: 'deselectAll',
+        value: function deselectAll() {
+            this.props.onSelect([]);
+        }
+
+        /**
+         * Handle horizontal scroll (wrapperDiv)
+         * - replace each first cells body & header & add right shadows
+         */
+
+    }, {
+        key: 'handleHorizontalScroll',
+        value: function handleHorizontalScroll(event) {
+            // cancel if scroll is from tbody OR it didn't change
+            if (event.target.nodeName === 'TBODY' || this.scrollLeft === event.target.scrollLeft) {
+                return;
+            }
+
+            this.scrollLeft = event.target.scrollLeft;
+
+            // Replace live datas notification
+            this.placeHorizontalFloatingElement();
+        }
+
+        /**
+         * Handle vertical scroll (tbody)
+         * - add bottom shadow
+         * - place back to top button
+         * - request next datas if reach bottom
+         */
+
+    }, {
+        key: 'handleVerticalScroll',
+        value: function handleVerticalScroll(event) {
+            // cancel if scroll is not from tbody OR it didn't change
+            if (event.target.nodeName !== 'TBODY' || this.scrollTop === event.target.scrollTop) return;
+
+            var scrollingUp = this.scrollTop > event.target.scrollTop;
+
+            this.scrollTop = event.target.scrollTop;
+
+            // Add bottom shadow to header row
+            var shadowBottom = '0px 0px 2px 0px rgba(128, 128, 128, 0.32)';
+            this.tHead.style['box-shadow'] = this.scrollTop > 0 ? shadowBottom : 'none';
+            var rowHeight = this.props.dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT;
+
+            // Add back to top button when scrolling up from constant defined scroll point
+            // if there not live data notification
+            if (this.props.countLiveDatas === 0) {
+                if (scrollingUp && this.scrollTop >= cst.NB_ROWS_BACK_TO_TOP * rowHeight) {
+                    this.backToTopButton.style.top = rowHeight * 1.5 + ' px';
+                } else {
+                    this.backToTopButton.style.top = -99999 + 'px';
+                }
+            }
+
+            this.handleStickyRowPositions();
+
+            this.isScrollToBottom(this.scrollTop === event.target.scrollHeight - this.tBody.offsetHeight);
+        }
+    }, {
+        key: 'handleStickyRowPositions',
+        value: function handleStickyRowPositions() {
+            var _this4 = this;
+
+            var tableBody = document.getElementById(this.props.tabId + '-body');
+            var stickyRows = tableBody.getElementsByClassName('stickyGroupBy');
+            var rowHeight = this.props.dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT;
+            if (stickyRows.length > 0) {
+                Array.prototype.filter.call(stickyRows, function (stickyRow, index) {
+                    var fakeTr = stickyRow.nextSibling;
+                    if (tableBody.scrollTop > _this4.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';
+                            } else {
+                                stickyRow.style.top = tableBody.scrollTop + 'px';
+                            }
+
+                            if (stickyRow.style.position !== 'absolute') {
+                                // 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.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('button').style.top = '0px';
+                                    stickyRow.querySelector('button span').style.position = 'relative';
+                                    stickyRow.querySelector('button span').style.top = '-4px';
+                                }
+                            }
+                        }
+                    } else if (stickyRow.style.position !== 'relative') {
+                        // Repositionnement normal
+                        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.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('button span').style.top = '0px';
+                        }
+                    }
+                });
+            }
+        }
+
+        /**
+         * Some element must be replace "manually"
+         */
+
+    }, {
+        key: 'placeHorizontalFloatingElement',
+        value: function placeHorizontalFloatingElement() {
+            var _this5 = this;
+
+            // live datas notification
+            if (this.liveDataSpan) {
+                this.liveDataSpan.style.left = this.wrapperDiv.clientWidth / 2 - 100 + this.scrollLeft + 'px';
+            }
+
+            // Replace left padding cells
+            [].concat((0, _toConsumableArray3.default)(this.tBodyLeftPaddingElements), [this.tHeadLeftPadding]).forEach(function (element) {
+                element.style.left = _this5.scrollLeft + 'px';
+            });
+
+            // TODO - FIX
+            // Les éléments de droite sont décalés de 22px lorsque de nouvelles lignes sont
+            // visible (children ou details)
+
+            // 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';
+            });
+
+            // 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';
+                });
+            }
+
+            // Replace centered elements (elements width should be 50% of wrapper)
+            if (this.tFootCenteredDiv) {
+                this.tFootCenteredDiv.style.left = Math.round(this.wrapperDiv.offsetWidth / 4) + this.scrollLeft + 'px';
+            }
+
+            // Replace stickyRowContent
+            var tableBody = document.getElementById(this.props.tabId + '-body');
+            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';
+                });
+            }
+        }
+    }, {
+        key: 'handleRequestLiveDatas',
+        value: function handleRequestLiveDatas() {
+            this.scrollToTop();
+            this.props.requestLiveDatas();
+        }
+
+        /**
+         * Scroll back to table top
+         */
+
+    }, {
+        key: 'scrollToTop',
+        value: function scrollToTop() {
+            // Hide back to top button
+            this.backToTopButton['style'].top = -99999 + 'px';
+
+            // Set scroll top to 0
+            this.tBody.scrollTop = 0;
+            this.scrollTop = 0;
+        }
+    }, {
+        key: 'openOrderColumnsMenu',
+        value: function openOrderColumnsMenu(event) {
+            this.setState({
+                orderColumnsAnchor: event.currentTarget,
+                orderColumnsMenuOpen: true
+            });
+        }
+    }, {
+        key: 'closeOrderColumnsMenu',
+        value: function closeOrderColumnsMenu() {
+            this.setState({
+                orderColumnsAnchor: null,
+                orderColumnsMenuOpen: false
+            });
+        }
+
+        /**
+         * This function is pass to table body to be advised when new rows are dynamically added (ex detail rows)
+         * we can then update our list of floating body elements refs
+         **/
+
+    }, {
+        key: 'handleNextStickyRow',
+
+
+        /**
+         * Scroll jusqu'au prochain stickRow
+         *
+         * @param stickyRowIndex
+         */
+        value: function handleNextStickyRow(stickyRowIndex) {
+            if (this.groupByRowsPositions.length - 1 > stickyRowIndex) {
+                var tableBody = document.getElementById(this.props.tabId + '-body');
+                tableBody.scrollTop = this.groupByRowsPositions[stickyRowIndex + 1];
+            }
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _this6 = this;
+
+            var _props = this.props,
+                classes = _props.classes,
+                tabId = _props.tabId,
+                columns = _props.columns,
+                orderedColumns = _props.orderedColumns,
+                dataSource = _props.dataSource,
+                orderable = _props.orderable,
+                onColumnsOrderUpdate = _props.onColumnsOrderUpdate,
+                mandatoryColumnId = _props.mandatoryColumnId,
+                selectable = _props.selectable,
+                selectedIdList = _props.selectedIdList,
+                onRowClick = _props.onRowClick,
+                sortable = _props.sortable,
+                sortedColumnId = _props.sortedColumnId,
+                sortDirection = _props.sortDirection,
+                onSort = _props.onSort,
+                filterable = _props.filterable,
+                onFilterChange = _props.onFilterChange,
+                infiniteScroll = _props.infiniteScroll,
+                hasNextDatas = _props.hasNextDatas,
+                requestNextDatas = _props.requestNextDatas,
+                countLiveDatas = _props.countLiveDatas,
+                dateLocale = _props.dateLocale,
+                numberLocale = _props.numberLocale,
+                dense = _props.dense,
+                height = _props.height,
+                sticky = _props.sticky,
+                translations = _props.translations,
+                view = _props.view,
+                groupBy = _props.groupBy,
+                lookupColumns = _props.lookupColumns;
+            var _state = this.state,
+                dateUpdate = _state.dateUpdate,
+                isScrollToBottom = _state.isScrollToBottom,
+                groupByIds = _state.groupByIds;
+
+
+            var headerHeight = dense ? cst.CELL_HEADER_HEIGHT_DENSE : cst.CELL_HEADER_HEIGHT;
+
+            return _react2.default.createElement(
+                'div',
+                { className: classes.root },
+                _react2.default.createElement(
+                    'div',
+                    {
+                        id: tabId,
+                        className: classes.tableWrapper,
+                        ref: function ref(div) {
+                            return _this6.wrapperDiv = div;
+                        },
+                        onScroll: this.handleHorizontalScroll
+                    },
+                    _react2.default.createElement(
+                        _Table2.default,
+                        { className: classes.table, style: { height: height } },
+                        _react2.default.createElement(_HiTableHead2.default, {
+                            columns: columns,
+                            orderedColumns: orderedColumns,
+                            dataSource: dataSource,
+                            selectable: selectable,
+                            selectedIdList: selectedIdList,
+                            onSelect: this.toggleAll,
+                            sortable: sortable,
+                            sortedColumnId: sortedColumnId,
+                            sortDirection: sortDirection,
+                            onSort: onSort,
+                            filterable: filterable,
+                            onFilterChange: onFilterChange,
+                            orderable: orderable,
+                            onColumnsOrderUpdate: onColumnsOrderUpdate,
+                            mandatoryColumnId: mandatoryColumnId,
+                            onRequestLiveDatas: this.handleRequestLiveDatas,
+                            countLiveDatas: countLiveDatas,
+                            dateLocale: dateLocale,
+                            numberLocale: numberLocale,
+                            dense: dense,
+                            height: headerHeight,
+                            sticky: sticky,
+                            view: view,
+                            translations: translations,
+                            lookupColumns: lookupColumns
+                        }),
+                        _react2.default.createElement(_HiTableBody2.default, {
+                            tabId: tabId,
+                            columns: columns,
+                            orderedColumns: orderedColumns,
+                            dataSource: dataSource,
+                            selectable: selectable,
+                            selectedIdList: selectedIdList,
+                            sortedColumnId: sortedColumnId,
+                            onSelect: this.toggleItem,
+                            dateUpdate: dateUpdate,
+                            dateLocale: dateLocale,
+                            numberLocale: numberLocale,
+                            dense: dense,
+                            height: height - headerHeight,
+                            sticky: sticky,
+                            view: view,
+                            onRowClick: onRowClick,
+                            onScroll: this.handleVerticalScroll,
+                            addNewRowRefs: this.addNewRowRefs,
+                            translations: translations,
+                            groupBy: groupBy,
+                            onClickNext: this.handleNextStickyRow,
+                            groupByIds: groupByIds,
+                            lookupColumns: lookupColumns
+                        }),
+                        infiniteScroll && _react2.default.createElement(_HiTableFooterScroll2.default, {
+                            tabId: tabId,
+                            hasNextDatas: hasNextDatas,
+                            requestNextDatas: requestNextDatas,
+                            maxAutoRequest: 3,
+                            isScrollToBottom: isScrollToBottom,
+                            translations: translations
+                        })
+                    ),
+                    _react2.default.createElement(_HiTableContextMenu2.default, {
+                        tabId: tabId,
+                        onSearch: this.props.onSearch,
+                        onRedirect: this.props.onRedirect
+                    }),
+                    _react2.default.createElement(
+                        'div',
+                        { className: 'back-to-top-button ' + classes.backToTopButtonContainer },
+                        _react2.default.createElement(
+                            _HiButton2.default,
+                            {
+                                raised: true,
+                                color: 'primary',
+                                className: classes.backToTopButton,
+                                onClick: function onClick() {
+                                    return _this6.scrollToTop();
+                                }
+                            },
+                            _react2.default.createElement(_ArrowUp2.default, { className: classes.backToTopButtonArrow }),
+                            translations.back_to_top,
+                            _react2.default.createElement(_ArrowUp2.default, { className: classes.backToTopButtonArrow })
+                        )
+                    )
+                )
+            );
+        }
+    }]);
+    return HiTable;
+}(_react2.default.Component);
+
+HiTable.defaultProps = {
+    orderable: false,
+    selectable: false,
+    sortable: true,
+    sortDirection: 'asc',
+    filterable: true,
+    infiniteScroll: false,
+    hasNextDatas: false,
+    countLiveDatas: 0,
+    dateLocale: 'en-EN',
+    numberLocale: 'en-EN',
+    dense: false,
+    height: 450,
+    sticky: true,
+    translations: {
+        load_more: 'Load More',
+        back_to_top: 'Back to top',
+        get_the_n_new_items: 'See %s new items',
+        choose_and_organize_columns: 'Choose & organize columns',
+        search: 'Search',
+        time: 'Time',
+        stickyRow: {
+            button: {
+                next: 'Next day'
+            }
+        }
+    },
+    view: 'l',
+    lookupColumns: []
+};
+HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
+    /**
+     * Useful to extend the style applied to components.
+     */
+    classes: _propTypes2.default.object,
+    /**
+     * Colonnes du tableau (label, largeur, données, ... )
+     */
+    columns: _propTypes2.default.object.isRequired,
+    /**
+     * Nombre de nouvelles données disponibles (live)
+     */
+    countLiveDatas: _propTypes2.default.number,
+    /**
+     * Tableau des données
+     */
+    dataSource: _propTypes2.default.array.isRequired,
+    /**
+     * Locale utilisé pour le format des dates
+     */
+    dateLocale: _propTypes2.default.string,
+    /**
+     * Densité d'affichage (joue sur la hauteur des lignes)
+     */
+    dense: _propTypes2.default.bool,
+    /**
+     * Active le filtre sur les colonnes filtrables
+     */
+    filterable: _propTypes2.default.bool,
+    /**
+     * Ajoute le loader et le requestNextDatas en fin de tableau (si infiniteScroll activé)
+     */
+    hasNextDatas: _propTypes2.default.bool,
+    /**
+     * Hauteur du tableau (px)
+     */
+    height: _propTypes2.default.number,
+    /**
+     * Ajoute l'infinite scroll
+     */
+    infiniteScroll: _propTypes2.default.bool,
+    /**
+     * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
+     */
+    lookupColumns: _propTypes2.default.array,
+    /**
+     * Pour les tableaux "orderable" uniquement : Id de la colonne obligatoire,
+     * elle sera toujours affichée dans le tableau et ne pourra pas être cachée.
+     */
+    mandatoryColumnId: (0, _reactProptypeConditionalRequire2.default)(_propTypes2.default.string, function (props) {
+        return props.hasOwnProperty('orderable') && props.orderable === true;
+    }, MANDATORY_COLUMN_ERROR_MESSAGE),
+    /**
+     * Locale utilisé pour le format des nombres
+     */
+    numberLocale: _propTypes2.default.string,
+    /**
+     * Fonction de callback qui prend en paramètre le tableau des colonnes mis à jour.
+     */
+    onColumnsOrderUpdate: _propTypes2.default.func,
+    /**
+     * Fonction de callback sur le filtre d'une colonne
+     * Passe l'id de la colonne et la liste des id des éléments inclus
+     */
+    onFilterChange: _propTypes2.default.func,
+    /**
+     * Fonction de callback appelée au clic sur l'item redirection
+     * du menu contextuel ouvert au clic droit
+     *
+     * @param {int} id
+     */
+    onRedirect: _propTypes2.default.func,
+    /**
+     * Fonction de callback au click sur une ligne
+     * Passe l'element (row)
+     */
+    onRowClick: _propTypes2.default.func,
+    /**
+     * Fonction de callback appelée au clic sur les items de recherche
+     * du menu contextuel ouvert au clic droit
+     *
+     * @param {string} searched field
+     * @param {string} searched value
+     * @param {string} search type (lookup, exclude)
+     */
+    onSearch: _propTypes2.default.func,
+    /**
+     * Fonction de callback sur la sélection d'une ligne
+     * (ou sélection/déselection de tous dans le header)
+     * Passe la liste des id des lignes sélectionnées (selectedIdList)
+     */
+    onSelect: _propTypes2.default.func,
+    /**
+     * Fonction de callback sur le tri d'une colonne
+     * Passe l'id de la colonne et la direction du tri (ou false si tri par défaut)
+     */
+    onSort: _propTypes2.default.func,
+    /**
+     * L'utilisateur peut changer l'ordre des colonnes,
+     * les afficher ou non, et changer la vue de chaque colonne (small, medium, large).
+     */
+    orderable: _propTypes2.default.bool,
+    /**
+     * Tableau des colonnes affichées (ordonnées, visibles/cachées, l/m/s)
+     */
+    orderedColumns: _propTypes2.default.array.isRequired,
+    /**
+     * Fonction de callback requérant l'affichage des nouvelles données (live)
+     */
+    requestLiveDatas: _propTypes2.default.func,
+    /**
+     * Fonction de callback requérant l'affichage des données suivantes
+     */
+    requestNextDatas: _propTypes2.default.func,
+    /**
+     * [v2 - à venir] Les lignes sont sélectionnables (affichage d'une checkbox)
+     */
+    selectable: _propTypes2.default.bool,
+    /**
+     * Liste des id des lignes sélectionnées
+     */
+    selectedIdList: _propTypes2.default.array,
+    /**
+     * Active le tri sur les colonnes
+     */
+    sortable: _propTypes2.default.bool,
+    /**
+     * Sens du tri
+     */
+    sortDirection: _propTypes2.default.oneOf(['asc', 'desc']),
+    /**
+     * Id de la colonne trié
+     */
+    sortedColumnId: (0, _reactProptypeConditionalRequire2.default)(_propTypes2.default.string, function (props) {
+        return props.hasOwnProperty('sortable') && props.sortable === true;
+    }, SORTED_COLUMN_ERROR_MESSAGE),
+    /**
+     * Fixe la première colonne
+     */
+    sticky: _propTypes2.default.bool,
+    /**
+     * Identifiant unique à spécifier si on utilise plusieurs composants HiTable
+     */
+    tabId: _propTypes2.default.string.isRequired,
+    /**
+     * Traduction des chaînes affichées
+     */
+    translations: _propTypes2.default.object,
+    /**
+     * Taille du tableau (L/M/S),
+     * définit l'espace entre les cellules et leurs tailles par default
+     */
+    view: _propTypes2.default.oneOf(['l', 'm', 's']),
+    /**
+     * Id de la colonne par laquelle sont regroupé les éléments
+     */
+    groupBy: _propTypes2.default.string
+} : {};
+exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiHiTable' })(HiTable);