@hipay/hipay-material-ui 1.0.0-beta.29 → 1.0.0-beta.3

package/HiTable/HiTable.js

@@ -67,10 +67,6 @@ var _HiTableFooterScroll = require('./HiTableFooterScroll');
 
 var _HiTableFooterScroll2 = _interopRequireDefault(_HiTableFooterScroll);
 
-var _HiTableFooter = require('./HiTableFooter');
-
-var _HiTableFooter2 = _interopRequireDefault(_HiTableFooter);
-
 var _constants = require('./constants');
 
 var cst = _interopRequireWildcard(_constants);
@@ -199,18 +195,16 @@ var HiTable = function (_React$Component) {
         _this.groupByRowsPositions = [];
 
         _this.updateFloatingBodyElementRefs = function () {
-            if (_this.tBody) {
-                _this.tBodyScrollbarWidth = _this.tBody.offsetWidth - _this.tBody.clientWidth;
+            _this.tBodyScrollbarWidth = _this.tBody.offsetWidth - _this.tBody.clientWidth;
 
-                if (_this.tHead && _this.tBodyScrollbarWidth > 0) {
-                    _this.tHead.style.width = 'calc(100% - ' + _this.tBodyScrollbarWidth + 'px)';
-                }
+            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.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.tBodyFirstElements = _this.tBody.querySelectorAll('tr td:nth-child(2)');
         };
 
         _this.addNewRowRefs = function () {
@@ -223,9 +217,27 @@ var HiTable = function (_React$Component) {
 
         _this.state = {
             dateUpdate: Date.now(),
-            isScrollToBottom: false
+            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);
@@ -297,6 +309,8 @@ var HiTable = function (_React$Component) {
     }, {
         key: 'componentDidUpdate',
         value: function componentDidUpdate(prevProps, prevState, prevContext) {
+            var _this2 = this;
+
             this.wrapperScrollOffset = this.wrapperDiv.scrollWidth - this.wrapperDiv.offsetWidth;
 
             // If orderedColumns has change, possibly the sticky cells has changed too
@@ -324,14 +338,31 @@ var HiTable = function (_React$Component) {
             // Only if needed
             if (this.props.dataSource.length > prevProps.dataSource.length || this.props.dense !== prevProps.dense || this.props.sortedColumnId !== prevProps.sortedColumnId || this.props.sortDirection !== prevProps.sortDirection) {
                 this.updateStickyRowsPosition();
-                if (this.props.dataSource.length !== prevProps.dataSource.length) {
+                if (this.props.dataSource.length > prevProps.dataSource.length) {
                     this.handleStickyRowPositions();
                 }
             }
-            if (this.tBody) {
-                this.isScrollToBottom(this.scrollTop === this.tBody.scrollHeight - this.tBody.offsetHeight);
+            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();
         }
 
@@ -340,19 +371,17 @@ var HiTable = function (_React$Component) {
     }, {
         key: 'updateStickyRowsPosition',
         value: function updateStickyRowsPosition() {
-            var _this2 = this;
+            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');
-            if (tableBody) {
-                var stickyRows = tableBody.getElementsByClassName('stickyGroupBy');
-                if (stickyRows.length > 0) {
-                    Array.prototype.filter.call(stickyRows, function (stickyRow) {
-                        _this2.groupByRowsPositions.push(stickyRow.nextSibling.nextSibling.offsetTop - rowHeight);
-                    });
-                }
+            var stickyRows = tableBody.getElementsByClassName('stickyGroupBy');
+            if (stickyRows.length > 0) {
+                Array.prototype.filter.call(stickyRows, function (stickyRow) {
+                    _this3.groupByRowsPositions.push(stickyRow.nextSibling.nextSibling.offsetTop - rowHeight);
+                });
             }
         }
     }, {
@@ -470,29 +499,28 @@ var HiTable = function (_React$Component) {
             }
 
             this.handleStickyRowPositions();
-            if (this.tBody) {
-                this.isScrollToBottom(this.scrollTop === event.target.scrollHeight - this.tBody.offsetHeight);
-            }
+
+            this.isScrollToBottom(this.scrollTop === event.target.scrollHeight - this.tBody.offsetHeight);
         }
     }, {
         key: 'handleStickyRowPositions',
         value: function handleStickyRowPositions() {
-            var _this3 = this;
+            var _this4 = this;
 
             var tableBody = document.getElementById(this.props.tabId + '-body');
-            var stickyRows = tableBody ? tableBody.getElementsByClassName('stickyGroupBy') : [];
+            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 > _this3.groupByRowsPositions[index]) {
+                    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 _this3.groupByRowsPositions[index + 1] !== 'undefined' && _this3.groupByRowsPositions[index + 1] - tableBody.scrollTop < rowHeight - 10) {
-                                stickyRow.style.top = tableBody.scrollTop + _this3.groupByRowsPositions[index + 1] - tableBody.scrollTop - rowHeight + '\n                                px';
+                            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';
                             }
@@ -501,13 +529,13 @@ var HiTable = function (_React$Component) {
                                 // Repositionnement des éléments dans une row en position absolute
                                 stickyRow.style.position = 'absolute';
                                 fakeTr.style.display = 'inline-block';
-                                stickyRow.style.height = _this3.props.dense ? cst.CELL_HEIGHT_DENSE - 8 + 'px' : cst.CELL_HEIGHT - 8 + 'px';
-                                stickyRow.querySelector('button').style.maxHeight = _this3.props.dense ? cst.CELL_HEIGHT_DENSE - 16 + 'px' : cst.CELL_HEIGHT - 16 + 'px';
-                                stickyRow.querySelector('button').style.minHeight = _this3.props.dense ? cst.CELL_HEIGHT_DENSE - 16 + 'px' : cst.CELL_HEIGHT - 16 + 'px';
+                                stickyRow.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 = !_this3.props.dense ? '4px' : '-3px';
-                                stickyRow.querySelector('td').style.height = _this3.props.dense ? cst.CELL_HEIGHT_DENSE - 8 + 'px' : cst.CELL_HEIGHT - 8 + 'px';
-                                if (_this3.props.dense) {
+                                stickyRow.querySelector('#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';
@@ -519,13 +547,13 @@ var HiTable = function (_React$Component) {
                         stickyRow.style.position = 'relative';
                         stickyRow.style.top = '0px';
                         fakeTr.style.display = 'none';
-                        stickyRow.style.height = _this3.props.dense ? cst.CELL_HEIGHT_DENSE + 'px' : cst.CELL_HEIGHT + 'px';
+                        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 = _this3.props.dense ? cst.CELL_HEIGHT_DENSE + 'px' : cst.CELL_HEIGHT + 'px';
-                        stickyRow.querySelector('button').style.maxHeight = _this3.props.dense ? cst.CELL_HEIGHT_DENSE - 2 + 'px' : cst.CELL_HEIGHT - 8 + 'px';
-                        stickyRow.querySelector('button').style.minHeight = _this3.props.dense ? cst.CELL_HEIGHT_DENSE - 2 + 'px' : cst.CELL_HEIGHT - 8 + 'px';
-                        if (_this3.props.dense) {
+                        stickyRow.querySelector('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';
                         }
                     }
@@ -540,7 +568,7 @@ var HiTable = function (_React$Component) {
     }, {
         key: 'placeHorizontalFloatingElement',
         value: function placeHorizontalFloatingElement() {
-            var _this4 = this;
+            var _this5 = this;
 
             // live datas notification
             if (this.liveDataSpan) {
@@ -549,7 +577,7 @@ var HiTable = function (_React$Component) {
 
             // Replace left padding cells
             [].concat((0, _toConsumableArray3.default)(this.tBodyLeftPaddingElements), [this.tHeadLeftPadding]).forEach(function (element) {
-                element.style.left = _this4.scrollLeft + 'px';
+                element.style.left = _this5.scrollLeft + 'px';
             });
 
             // TODO - FIX
@@ -558,15 +586,15 @@ var HiTable = function (_React$Component) {
 
             // Replace right padding cells
             [].concat((0, _toConsumableArray3.default)(this.tBodyRightPaddingElements), [this.tHeadRightPadding]).forEach(function (element) {
-                element.style.right = Math.max(0, _this4.wrapperScrollOffset - _this4.scrollLeft - _this4.tBodyScrollbarWidth) + 'px';
+                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 = _this4.scrollLeft + 'px';
-                    element.style['box-shadow'] = _this4.scrollLeft > 0 ? shadowRight : 'none';
+                    element.style.left = _this5.scrollLeft + 'px';
+                    element.style['box-shadow'] = _this5.scrollLeft > 0 ? shadowRight : 'none';
                 });
             }
 
@@ -577,10 +605,10 @@ var HiTable = function (_React$Component) {
 
             // Replace stickyRowContent
             var tableBody = document.getElementById(this.props.tabId + '-body');
-            var stickyRowContentDiv = tableBody ? tableBody.getElementsByClassName('stickyRowContent') : [];
+            var stickyRowContentDiv = tableBody.getElementsByClassName('stickyRowContent');
             if (stickyRowContentDiv.length > 0) {
                 Array.prototype.filter.call(stickyRowContentDiv, function (div) {
-                    div.style.left = _this4.wrapperDiv.scrollLeft + (_this4.props.selectable ? 25 : 0) + 'px';
+                    div.style.left = _this5.wrapperDiv.scrollLeft + (_this5.props.selectable ? 25 : 0) + 'px';
                 });
             }
         }
@@ -602,9 +630,7 @@ var HiTable = function (_React$Component) {
             this.backToTopButton['style'].top = -99999 + 'px';
 
             // Set scroll top to 0
-            if (this.tBody) {
-                this.tBody.scrollTop = 0;
-            }
+            this.tBody.scrollTop = 0;
             this.scrollTop = 0;
         }
     }, {
@@ -647,7 +673,7 @@ var HiTable = function (_React$Component) {
     }, {
         key: 'render',
         value: function render() {
-            var _this5 = this;
+            var _this6 = this;
 
             var _props = this.props,
                 classes = _props.classes,
@@ -679,27 +705,15 @@ var HiTable = function (_React$Component) {
                 translations = _props.translations,
                 view = _props.view,
                 groupBy = _props.groupBy,
-                lookupColumns = _props.lookupColumns,
-                loading = _props.loading,
-                fixedColumnWidth = _props.fixedColumnWidth,
-                disableContextMenu = _props.disableContextMenu,
-                footerContent = _props.footerContent,
-                detailRowsOptions = _props.detailRowsOptions,
-                noResultsContent = _props.noResultsContent;
+                lookupColumns = _props.lookupColumns;
             var _state = this.state,
                 dateUpdate = _state.dateUpdate,
-                isScrollToBottom = _state.isScrollToBottom;
+                isScrollToBottom = _state.isScrollToBottom,
+                groupByIds = _state.groupByIds;
 
 
             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 },
@@ -709,7 +723,7 @@ var HiTable = function (_React$Component) {
                         id: tabId,
                         className: classes.tableWrapper,
                         ref: function ref(div) {
-                            return _this5.wrapperDiv = div;
+                            return _this6.wrapperDiv = div;
                         },
                         onScroll: this.handleHorizontalScroll
                     },
@@ -740,11 +754,10 @@ var HiTable = function (_React$Component) {
                             height: headerHeight,
                             sticky: sticky,
                             view: view,
-                            translations: translations.tableHead,
-                            lookupColumns: lookupColumns,
-                            fixedColumnWidth: fixedColumnWidth
+                            translations: translations,
+                            lookupColumns: lookupColumns
                         }),
-                        dataSource.length > 0 && _react2.default.createElement(_HiTableBody2.default, {
+                        _react2.default.createElement(_HiTableBody2.default, {
                             tabId: tabId,
                             columns: columns,
                             orderedColumns: orderedColumns,
@@ -763,35 +776,23 @@ var HiTable = function (_React$Component) {
                             onRowClick: onRowClick,
                             onScroll: this.handleVerticalScroll,
                             addNewRowRefs: this.addNewRowRefs,
-                            translations: translations.tableBody,
+                            translations: translations,
                             groupBy: groupBy,
                             onClickNext: this.handleNextStickyRow,
-                            lookupColumns: lookupColumns,
-                            loading: loading,
-                            fixedColumnWidth: fixedColumnWidth,
-                            disableContextMenu: disableContextMenu,
-                            detailRowsOptions: detailRowsOptions
+                            groupByIds: groupByIds,
+                            lookupColumns: lookupColumns
                         }),
-                        dataSource.length > 0 && infiniteScroll && _react2.default.createElement(_HiTableFooterScroll2.default, {
+                        infiniteScroll && _react2.default.createElement(_HiTableFooterScroll2.default, {
                             tabId: tabId,
                             hasNextDatas: hasNextDatas,
                             requestNextDatas: requestNextDatas,
                             maxAutoRequest: 3,
                             isScrollToBottom: isScrollToBottom,
-                            translations: translations.tableFooterScroll
-                        }),
-                        dataSource.length > 0 && !infiniteScroll && footerContent && _react2.default.createElement(
-                            _HiTableFooter2.default,
-                            {
-                                nbColumnsDisplayed: nbColumnsDisplayed,
-                                view: view
-                            },
-                            footerContent
-                        )
+                            translations: translations
+                        })
                     ),
                     _react2.default.createElement(_HiTableContextMenu2.default, {
                         tabId: tabId,
-                        columns: columns,
                         onSearch: this.props.onSearch,
                         onRedirect: this.props.onRedirect
                     }),
@@ -801,11 +802,11 @@ var HiTable = function (_React$Component) {
                         _react2.default.createElement(
                             _HiButton2.default,
                             {
-                                variant: 'raised',
+                                raised: true,
                                 color: 'primary',
                                 className: classes.backToTopButton,
                                 onClick: function onClick() {
-                                    return _this5.scrollToTop();
+                                    return _this6.scrollToTop();
                                 }
                             },
                             _react2.default.createElement(_ArrowUp2.default, { className: classes.backToTopButtonArrow }),
@@ -813,8 +814,7 @@ var HiTable = function (_React$Component) {
                             _react2.default.createElement(_ArrowUp2.default, { className: classes.backToTopButtonArrow })
                         )
                     )
-                ),
-                dataSource.length === 0 && noResultsContent && noResultsContent
+                )
             );
         }
     }]);
@@ -833,18 +833,23 @@ HiTable.defaultProps = {
     dateLocale: 'en-EN',
     numberLocale: 'en-EN',
     dense: false,
-    detailRowsOptions: {},
     height: 450,
     sticky: true,
     translations: {
-        back_to_top: 'Back to top'
+        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: [],
-    loading: false,
-    fixedColumnWidth: true,
-    disableContextMenu: true,
-    noResultsContent: null
+    lookupColumns: []
 };
 HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
     /**
@@ -867,42 +872,14 @@ 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é)
      */
@@ -915,10 +892,6 @@ 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
      */
@@ -973,9 +946,6 @@ 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,
     /**
@@ -1035,8 +1005,8 @@ HiTable.propTypes = process.env.NODE_ENV !== "production" ? {
      */
     view: _propTypes2.default.oneOf(['l', 'm', 's']),
     /**
-     * No results content.
+     * Id de la colonne par laquelle sont regroupé les éléments
      */
-    noResultsContent: _propTypes2.default.object
+    groupBy: _propTypes2.default.string
 } : {};
 exports.default = (0, _styles.withStyles)(styles, { withTheme: true, name: 'HmuiHiTable' })(HiTable);