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

package/es/HiTable/HiTable.js

@@ -0,0 +1,876 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Table from 'material-ui/Table';
+import ArrowUp from 'mdi-material-ui/ArrowUp';
+import isRequiredIf from 'react-proptype-conditional-require';
+import HiButton from '../HiButton';
+
+import { withStyles, withTheme } from '../styles';
+import HiTableHead from './HiTableHead';
+import HiTableBody from './HiTableBody';
+import HiTableFooterScroll from './HiTableFooterScroll';
+import * as cst from './constants';
+import HiTableContextMenu from './HiTableContextMenu';
+
+export const styles = theme => ({
+    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
+    }
+});
+
+export const MANDATORY_COLUMN_ERROR_MESSAGE = 'Vous devez saisir la propriété "mandatoryColumnId" pour les tableaux "orderable"';
+export const 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 = React.createElement('div', null);
+
+var _ref2 = React.createElement('div', null);
+
+var _ref3 = React.createElement('div', null);
+
+var _ref4 = React.createElement('div', null);
+
+var _ref5 = React.createElement('div', null);
+
+var _ref6 = React.createElement('div', null);
+
+var _ref7 = React.createElement('div', null);
+
+var _ref8 = React.createElement('div', null);
+
+class HiTable extends React.Component {
+
+    constructor(props) {
+        super(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 = () => {
+            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 = () => {
+            // delayed refs getting to let time at new rows to build up
+            setTimeout(() => {
+                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(row => {
+                let value = row.datas[props.groupBy].value;
+                let 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);
+    }
+
+    /**
+     * DOM references
+     * use to replace element on horizontal & vertical scroll
+     */
+
+
+    /** Lifecycle methods */
+
+    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();
+    }
+
+    componentDidUpdate(prevProps, prevState, prevContext) {
+        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
+            let groupByIds = {};
+            this.props.dataSource.map(row => {
+                let value = row.datas[this.props.groupBy].value;
+                let 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   */
+
+    updateStickyRowsPosition() {
+        const rowHeight = this.props.dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT;
+        this.groupByRowsPositions = [];
+        // Initialize new stickyRows position
+        const tableBody = document.getElementById(`${this.props.tabId}-body`);
+        const stickyRows = tableBody.getElementsByClassName('stickyGroupBy');
+        if (stickyRows.length > 0) {
+            Array.prototype.filter.call(stickyRows, stickyRow => {
+                this.groupByRowsPositions.push(stickyRow.nextSibling.nextSibling.offsetTop - rowHeight);
+            });
+        }
+    }
+
+    isScrollToBottom(value) {
+        if (this.state.isScrollToBottom !== value) {
+            this.setState({
+                isScrollToBottom: value
+            });
+        }
+    }
+
+    /**
+     * Ajoute / Supprime l'id de l'item du selectedIdList
+     * @param item
+     */
+    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([...this.props.selectedIdList, item.rowId]);
+        }
+    }
+
+    /**
+     * Sélectionne / Déselectionne tous les éléments en fonction de l'état de la liste
+     */
+    toggleAll() {
+        if (this.props.selectedIdList.length === this.props.dataSource.length) {
+            this.deselectAll();
+        } else {
+            this.selectAll();
+        }
+    }
+
+    /**
+     * Sélectionne tous les items
+     */
+    selectAll() {
+        this.props.onSelect(this.props.dataSource.map(item => item.rowId));
+    }
+
+    /**
+     * Désélectionne tous les items
+     */
+    deselectAll() {
+        this.props.onSelect([]);
+    }
+
+    /**
+     * Handle horizontal scroll (wrapperDiv)
+     * - replace each first cells body & header & add right shadows
+     */
+    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
+     */
+    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;
+
+        const scrollingUp = this.scrollTop > event.target.scrollTop;
+
+        this.scrollTop = event.target.scrollTop;
+
+        // Add bottom shadow to header row
+        const shadowBottom = '0px 0px 2px 0px rgba(128, 128, 128, 0.32)';
+        this.tHead.style['box-shadow'] = this.scrollTop > 0 ? shadowBottom : 'none';
+        const 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);
+    }
+
+    handleStickyRowPositions() {
+        const tableBody = document.getElementById(`${this.props.tabId}-body`);
+        const stickyRows = tableBody.getElementsByClassName('stickyGroupBy');
+        const rowHeight = this.props.dense ? cst.CELL_HEIGHT_DENSE : cst.CELL_HEIGHT;
+        if (stickyRows.length > 0) {
+            Array.prototype.filter.call(stickyRows, (stickyRow, index) => {
+                const fakeTr = stickyRow.nextSibling;
+                if (tableBody.scrollTop > this.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 this.groupByRowsPositions[index + 1] !== 'undefined' && this.groupByRowsPositions[index + 1] - tableBody.scrollTop < rowHeight - 10) {
+                            stickyRow.style.top = `${tableBody.scrollTop + this.groupByRowsPositions[index + 1] - tableBody.scrollTop - rowHeight}
+                                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 = this.props.dense ? `${cst.CELL_HEIGHT_DENSE - 8}px` : `${cst.CELL_HEIGHT - 8}px`;
+                            stickyRow.querySelector('button').style.maxHeight = this.props.dense ? `${cst.CELL_HEIGHT_DENSE - 16}px` : `${cst.CELL_HEIGHT - 16}px`;
+                            stickyRow.querySelector('button').style.minHeight = this.props.dense ? `${cst.CELL_HEIGHT_DENSE - 16}px` : `${cst.CELL_HEIGHT - 16}px`;
+                            stickyRow.querySelector('button').style.top = '-3px';
+                            stickyRow.querySelector('#stickyRowContent').style.top = !this.props.dense ? '4px' : '-3px';
+                            stickyRow.querySelector('td').style.height = this.props.dense ? `${cst.CELL_HEIGHT_DENSE - 8}px` : `${cst.CELL_HEIGHT - 8}px`;
+                            if (this.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 = this.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 = this.props.dense ? `${cst.CELL_HEIGHT_DENSE}px` : `${cst.CELL_HEIGHT}px`;
+                    stickyRow.querySelector('button').style.maxHeight = this.props.dense ? `${cst.CELL_HEIGHT_DENSE - 2}px` : `${cst.CELL_HEIGHT - 8}px`;
+                    stickyRow.querySelector('button').style.minHeight = this.props.dense ? `${cst.CELL_HEIGHT_DENSE - 2}px` : `${cst.CELL_HEIGHT - 8}px`;
+                    if (this.props.dense) {
+                        stickyRow.querySelector('button span').style.top = '0px';
+                    }
+                }
+            });
+        }
+    }
+
+    /**
+     * Some element must be replace "manually"
+     */
+    placeHorizontalFloatingElement() {
+        // live datas notification
+        if (this.liveDataSpan) {
+            this.liveDataSpan.style.left = this.wrapperDiv.clientWidth / 2 - 100 + this.scrollLeft + 'px';
+        }
+
+        // Replace left padding cells
+        [...this.tBodyLeftPaddingElements, this.tHeadLeftPadding].forEach(element => {
+            element.style.left = this.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
+        [...this.tBodyRightPaddingElements, this.tHeadRightPadding].forEach(element => {
+            element.style.right = Math.max(0, this.wrapperScrollOffset - this.scrollLeft - this.tBodyScrollbarWidth) + 'px';
+        });
+
+        // Replace first cells & add right shadows
+        if (this.props.sticky) {
+            const shadowRight = '1px 0px 0px 0px rgba(128, 128, 128, 0.32)';
+            [...this.tBodyFirstElements, this.tHeadFirst].forEach(element => {
+                element.style.left = this.scrollLeft + 'px';
+                element.style['box-shadow'] = this.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
+        const tableBody = document.getElementById(`${this.props.tabId}-body`);
+        const stickyRowContentDiv = tableBody.getElementsByClassName('stickyRowContent');
+        if (stickyRowContentDiv.length > 0) {
+            Array.prototype.filter.call(stickyRowContentDiv, div => {
+                div.style.left = `${this.wrapperDiv.scrollLeft + (this.props.selectable ? 25 : 0)}px`;
+            });
+        }
+    }
+
+    handleRequestLiveDatas() {
+        this.scrollToTop();
+        this.props.requestLiveDatas();
+    }
+
+    /**
+     * Scroll back to table top
+     */
+    scrollToTop() {
+        // Hide back to top button
+        this.backToTopButton['style'].top = -99999 + 'px';
+
+        // Set scroll top to 0
+        this.tBody.scrollTop = 0;
+        this.scrollTop = 0;
+    }
+
+    openOrderColumnsMenu(event) {
+        this.setState({
+            orderColumnsAnchor: event.currentTarget,
+            orderColumnsMenuOpen: true
+        });
+    }
+
+    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
+     **/
+
+
+    /**
+     * Scroll jusqu'au prochain stickRow
+     *
+     * @param stickyRowIndex
+     */
+    handleNextStickyRow(stickyRowIndex) {
+        if (this.groupByRowsPositions.length - 1 > stickyRowIndex) {
+            const tableBody = document.getElementById(`${this.props.tabId}-body`);
+            tableBody.scrollTop = this.groupByRowsPositions[stickyRowIndex + 1];
+        }
+    }
+
+    render() {
+        const {
+            classes,
+            tabId,
+            columns,
+            orderedColumns,
+            dataSource,
+            orderable,
+            onColumnsOrderUpdate,
+            mandatoryColumnId,
+            selectable,
+            selectedIdList,
+            onRowClick,
+            sortable,
+            sortedColumnId,
+            sortDirection,
+            onSort,
+            filterable,
+            onFilterChange,
+            infiniteScroll,
+            hasNextDatas,
+            requestNextDatas,
+            countLiveDatas,
+            dateLocale,
+            numberLocale,
+            dense,
+            height,
+            sticky,
+            translations,
+            view,
+            groupBy,
+            lookupColumns
+        } = this.props;
+
+        const { dateUpdate, isScrollToBottom, groupByIds } = this.state;
+
+        const headerHeight = dense ? cst.CELL_HEADER_HEIGHT_DENSE : cst.CELL_HEADER_HEIGHT;
+
+        return React.createElement(
+            'div',
+            { className: classes.root },
+            React.createElement(
+                'div',
+                {
+                    id: tabId,
+                    className: classes.tableWrapper,
+                    ref: div => this.wrapperDiv = div,
+                    onScroll: this.handleHorizontalScroll
+                },
+                React.createElement(
+                    Table,
+                    { className: classes.table, style: { height: height } },
+                    React.createElement(HiTableHead, {
+                        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
+                    }),
+                    React.createElement(HiTableBody, {
+                        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 && React.createElement(HiTableFooterScroll, {
+                        tabId: tabId,
+                        hasNextDatas: hasNextDatas,
+                        requestNextDatas: requestNextDatas,
+                        maxAutoRequest: 3,
+                        isScrollToBottom: isScrollToBottom,
+                        translations: translations
+                    })
+                ),
+                React.createElement(HiTableContextMenu, {
+                    tabId: tabId,
+                    onSearch: this.props.onSearch,
+                    onRedirect: this.props.onRedirect
+                }),
+                React.createElement(
+                    'div',
+                    { className: `back-to-top-button ${classes.backToTopButtonContainer}` },
+                    React.createElement(
+                        HiButton,
+                        {
+                            raised: true,
+                            color: 'primary',
+                            className: classes.backToTopButton,
+                            onClick: () => this.scrollToTop()
+                        },
+                        React.createElement(ArrowUp, { className: classes.backToTopButtonArrow }),
+                        translations.back_to_top,
+                        React.createElement(ArrowUp, { className: classes.backToTopButtonArrow })
+                    )
+                )
+            )
+        );
+    }
+}
+
+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: PropTypes.object,
+    /**
+     * Colonnes du tableau (label, largeur, données, ... )
+     */
+    columns: PropTypes.object.isRequired,
+    /**
+     * Nombre de nouvelles données disponibles (live)
+     */
+    countLiveDatas: PropTypes.number,
+    /**
+     * Tableau des données
+     */
+    dataSource: PropTypes.array.isRequired,
+    /**
+     * Locale utilisé pour le format des dates
+     */
+    dateLocale: PropTypes.string,
+    /**
+     * Densité d'affichage (joue sur la hauteur des lignes)
+     */
+    dense: PropTypes.bool,
+    /**
+     * Active le filtre sur les colonnes filtrables
+     */
+    filterable: PropTypes.bool,
+    /**
+     * Ajoute le loader et le requestNextDatas en fin de tableau (si infiniteScroll activé)
+     */
+    hasNextDatas: PropTypes.bool,
+    /**
+     * Hauteur du tableau (px)
+     */
+    height: PropTypes.number,
+    /**
+     * Ajoute l'infinite scroll
+     */
+    infiniteScroll: PropTypes.bool,
+    /**
+     * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
+     */
+    lookupColumns: PropTypes.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: isRequiredIf(PropTypes.string, props => props.hasOwnProperty('orderable') && props.orderable === true, MANDATORY_COLUMN_ERROR_MESSAGE),
+    /**
+     * Locale utilisé pour le format des nombres
+     */
+    numberLocale: PropTypes.string,
+    /**
+     * Fonction de callback qui prend en paramètre le tableau des colonnes mis à jour.
+     */
+    onColumnsOrderUpdate: PropTypes.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: PropTypes.func,
+    /**
+     * Fonction de callback appelée au clic sur l'item redirection
+     * du menu contextuel ouvert au clic droit
+     *
+     * @param {int} id
+     */
+    onRedirect: PropTypes.func,
+    /**
+     * Fonction de callback au click sur une ligne
+     * Passe l'element (row)
+     */
+    onRowClick: PropTypes.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: PropTypes.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: PropTypes.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: PropTypes.func,
+    /**
+     * L'utilisateur peut changer l'ordre des colonnes,
+     * les afficher ou non, et changer la vue de chaque colonne (small, medium, large).
+     */
+    orderable: PropTypes.bool,
+    /**
+     * Tableau des colonnes affichées (ordonnées, visibles/cachées, l/m/s)
+     */
+    orderedColumns: PropTypes.array.isRequired,
+    /**
+     * Fonction de callback requérant l'affichage des nouvelles données (live)
+     */
+    requestLiveDatas: PropTypes.func,
+    /**
+     * Fonction de callback requérant l'affichage des données suivantes
+     */
+    requestNextDatas: PropTypes.func,
+    /**
+     * [v2 - à venir] Les lignes sont sélectionnables (affichage d'une checkbox)
+     */
+    selectable: PropTypes.bool,
+    /**
+     * Liste des id des lignes sélectionnées
+     */
+    selectedIdList: PropTypes.array,
+    /**
+     * Active le tri sur les colonnes
+     */
+    sortable: PropTypes.bool,
+    /**
+     * Sens du tri
+     */
+    sortDirection: PropTypes.oneOf(['asc', 'desc']),
+    /**
+     * Id de la colonne trié
+     */
+    sortedColumnId: isRequiredIf(PropTypes.string, props => props.hasOwnProperty('sortable') && props.sortable === true, SORTED_COLUMN_ERROR_MESSAGE),
+    /**
+     * Fixe la première colonne
+     */
+    sticky: PropTypes.bool,
+    /**
+     * Identifiant unique à spécifier si on utilise plusieurs composants HiTable
+     */
+    tabId: PropTypes.string.isRequired,
+    /**
+     * Traduction des chaînes affichées
+     */
+    translations: PropTypes.object,
+    /**
+     * Taille du tableau (L/M/S),
+     * définit l'espace entre les cellules et leurs tailles par default
+     */
+    view: PropTypes.oneOf(['l', 'm', 's']),
+    /**
+     * Id de la colonne par laquelle sont regroupé les éléments
+     */
+    groupBy: PropTypes.string
+} : {};
+export default withStyles(styles, { withTheme: true, name: 'HmuiHiTable' })(HiTable);