@hipay/hipay-material-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/HiTable/BodyRow.js

@@ -112,6 +112,12 @@ var BodyRow = function (_React$PureComponent) {
 
         var _this = (0, _possibleConstructorReturn3.default)(this, (BodyRow.__proto__ || (0, _getPrototypeOf2.default)(BodyRow)).call(this));
 
+        _this.handleOpenRowDetails = function (type) {
+            return function () {
+                _this.props.onOpenRowDetails(_this.props.row.rowId, type);
+            };
+        };
+
         _this.state = {
             live: props.live,
             style: {
@@ -165,11 +171,6 @@ var BodyRow = function (_React$PureComponent) {
                 this.props.onClick(this.props.row);
             }
         }
-    }, {
-        key: 'handleOpenRowDetails',
-        value: function handleOpenRowDetails() {
-            this.props.onOpenRowDetails(this.props.row.rowId);
-        }
     }, {
         key: 'handleSelect',
         value: function handleSelect() {
@@ -185,6 +186,7 @@ var BodyRow = function (_React$PureComponent) {
                 theme = _props.theme,
                 row = _props.row,
                 columns = _props.columns,
+                lookupColumns = _props.lookupColumns,
                 orderedColumns = _props.orderedColumns,
                 selectable = _props.selectable,
                 selected = _props.selected,
@@ -196,11 +198,11 @@ var BodyRow = function (_React$PureComponent) {
                 sticky = _props.sticky,
                 innerRow = _props.innerRow,
                 isDetail = _props.isDetail,
-                other = (0, _objectWithoutProperties3.default)(_props, ['classes', 'theme', 'row', 'columns', 'orderedColumns', 'selectable', 'selected', 'onClick', 'view', 'dense', 'dateLocale', 'numberLocale', 'sticky', 'innerRow', 'isDetail']);
+                detailRowsOptions = _props.detailRowsOptions,
+                other = (0, _objectWithoutProperties3.default)(_props, ['classes', 'theme', 'row', 'columns', 'lookupColumns', 'orderedColumns', 'selectable', 'selected', 'onClick', 'view', 'dense', 'dateLocale', 'numberLocale', 'sticky', 'innerRow', 'isDetail', 'detailRowsOptions']);
             var style = this.state.style;
 
 
-            var firstCol = true;
             var unfixedCol = true;
 
             var rowStyle = (0, _extends3.default)({}, style, {
@@ -213,6 +215,19 @@ var BodyRow = function (_React$PureComponent) {
             // If there is no datas don't display the row
             if (!row.hasOwnProperty('datas')) return false;
 
+            var detailsInfos = {};
+            if (row.details && row.details.length > 0) {
+                detailsInfos = row.details.reduce(function (memo, item) {
+                    if (item.rows.length > 0 && detailRowsOptions[item.type] && detailRowsOptions[item.type].anchor) {
+                        memo[detailRowsOptions[item.type].anchor] = (0, _extends3.default)({
+                            type: item.type,
+                            total: item.rows.length
+                        }, detailRowsOptions[item.type]);
+                    }
+                    return memo;
+                }, {});
+            }
+
             return _react2.default.createElement(
                 _Table.TableRow,
                 {
@@ -230,67 +245,85 @@ var BodyRow = function (_React$PureComponent) {
                     key: row.rowId + '-left-cell',
                     className: patchDivClass
                 }),
-                orderedColumns.map(function (colRef) {
+                orderedColumns.map(function (colRef, index) {
+
+                    // Dynamic column settings (from OrderColumns)
                     var colRefId = colRef.colId,
                         displayed = colRef.displayed,
                         colView = colRef.view,
                         colRefProps = (0, _objectWithoutProperties3.default)(colRef, ['colId', 'displayed', 'view']);
 
-                    if (displayed !== false) {
-                        // the first column is sticky (except checkbox)
-                        var first = firstCol;
-                        firstCol = false;
-                        var _columns$colRef$colId = columns[colRef.colId],
-                            colId = _columns$colRef$colId.colId,
-                            align = _columns$colRef$colId.align,
-                            datas = _columns$colRef$colId.datas,
-                            ellipsis = _columns$colRef$colId.ellipsis,
-                            fixedWidth = _columns$colRef$colId.fixedWidth,
-                            type = _columns$colRef$colId.type,
-                            width = _columns$colRef$colId.width,
-                            columnProps = (0, _objectWithoutProperties3.default)(_columns$colRef$colId, ['colId', 'align', 'datas', 'ellipsis', 'fixedWidth', 'type', 'width']);
-
-                        var data = row.datas[colRef.colId];
-
-                        var effectiveView = colView || view;
-                        // add clickable badge in cell to open children
-                        var isParentAnchor = row.hasOwnProperty('parentAnchorColumn') && row.parentAnchorColumn === colId && row.hasOwnProperty('children') && row.children.length > 0;
-
-                        // the first non fixed column is the only one not fixed
-                        var unfixed = unfixedCol && fixedWidth !== true;
-                        unfixedCol = unfixedCol && fixedWidth !== true ? false : unfixedCol;
-
-                        var lookedUp = false;
-                        if (_this3.props.lookupColumns && _this3.props.lookupColumns.includes(colId)) {
-                            lookedUp = true;
-                        }
 
-                        return _react2.default.createElement(_BodyCellBuilder2.default, (0, _extends3.default)({}, other, {
-                            key: row.rowId + '-' + colId + '-cell',
-                            ukey: row.rowId + '-' + colId + '-cell',
-                            checkboxValue: row.rowId,
-                            type: type,
-                            datas: data,
-                            ellipsis: ellipsis,
-                            align: align,
-                            view: effectiveView,
-                            padding: cst.DEFAULT_PADDING[view],
-                            width: width,
-                            fixedWidth: !unfixed,
-                            sticky: sticky && first,
-                            selectable: selectable && first,
-                            dateLocale: dateLocale,
-                            numberLocale: numberLocale,
-                            dense: dense,
-                            selected: selected,
-                            onSelect: _this3.handleSelect,
-                            onOpenDetails: _this3.handleOpenRowDetails,
-                            childrenCount: isParentAnchor ? row.children.length : null,
-                            colId: colId,
-                            lookedUp: lookedUp
-                        }, columnProps, colRefProps));
+                    if (displayed === false) return null;
+
+                    // the first column is sticky (except checkbox)
+                    var first = index === 0;
+
+                    // Static column settings
+                    var _columns$colRefId = columns[colRefId],
+                        colId = _columns$colRefId.colId,
+                        align = _columns$colRefId.align,
+                        colData = _columns$colRefId.data,
+                        ellipsis = _columns$colRefId.ellipsis,
+                        fixedWidth = _columns$colRefId.fixedWidth,
+                        type = _columns$colRefId.type,
+                        width = _columns$colRefId.width,
+                        columnProps = (0, _objectWithoutProperties3.default)(_columns$colRefId, ['colId', 'align', 'data', 'ellipsis', 'fixedWidth', 'type', 'width']);
+
+                    // view define in OrderColumn or table prop view by default
+
+                    var effectiveView = colView || view;
+
+                    // add clickable badge in cell to open children
+                    var isParentAnchor = row.hasOwnProperty('parentAnchorColumn') && row.parentAnchorColumn === colId && row.hasOwnProperty('children') && row.children.length > 0;
+
+                    // the first non fixed column is the only one not fixed
+                    var unfixed = unfixedCol && fixedWidth !== true;
+                    unfixedCol = unfixed ? false : unfixedCol;
+
+                    // add lookedUp style
+                    var lookedUp = Array.isArray(lookupColumns) && lookupColumns.includes(colId);
+
+                    // Cell data
+                    var data = row.datas[colRefId];
+                    // Get object data for column based on reference datas
+                    if (data !== undefined && colData !== undefined) {
+                        var colItem = colData.find(function (item) {
+                            return item.id === data.value;
+                        });
+                        if (colItem) {
+                            // Hydrate data object with reference item
+                            data = (0, _extends3.default)({}, colItem, data);
+                        }
                     }
-                    return null;
+
+                    return _react2.default.createElement(_BodyCellBuilder2.default, (0, _extends3.default)({}, other, {
+                        key: row.rowId + '-' + colId + '-cell',
+                        ukey: row.rowId + '-' + colId + '-cell',
+                        checkboxValue: row.rowId,
+                        type: type,
+                        data: data,
+                        ellipsis: ellipsis,
+                        align: align,
+                        view: effectiveView,
+                        padding: cst.DEFAULT_PADDING[view],
+                        width: width,
+                        fixedWidth: !unfixed,
+                        sticky: sticky && first,
+                        selectable: selectable && first,
+                        dateLocale: dateLocale,
+                        numberLocale: numberLocale,
+                        dense: dense,
+                        selected: selected,
+                        onSelect: _this3.handleSelect
+                    }, detailsInfos[colId] && {
+                        onOpenDetails: _this3.handleOpenRowDetails(detailsInfos[colId].type),
+                        detailInfos: detailsInfos[colId]
+                    }, {
+                        childrenCount: isParentAnchor ? row.children.length : null,
+                        colId: colId,
+                        lookedUp: lookedUp
+                    }, columnProps, colRefProps));
                 }),
                 _react2.default.createElement(_Table.TableCell, {
                     style: {
@@ -315,7 +348,9 @@ BodyRow.defaultProps = {
     sticky: false,
     live: false,
     innerRow: false,
-    lookupColumns: []
+    lookupColumns: [],
+    fixedColumnWidth: true,
+    detailRowsOptions: {}
 };
 BodyRow.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -326,6 +361,15 @@ BodyRow.propTypes = process.env.NODE_ENV !== "production" ? {
      * Densité d'affichage (joue sur la hauteur des lignes)
      */
     dense: _propTypes2.default.bool,
+    /**
+     * Options utilisées pour décrire le comportement de lignes de détails
+     */
+    detailRowsOptions: _propTypes2.default.object,
+    /**
+     * Fixe la taille des colonnes selon le type de vue
+     * Sinon les colonnes s'adaptent à l'espace disponible
+     */
+    fixedColumnWidth: _propTypes2.default.bool,
     /**
      * Applique le style d'une ligne intégrée a un sous-tableau
      */

package/HiTable/ChildRow.js

@@ -196,7 +196,8 @@ var ChildRow = function (_React$PureComponent) {
                 dense = _props.dense,
                 sticky = _props.sticky,
                 view = _props.view,
-                other = (0, _objectWithoutProperties3.default)(_props, ['classes', 'theme', 'onClose', 'parentRowId', 'parentRowDatas', 'parentIndicatorColumn', 'parentLabel', 'parentLabelIcon', 'children', 'columns', 'orderedColumns', 'selectable', 'selected', 'dateLocale', 'dense', 'sticky', 'view']);
+                row = _props.row,
+                other = (0, _objectWithoutProperties3.default)(_props, ['classes', 'theme', 'onClose', 'parentRowId', 'parentRowDatas', 'parentIndicatorColumn', 'parentLabel', 'parentLabelIcon', 'children', 'columns', 'orderedColumns', 'selectable', 'selected', 'dateLocale', 'dense', 'sticky', 'view', 'row']);
 
 
             var indicator = '';
@@ -225,10 +226,7 @@ var ChildRow = function (_React$PureComponent) {
                         _Table.TableBody,
                         null,
                         _react2.default.createElement(_BodyRow2.default, (0, _extends3.default)({
-                            row: {
-                                rowId: parentRowId,
-                                datas: parentRowDatas
-                            },
+                            row: row,
                             selectable: selectable,
                             selected: selected,
                             columns: columns,
@@ -364,10 +362,6 @@ ChildRow.propTypes = process.env.NODE_ENV !== "production" ? {
      * Données de la ligne parente
      */
     parentRowDatas: _propTypes2.default.object.isRequired,
-    /**
-     * Ligne des détails de la ligne parente
-     */
-    parentDetailRows: _propTypes2.default.array,
     /**
      * Indicateur du sous-ensemble (en général la date)
      */

package/HiTable/ColumnFilter.js

@@ -5,6 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.styles = undefined;
 
+var _set = require('babel-runtime/core-js/set');
+
+var _set2 = _interopRequireDefault(_set);
+
 var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
 
 var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
@@ -221,9 +225,13 @@ var ColumnFilter = function (_React$Component) {
     }, {
         key: 'selectAllFilters',
         value: function selectAllFilters() {
-            this.setState({ selectedIdList: this.state.suggestions.map(function (item) {
-                    return item.id;
-                }) });
+            this.setState(function (prevState) {
+                return {
+                    selectedIdList: [].concat((0, _toConsumableArray3.default)(new _set2.default([].concat((0, _toConsumableArray3.default)(prevState.selectedIdList), (0, _toConsumableArray3.default)(prevState.suggestions.map(function (item) {
+                        return item.id;
+                    }))))))
+                };
+            });
         }
 
         /**
@@ -233,15 +241,15 @@ var ColumnFilter = function (_React$Component) {
     }, {
         key: 'deselectAllFilters',
         value: function deselectAllFilters() {
-            var _this2 = this;
-
-            var selectedIdList = this.state.selectedIdList;
-            this.state.suggestions.map(function (item) {
-                if (_this2.state.selectedIdList.includes(item.id)) {
-                    selectedIdList.splice(_this2.state.selectedIdList.indexOf(item.id), 1);
-                }
+            this.setState(function (prevState) {
+                return {
+                    selectedIdList: prevState.selectedIdList.filter(function (item) {
+                        return prevState.suggestions.find(function (suggestion) {
+                            return suggestion.id === item;
+                        }) === undefined;
+                    })
+                };
             });
-            this.setState({ selectedIdList: selectedIdList });
         }
     }, {
         key: 'handleSort',
@@ -252,7 +260,7 @@ var ColumnFilter = function (_React$Component) {
     }, {
         key: 'render',
         value: function render() {
-            var _this3 = this;
+            var _this2 = this;
 
             var _props = this.props,
                 classes = _props.classes,
@@ -345,7 +353,11 @@ var ColumnFilter = function (_React$Component) {
                 _react2.default.createElement(
                     'div',
                     { className: classes.menuItemFilter },
-                    translations.filter,
+                    _react2.default.createElement(
+                        'span',
+                        { style: { marginRight: 4 } },
+                        translations.filter
+                    ),
                     _react2.default.createElement(
                         _HiPins2.default,
                         {
@@ -382,7 +394,7 @@ var ColumnFilter = function (_React$Component) {
                     itemList: filterValueList,
                     filterPropertyList: ['label'],
                     callbackFilteredList: function callbackFilteredList(filteredList) {
-                        return _this3.setState({ suggestions: filteredList });
+                        return _this2.setState({ suggestions: filteredList });
                     },
                     placeholder: translations.search
                 }),
@@ -391,7 +403,8 @@ var ColumnFilter = function (_React$Component) {
                     itemList: suggestions,
                     selectedIdList: selectedIdList,
                     onSelect: this.toggleSelectItem,
-                    leftPadding: 28
+                    leftPadding: 28,
+                    checkbox: type !== 'icon'
                 }),
                 _react2.default.createElement(
                     'div',

package/HiTable/HeaderCell.js

@@ -215,6 +215,7 @@ var HeaderCell = function (_React$PureComponent) {
                 classes = _props.classes,
                 type = _props.type,
                 title = _props.title,
+                smallTitle = _props.smallTitle,
                 selectable = _props.selectable,
                 selected = _props.selected,
                 onSelect = _props.onSelect,
@@ -225,9 +226,8 @@ var HeaderCell = function (_React$PureComponent) {
                 filterSource = _props.filterSource,
                 view = _props.view,
                 dense = _props.dense,
-                _props$width = _props.width,
-                width = _props$width === undefined ? cst.DEFAULT_WIDTHS[type][view] : _props$width,
-                fixedWidth = _props.fixedWidth,
+                width = _props.width,
+                fixedColumnWidth = _props.fixedColumnWidth,
                 _props$align = _props.align,
                 align = _props$align === undefined ? cst.ALIGN_RIGHT_TYPES.includes(type) ? 'right' : 'left' : _props$align,
                 sticky = _props.sticky,
@@ -242,7 +242,7 @@ var HeaderCell = function (_React$PureComponent) {
             var offset = selectable ? dense ? 32 : 40 : padding;
 
             // Inclue le padding et/ou la checkbox dans la largeur de la cellule
-            var _width = width + offset + padding;
+            var _width = (width || cst.DEFAULT_WIDTHS[type][view]) + offset + padding;
             // N'affiche pas le tri si il est désactivé.
             var _sorted = sortable && sorted;
             // N'active pas le filtre si il n'y a pas de jeu de donnée sur lesquelles filtrées.
@@ -263,19 +263,24 @@ var HeaderCell = function (_React$PureComponent) {
 
             var lookedUpClassName = (0, _classnames2.default)((0, _defineProperty3.default)({}, classes.lookedUp, lookedUp));
 
+            var cellStyle = {
+                padding: 0,
+                zIndex: sticky ? 13 : 12, // la cellule sticky doit être au dessus des autres cellules du header
+                backgroundColor: 'inherit',
+                textAlign: align
+            };
+
+            if (fixedColumnWidth) {
+                cellStyle.maxWidth = _width;
+                cellStyle.minWidth = _width;
+                cellStyle.width = _width;
+            } else if (width) {
+                cellStyle.width = width;
+            }
+
             return _react2.default.createElement(
                 _Table.TableCell,
-                {
-                    style: {
-                        maxWidth: _width,
-                        minWidth: _width,
-                        width: _width,
-                        padding: 0,
-                        zIndex: sticky ? 13 : 12, // la cellule sticky doit être au dessus des autres cellules du header
-                        backgroundColor: 'inherit',
-                        textAlign: align
-                    }
-                },
+                { style: cellStyle },
                 _react2.default.createElement(
                     'div',
                     null,
@@ -318,7 +323,7 @@ var HeaderCell = function (_React$PureComponent) {
                                 {
                                     className: classes.labelContainer + (_sorted ? ' ' + classes.labelContainerOrdered : '')
                                 },
-                                title
+                                view !== 's' ? title : smallTitle ? smallTitle : title
                             ),
                             align !== 'right' && _icons
                         ) : _react2.default.createElement(
@@ -335,7 +340,7 @@ var HeaderCell = function (_React$PureComponent) {
                             _react2.default.createElement(
                                 'span',
                                 { className: classes.labelContainer, style: { width: '100%' } },
-                                title
+                                view !== 's' ? title : smallTitle ? smallTitle : title
                             )
                         )
                     ),
@@ -366,7 +371,7 @@ HeaderCell.defaultProps = {
     sortDirection: 'asc',
     view: 'l',
     dense: false,
-    fixedWidth: false,
+    fixedColumnWidth: true,
     sticky: true,
     padding: 8
 };
@@ -442,11 +447,11 @@ HeaderCell.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * Largeur de la cellule (hors padding), est déduit de view par défaut
      */
-    width: _propTypes2.default.number,
+    width: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
     /**
      * La largeur de la cellule est fixé (toutes les colonnes sauf une)
      */
-    fixedWidth: _propTypes2.default.bool,
+    fixedColumnWidth: _propTypes2.default.bool,
     /**
      * Title alignement, est déduit de type par défaut
      */

package/HiTable/HiTable.js

@@ -67,6 +67,10 @@ var _HiTableFooterScroll = require('./HiTableFooterScroll');
 
 var _HiTableFooterScroll2 = _interopRequireDefault(_HiTableFooterScroll);
 
+var _HiTableFooter = require('./HiTableFooter');
+
+var _HiTableFooter2 = _interopRequireDefault(_HiTableFooter);
+
 var _constants = require('./constants');
 
 var cst = _interopRequireWildcard(_constants);
@@ -705,7 +709,12 @@ var HiTable = function (_React$Component) {
                 translations = _props.translations,
                 view = _props.view,
                 groupBy = _props.groupBy,
-                lookupColumns = _props.lookupColumns;
+                lookupColumns = _props.lookupColumns,
+                loading = _props.loading,
+                fixedColumnWidth = _props.fixedColumnWidth,
+                disableContextMenu = _props.disableContextMenu,
+                footerContent = _props.footerContent,
+                detailRowsOptions = _props.detailRowsOptions;
             var _state = this.state,
                 dateUpdate = _state.dateUpdate,
                 isScrollToBottom = _state.isScrollToBottom,
@@ -714,6 +723,13 @@ var HiTable = function (_React$Component) {
 
             var headerHeight = dense ? cst.CELL_HEADER_HEIGHT_DENSE : cst.CELL_HEADER_HEIGHT;
 
+            var nbColumnsDisplayed = 0;
+            orderedColumns.forEach(function (column) {
+                if (column.displayed !== false) {
+                    nbColumnsDisplayed += 1;
+                }
+            });
+
             return _react2.default.createElement(
                 'div',
                 { className: classes.root },
@@ -755,7 +771,8 @@ var HiTable = function (_React$Component) {
                             sticky: sticky,
                             view: view,
                             translations: translations,
-                            lookupColumns: lookupColumns
+                            lookupColumns: lookupColumns,
+                            fixedColumnWidth: fixedColumnWidth
                         }),
                         _react2.default.createElement(_HiTableBody2.default, {
                             tabId: tabId,
@@ -780,7 +797,11 @@ var HiTable = function (_React$Component) {
                             groupBy: groupBy,
                             onClickNext: this.handleNextStickyRow,
                             groupByIds: groupByIds,
-                            lookupColumns: lookupColumns
+                            lookupColumns: lookupColumns,
+                            loading: loading,
+                            fixedColumnWidth: fixedColumnWidth,
+                            disableContextMenu: disableContextMenu,
+                            detailRowsOptions: detailRowsOptions
                         }),
                         infiniteScroll && _react2.default.createElement(_HiTableFooterScroll2.default, {
                             tabId: tabId,
@@ -789,7 +810,15 @@ var HiTable = function (_React$Component) {
                             maxAutoRequest: 3,
                             isScrollToBottom: isScrollToBottom,
                             translations: translations
-                        })
+                        }),
+                        !infiniteScroll && footerContent && _react2.default.createElement(
+                            _HiTableFooter2.default,
+                            {
+                                nbColumnsDisplayed: nbColumnsDisplayed,
+                                view: view
+                            },
+                            footerContent
+                        )
                     ),
                     _react2.default.createElement(_HiTableContextMenu2.default, {
                         tabId: tabId,
@@ -802,7 +831,7 @@ var HiTable = function (_React$Component) {
                         _react2.default.createElement(
                             _HiButton2.default,
                             {
-                                raised: true,
+                                variant: 'raised',
                                 color: 'primary',
                                 className: classes.backToTopButton,
                                 onClick: function onClick() {
@@ -833,6 +862,7 @@ HiTable.defaultProps = {
     dateLocale: 'en-EN',
     numberLocale: 'en-EN',
     dense: false,
+    detailRowsOptions: {},
     height: 450,
     sticky: true,
     translations: {
@@ -849,7 +879,10 @@ HiTable.defaultProps = {
         }
     },
     view: 'l',
-    lookupColumns: []
+    lookupColumns: [],
+    loading: false,
+    fixedColumnWidth: true,
+    disableContextMenu: true
 };
 HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -872,14 +905,42 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      * Locale utilisé pour le format des dates
      */
     dateLocale: _propTypes2.default.string,
+    /**
+     * Options utilisées pour décrire le comportement de lignes de détails
+     * ex: {
+     *     payment_operation: {
+     *         anchor: 'transaction_id'
+     *     }
+     * }
+     * dans cet exemple, on veut que les lignes de détails de type payment_operation
+     * soient affichable à partir d'un chip button dans les cellules transaction_id
+     */
+    detailRowsOptions: _propTypes2.default.object,
     /**
      * Densité d'affichage (joue sur la hauteur des lignes)
      */
     dense: _propTypes2.default.bool,
+    /**
+     * Active/désactive le menu contextuel au clic droit sur les cellules du tableau
+     */
+    disableContextMenu: _propTypes2.default.bool.isRequired,
     /**
      * Active le filtre sur les colonnes filtrables
      */
     filterable: _propTypes2.default.bool,
+    /**
+     * Fixe la taille des colonnes selon le type de vue
+     * Sinon les colonnes s'adaptent à l'espace disponible
+     */
+    fixedColumnWidth: _propTypes2.default.bool,
+    /**
+     * Ajoute un footer avec le contenu footerContent à l'intérieur
+     */
+    footerContent: _propTypes2.default.node,
+    /**
+     * Id de la colonne par laquelle sont regroupé les éléments
+     */
+    groupBy: _propTypes2.default.string,
     /**
      * Ajoute le loader et le requestNextDatas en fin de tableau (si infiniteScroll activé)
      */
@@ -892,6 +953,10 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      * Ajoute l'infinite scroll
      */
     infiniteScroll: _propTypes2.default.bool,
+    /**
+     * État du tableau en cours de chargement des données
+     */
+    loading: _propTypes2.default.bool,
     /**
      * Identifiant de la ou des colonnes sur la/lesquelles il y a une 'lookup' search
      */
@@ -946,6 +1011,9 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
      * 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)
+     *
+     * @param {string} column id
+     * @param {string} direction
      */
     onSort: _propTypes2.default.func,
     /**
@@ -1003,10 +1071,6 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      * 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
+    view: _propTypes2.default.oneOf(['l', 'm', 's'])
 } : {};
 exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiHiTable' })(HiTable);