@gridsuite/commons-ui 0.30.1 → 0.31.0

package/lib/components/MuiVirtualizedTable/ColumnHeader.js

@@ -3,7 +3,7 @@
 exports.__esModule = true;
 exports["default"] = exports.ColumnHeader = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
@@ -17,6 +17,10 @@ var _ArrowDownward = _interopRequireDefault(require("@mui/icons-material/ArrowDo
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /**
  * Copyright (c) 2022, RTE (http://www.rte-france.com)
  * This Source Code Form is subject to the terms of the Mozilla Public
@@ -110,14 +114,17 @@ var ColumnHeader = _react["default"].forwardRef(function (props, ref) {
     setHovered(evt.type === 'mouseenter');
   }, []);
 
+  var topmostDiv = (0, _react.useRef)();
+
   var handleFilterClick = _react["default"].useMemo(function () {
     if (!onFilterClick) return undefined;
     return function (evt) {
-      onFilterClick(evt, evt.target.parentNode.parentNode);
+      onFilterClick(evt, topmostDiv.current);
     };
   }, [onFilterClick]);
 
   return /*#__PURE__*/_react["default"].createElement("div", {
+    ref: topmostDiv,
     onMouseEnter: onHover,
     onMouseLeave: onHover,
     className: (0, _clsx["default"])(classes.divFlex, numeric && classes.divNum, className),

package/lib/components/MuiVirtualizedTable/KeyedColumnsRowIndexer.js

@@ -182,7 +182,7 @@ var KeyedColumnsRowIndexer = /*#__PURE__*/function () {
       _this._bumpVersion();
     });
 
-    _defineProperty(this, "preFilterRowMapping", function (columns, rows) {
+    _defineProperty(this, "preFilterRowMapping", function (columns, rows, rowFilter) {
       if (!(rows === null || rows === void 0 ? void 0 : rows.length) || !(columns === null || columns === void 0 ? void 0 : columns.length)) return null;
       var ri = [];
       var cs = {};
@@ -231,6 +231,10 @@ var KeyedColumnsRowIndexer = /*#__PURE__*/function () {
           acceptsRow &= acceptsCell;
         }
 
+        if (acceptsRow && rowFilter) {
+          acceptsRow = rowFilter(row);
+        }
+
         if (acceptsRow && _this.byRowFilter) {
           acceptsRow = _this.byRowFilter(row);
         }
@@ -491,7 +495,6 @@ var KeyedColumnsRowIndexer = /*#__PURE__*/function () {
       _this._bumpVersion();
     });
 
-    console.debug('KeyedColumnsRowIndexer');
     this._versionSetter = versionSetter;
     this.version = 0;
     this.filterVersion = 0;

package/lib/components/MuiVirtualizedTable/MuiVirtualizedTable.js

@@ -112,19 +112,26 @@ var AmongChooser = function AmongChooser(props) {
   var options = props.options,
       value = props.value,
       setValue = props.setValue,
-      id = props.id;
-  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("span", null, props.label), /*#__PURE__*/_react["default"].createElement(_material.Autocomplete, {
+      id = props.id,
+      onDropDownVisibility = props.onDropDownVisibility;
+  return /*#__PURE__*/_react["default"].createElement("span", null, /*#__PURE__*/_react["default"].createElement(_material.Autocomplete, {
     id: id,
     value: value !== null && value !== void 0 ? value : [],
     multiple: true,
     onChange: function onChange(evt, newVal) {
       setValue(newVal);
     },
-    options: options // getOptionLabel={(code) => options.get(code)}
-    ,
+    onClose: function onClose() {
+      return onDropDownVisibility(false);
+    },
+    onOpen: function onOpen() {
+      return onDropDownVisibility(true);
+    },
+    options: options,
     renderInput: function renderInput(props) {
-      return /*#__PURE__*/_react["default"].createElement(_material.TextField // label={<FormattedMessage id={titleMessage} />}
-      , props);
+      return /*#__PURE__*/_react["default"].createElement(_material.TextField, _extends({
+        autoFocus: true
+      }, props));
     },
     renderTags: function renderTags(val, getTagsProps) {
       return val.map(function (code, index) {
@@ -140,6 +147,22 @@ var AmongChooser = function AmongChooser(props) {
   }));
 };
 
+function makeIndexRecord(viewIndexToModel, rows) {
+  return {
+    viewIndexToModel: viewIndexToModel,
+    rowGetter: !viewIndexToModel ? function (viewIndex) {
+      return rows[viewIndex];
+    } : function (viewIndex) {
+      if (viewIndex >= viewIndexToModel.length || viewIndex < 0) {
+        return {};
+      }
+
+      var modelIndex = viewIndexToModel[viewIndex];
+      return rows[modelIndex];
+    }
+  };
+}
+
 var initIndexer = function initIndexer(props, oldProps, versionSetter) {
   if (!props.sortable) {
     return null;
@@ -147,29 +170,75 @@ var initIndexer = function initIndexer(props, oldProps, versionSetter) {
 
   if (props.indexer) {
     return props.indexer;
-  } else if (!props.sort) {
-    return new _KeyedColumnsRowIndexer.KeyedColumnsRowIndexer(true, true, null, versionSetter);
-  } else if (typeof props.sort === 'function') {
-    return new _KeyedColumnsRowIndexer.KeyedColumnsRowIndexer(true, true, function (cbfgs, done_cb) {
-      console.debug('dummy func, now :-/');
-      done_cb(true);
-    }, versionSetter);
-  } else if (typeof props.sort === 'object') {
-    return props.sort;
-  } else {
-    console.warn('unknown type of sort', props.sort);
   }
 
   return new _KeyedColumnsRowIndexer.KeyedColumnsRowIndexer(true, true, null, versionSetter);
 };
 
+var preFilterData = (0, _memoizeOne["default"])(function (columns, rows, filterFromProps, indexer, filterVersion // filterVersion is unused directly, used only as a workaround just to reset the memoization
+) {
+  return indexer.preFilterRowMapping(columns, rows, filterFromProps);
+});
+var reorderIndex = (0, _memoizeOne["default"])(function (indexer, indirectionVersion, rows, columns, filterFromProps, sortFromProps) {
+  if (!rows) return {
+    viewIndexToModel: [],
+    rowGetter: function rowGetter(viewIndex) {
+      return viewIndex;
+    }
+  };
+  var highestCodedColumn = !indexer ? 0 : indexer.highestCodedColumn(columns);
+
+  if (sortFromProps && highestCodedColumn) {
+    var colIdx = Math.abs(highestCodedColumn) - 1;
+    var reorderedIndex = sortFromProps(columns[colIdx].dataKey, highestCodedColumn > 0, !!columns[colIdx].numeric);
+    return makeIndexRecord(reorderedIndex, rows);
+  }
+
+  if (sortFromProps) {
+    try {
+      var viewIndexToModel = sortFromProps(null, false, false);
+      return makeIndexRecord(viewIndexToModel, rows);
+    } catch (e) {
+      //some external sort functions may expect to only be called
+      //when the user has select a column. Catch their errors and ignore
+      console.warn('error in external sort. consider adding support for datakey=null in your external sort function');
+    }
+  }
+
+  if (indexer) {
+    var prefiltered = preFilterData(columns, rows, filterFromProps, indexer, indirectionVersion);
+
+    var _reorderedIndex = indexer.makeGroupAndSortIndirector(prefiltered, columns);
+
+    return makeIndexRecord(_reorderedIndex, rows);
+  }
+
+  if (filterFromProps) {
+    var _viewIndexToModel = rows.map(function (r, i) {
+      return [r, i];
+    }).filter(function (_ref) {
+      var r = _ref[0],
+          idx = _ref[1];
+      return filterFromProps(r);
+    }).map(function (_ref2) {
+      var r = _ref2[0],
+          j = _ref2[1];
+      return j;
+    });
+
+    return makeIndexRecord(_viewIndexToModel, rows);
+  }
+
+  return makeIndexRecord(null, rows);
+});
+
 var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
   _inheritsLoose(MuiVirtualizedTable, _React$PureComponent);
 
-  function MuiVirtualizedTable(_props, context) {
+  function MuiVirtualizedTable(props, context) {
     var _this;
 
-    _this = _React$PureComponent.call(this, _props, context) || this;
+    _this = _React$PureComponent.call(this, props, context) || this;
 
     _defineProperty(_assertThisInitialized(_this), "setVersion", function (v) {
       _this.setState({
@@ -177,65 +246,6 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "preFilterData", (0, _memoizeOne["default"])(function (columns, rows) {
-      return _this.state.indexer.preFilterRowMapping(columns, rows);
-    }));
-
-    _defineProperty(_assertThisInitialized(_this), "reorderIndex", (0, _memoizeOne["default"])(function (indirectorVersion, rows, columns) {
-      var indexer = _this.state.indexer;
-      if (!rows) return {
-        viewIndexToModel: [],
-        rowGetter: function rowGetter(viewIndex) {
-          return viewIndex;
-        }
-      };
-      var props = _this.props;
-
-      if (indexer && props.sort) {
-        var highestCodedColumn = indexer.highestCodedColumn(props.columns);
-
-        if (highestCodedColumn !== 0) {
-          var colIdx = Math.abs(highestCodedColumn) - 1;
-          var ret = props.sort(props.columns[colIdx].dataKey, highestCodedColumn > 0, !!props.columns[colIdx].numeric);
-          return {
-            viewIndexToModel: ret,
-            rowGetter: function rowGetter(viewIndex) {
-              if (viewIndex >= ret.length || viewIndex < 0) {
-                return {};
-              }
-
-              var modelIndex = ret[viewIndex];
-              return rows[modelIndex];
-            }
-          };
-        }
-      } else if (indexer) {
-        var prefiltered = _this.preFilterData(columns, rows);
-
-        var reorderedIndex = indexer.makeGroupAndSortIndirector(prefiltered, columns);
-        return {
-          viewIndexToModel: reorderedIndex,
-          rowGetter: function rowGetter(viewIndex) {
-            if (reorderedIndex === null) return rows[viewIndex];
-
-            if (viewIndex >= reorderedIndex.length || viewIndex < 0) {
-              return {};
-            }
-
-            var modelIndex = reorderedIndex[viewIndex];
-            return rows[modelIndex];
-          }
-        };
-      }
-
-      return {
-        viewIndexToModel: null,
-        rowGetter: function rowGetter(viewIndex) {
-          return rows[viewIndex];
-        }
-      };
-    }));
-
     _defineProperty(_assertThisInitialized(_this), "computeDataWidth", function (text) {
       return getTextWidth(text || '') + 2 * DEFAULT_CELL_PADDING;
     });
@@ -268,10 +278,6 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
     }));
 
     _defineProperty(_assertThisInitialized(_this), "openPopover", function (popoverTarget, colKey) {
-      if (_this.state.indexer.delegatorCallback) {
-        return; // retro compatibility stops here ;-)
-      }
-
       var col = _this.props.columns.find(function (c) {
         return c.dataKey === colKey;
       });
@@ -280,24 +286,34 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
         return;
       }
 
+      _this.dropDownVisible = false;
+
       _this.setState({
         popoverAnchorEl: popoverTarget,
         popoverColKey: colKey
       });
     });
 
+    _defineProperty(_assertThisInitialized(_this), "handleKeyDownOnPopover", function (evt) {
+      if (evt.key === 'Enter' && !_this.dropDownVisible) {
+        _this.closePopover(evt, 'enterKeyDown');
+      }
+    });
+
     _defineProperty(_assertThisInitialized(_this), "closePopover", function (evt, reason) {
       var bumpsVersion = false;
 
-      if (reason === 'backdropClick') {
+      if (reason === 'backdropClick' || reason === 'enterKeyDown') {
         bumpsVersion = _this._commitFilterChange();
       }
 
-      _this.setState({
-        popoverAnchorEl: null,
-        popoverColKey: null,
-        deferredFilterChange: null,
-        indirectionVersion: _this.state.indirectionVersion + (bumpsVersion ? 1 : 0)
+      _this.setState(function (state, props) {
+        return {
+          popoverAnchorEl: null,
+          popoverColKey: null,
+          deferredFilterChange: null,
+          indirectionVersion: state.indirectionVersion + (bumpsVersion ? 1 : 0)
+        };
       });
     });
 
@@ -309,9 +325,7 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
       var outerParams = _this.state.indexer.getColFilterOuterParams(colKey);
 
       var userParams = !_this.props.defersFilterChanges || !_this.state.deferredFilterChange ? _this.state.indexer.getColFilterUserParams(colKey) : _this.state.deferredFilterChange.newVal;
-
-      var prefiltered = _this.preFilterData(_this.props.columns, _this.props.rows);
-
+      var prefiltered = preFilterData(_this.props.columns, _this.props.rows, _this.props.filter, _this.state.indexer, _this.state.indirectionVersion);
       var options = [];
 
       if (outerParams) {
@@ -336,6 +350,8 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
         }
       }
 
+      options.sort();
+
       var col = _this.props.columns.find(function (c) {
         return c.dataKey === colKey;
       });
@@ -344,9 +360,13 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
         options: options,
         value: userParams,
         id: 'fielt' + colKey,
-        label: (_col$label = col === null || col === void 0 ? void 0 : col.label) !== null && _col$label !== void 0 ? _col$label : "\u2208",
+        label: (_col$label = col === null || col === void 0 ? void 0 : col.label) !== null && _col$label !== void 0 ? _col$label : "\u2208" // "contained in" math symbol
+        ,
         setValue: function setValue(newVal) {
           _this.onFilterParamsChange(newVal, colKey);
+        },
+        onDropDownVisibility: function onDropDownVisibility(visible) {
+          return _this.dropDownVisible = visible;
         }
       });
     });
@@ -396,26 +416,28 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "filterClickHandler", function (evt, retargeted, columnIndex) {
+    _defineProperty(_assertThisInitialized(_this), "filterClickHandler", function (evt, target, columnIndex) {
+      var _target$parentNode;
+
+      // ColumnHeader to (header) TableCell
+      var retargeted = (_target$parentNode = target.parentNode) !== null && _target$parentNode !== void 0 ? _target$parentNode : target;
       var colKey = _this.props.columns[columnIndex].dataKey;
 
       _this.openPopover(retargeted, colKey);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "sortableHeader", function (_ref) {
+    _defineProperty(_assertThisInitialized(_this), "sortableHeader", function (_ref3) {
       var _prefiltered$colsStat2;
 
-      var label = _ref.label,
-          columnIndex = _ref.columnIndex;
+      var label = _ref3.label,
+          columnIndex = _ref3.columnIndex;
       var columns = _this.props.columns;
       var indexer = _this.state.indexer;
       var colKey = columns[columnIndex].dataKey;
       var signedRank = indexer.columnSortingSignedRank(colKey);
       var userParams = indexer.getColFilterUserParams(colKey);
       var numeric = columns[columnIndex].numeric;
-
-      var prefiltered = _this.preFilterData(columns, _this.props.rows);
-
+      var prefiltered = preFilterData(columns, _this.props.rows, _this.props.filter, indexer, indexer.filterVersion);
       var colStat = prefiltered === null || prefiltered === void 0 ? void 0 : (_prefiltered$colsStat2 = prefiltered.colsStats) === null || _prefiltered$colsStat2 === void 0 ? void 0 : _prefiltered$colsStat2[colKey];
       var filterLevel = 0;
 
@@ -424,8 +446,10 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
         var userSelectedCount = userParams === null || userParams === void 0 ? void 0 : userParams.length;
         filterLevel += userSelectedCount ? 1 : 0;
         filterLevel += userSelectedCount >= countSeen ? 2 : 0;
-      } // disable filtering when a cellRenderer is defined,
-      // as we have no simple way to match for chosen value(s)
+      } // disable filtering when either:
+      //  - the column is numeric, we only handle tags for string values
+      //  - a cellRenderer is defined, as we have no simple way to match for chosen value(s)
+      //  - using an external sort, because it would hardly know about the indexer filtering
 
 
       var onFilterClick = numeric || _this.props.sort || columns[columnIndex].cellRenderer ? undefined : function (ev, retargeted) {
@@ -446,8 +470,8 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "simpleHeaderRenderer", function (_ref2) {
-      var label = _ref2.label;
+    _defineProperty(_assertThisInitialized(_this), "simpleHeaderRenderer", function (_ref4) {
+      var label = _ref4.label;
       return /*#__PURE__*/_react["default"].createElement("div", {
         ref: function ref(element) {
           _this._registerHeader(label, element);
@@ -455,11 +479,11 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
       }, label);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getRowClassName", function (_ref3) {
+    _defineProperty(_assertThisInitialized(_this), "getRowClassName", function (_ref5) {
       var _rowGetter, _rowGetter2, _clsx;
 
-      var index = _ref3.index,
-          rowGetter = _ref3.rowGetter;
+      var index = _ref5.index,
+          rowGetter = _ref5.rowGetter;
       var _this$props = _this.props,
           classes = _this$props.classes,
           onRowClick = _this$props.onRowClick;
@@ -474,12 +498,12 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "cellRenderer", function (_ref4) {
+    _defineProperty(_assertThisInitialized(_this), "cellRenderer", function (_ref6) {
       var _rows$rowIndex, _rows$rowIndex2, _clsx2;
 
-      var cellData = _ref4.cellData,
-          columnIndex = _ref4.columnIndex,
-          rowIndex = _ref4.rowIndex;
+      var cellData = _ref6.cellData,
+          columnIndex = _ref6.columnIndex,
+          rowIndex = _ref6.rowIndex;
       var _this$props2 = _this.props,
           columns = _this$props2.columns,
           classes = _this$props2.classes,
@@ -531,20 +555,20 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
         /* The {...otherProps} just above would hold the slot onRowClick */
         _this.onClickableRowClick,
         rowCount: (_reorderedIndex$lengt = reorderedIndex === null || reorderedIndex === void 0 ? void 0 : reorderedIndex.length) !== null && _reorderedIndex$lengt !== void 0 ? _reorderedIndex$lengt : otherProps.rows.length,
-        rowClassName: function rowClassName(_ref5) {
-          var index = _ref5.index;
+        rowClassName: function rowClassName(_ref7) {
+          var index = _ref7.index;
           return _this.getRowClassName({
             index: index,
             rowGetter: _rowGetter3
           });
         },
-        rowGetter: function rowGetter(_ref6) {
-          var index = _ref6.index;
+        rowGetter: function rowGetter(_ref8) {
+          var index = _ref8.index;
           return _rowGetter3(index);
         }
-      }), otherProps.columns.map(function (_ref7, index) {
-        var dataKey = _ref7.dataKey,
-            other = _objectWithoutPropertiesLoose(_ref7, _excluded2);
+      }), otherProps.columns.map(function (_ref9, index) {
+        var dataKey = _ref9.dataKey,
+            other = _objectWithoutPropertiesLoose(_ref9, _excluded2);
 
         return /*#__PURE__*/_react["default"].createElement(_reactVirtualized.Column, _extends({
           key: dataKey,
@@ -574,8 +598,7 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "getCSVData", function () {
       var _reorderedIndex$viewI, _reorderedIndex$viewI2;
 
-      var reorderedIndex = _this.reorderIndex(_this.state.indirectionVersion, _this.props.rows, _this.props.columns);
-
+      var reorderedIndex = reorderIndex(_this.state.indexer, _this.state.indirectionVersion, _this.props.rows, _this.props.columns, _this.props.filter, _this.props.sort);
       var rowsCount = (_reorderedIndex$viewI = (_reorderedIndex$viewI2 = reorderedIndex.viewIndexToModel) === null || _reorderedIndex$viewI2 === void 0 ? void 0 : _reorderedIndex$viewI2.length) !== null && _reorderedIndex$viewI !== void 0 ? _reorderedIndex$viewI : _this.props.rows.length;
       var csvData = [];
 
@@ -630,9 +653,8 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
     _this.observer = new IntersectionObserver(_this._computeHeaderSize, _options);
     _this.state = {
       headerHeight: _this.props.headerHeight,
-      indexer: initIndexer(_props, null, _this.setVersion),
+      indexer: initIndexer(props, null, _this.setVersion),
       indirectionVersion: 0,
-      reorderIndex: null,
       popoverAnchorEl: null,
       popoverColKey: null,
       deferredFilterChange: null
@@ -643,11 +665,22 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
   var _proto = MuiVirtualizedTable.prototype;
 
   _proto.componentDidUpdate = function componentDidUpdate(oldProps) {
-    if (oldProps.data !== this.props.data) {
-      this.setState({
-        indexer: initIndexer(this.props, oldProps)
+    var _this2 = this;
+
+    if (oldProps.indexer !== this.props.indexer || oldProps.sortable !== this.props.sortable) {
+      this.setState(function (state) {
+        var _state$indirectionVer;
+
+        return {
+          indexer: initIndexer(_this2.props, oldProps, _this2.setVersion),
+          indirectionVersion: ((_state$indirectionVer = state === null || state === void 0 ? void 0 : state.indirectionVersion) !== null && _state$indirectionVer !== void 0 ? _state$indirectionVer : 0) + 1
+        };
       });
     }
+
+    if (oldProps.headerHeight !== this.props.headerHeight) {
+      this._computeHeaderSize();
+    }
   };
 
   _proto.componentDidMount = function componentDidMount() {
@@ -729,7 +762,7 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
   };
 
   _proto.makeHeaderRenderer = function makeHeaderRenderer(dataKey, columnIndex) {
-    var _this2 = this;
+    var _this3 = this;
 
     var _this$props4 = this.props,
         columns = _this$props4.columns,
@@ -740,27 +773,27 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
         className: (0, _clsx3["default"])(classes.tableCell, classes.flexContainer, classes.noClick, classes.header),
         variant: "head",
         style: {
-          height: _this2.state.headerHeight
+          height: _this3.state.headerHeight
         },
         align: columns[columnIndex].numeric || false ? 'right' : 'left',
         ref: function ref(e) {
-          return _this2._registerObserver(e);
+          return _this3._registerObserver(e);
         }
-      }, _this2.props.sortable ? _this2.sortableHeader(_extends({}, headerProps, {
+      }, _this3.props.sortable && _this3.state.indexer ? _this3.sortableHeader(_extends({}, headerProps, {
         columnIndex: columnIndex,
         key: {
           dataKey: dataKey
         }
-      })) : _this2.simpleHeaderRenderer(_extends({}, headerProps)));
+      })) : _this3.simpleHeaderRenderer(_extends({}, headerProps)));
     };
   };
 
   _proto.render = function render() {
-    var _this3 = this;
+    var _this4 = this;
 
-    var _this$reorderIndex = this.reorderIndex(this.state.indirectionVersion, this.props.rows, this.props.columns),
-        viewIndexToModel = _this$reorderIndex.viewIndexToModel,
-        rowGetter = _this$reorderIndex.rowGetter;
+    var _reorderIndex = reorderIndex(this.state.indexer, this.state.indirectionVersion, this.props.rows, this.props.columns, this.props.filter, this.props.sort),
+        viewIndexToModel = _reorderIndex.viewIndexToModel,
+        rowGetter = _reorderIndex.rowGetter;
 
     var sizes = this.sizes(this.props.columns, this.props.rows, rowGetter);
     var csvHeaders = this.csvHeaders(this.props.columns, this.props.exportCSVDataKeys);
@@ -789,22 +822,28 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
       style: {
         flexGrow: 1
       }
-    }, /*#__PURE__*/_react["default"].createElement(_reactVirtualized.AutoSizer, null, function (_ref8) {
-      var height = _ref8.height,
-          width = _ref8.width;
-      return _this3.makeSizedTable(height, width, sizes, viewIndexToModel, rowGetter);
+    }, /*#__PURE__*/_react["default"].createElement(_reactVirtualized.AutoSizer, null, function (_ref10) {
+      var height = _ref10.height,
+          width = _ref10.width;
+      return _this4.makeSizedTable(height, width, sizes, viewIndexToModel, rowGetter);
     })), this.state.popoverAnchorEl && /*#__PURE__*/_react["default"].createElement(_material.Popover, {
       anchorEl: this.state.popoverAnchorEl,
       anchorOrigin: {
-        vertical: 'center',
-        horizontal: 'center'
+        vertical: 'bottom',
+        horizontal: 'left'
       },
       transformOrigin: {
-        vertical: 'center',
-        horizontal: 'center'
+        vertical: 'top',
+        horizontal: 'left'
       },
+      onKeyDownCapture: this.handleKeyDownOnPopover,
       onClose: this.closePopover,
-      open: !!this.state.popoverAnchorEl
+      open: !!this.state.popoverAnchorEl,
+      PaperProps: {
+        style: {
+          minWidth: '20ex'
+        }
+      }
     }, this.makeColumnFilterEditor()));
   };
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gridsuite/commons-ui",
-    "version": "0.30.1",
+    "version": "0.31.0",
     "description": "common react components for gridsuite applications",
     "engines": {
         "npm": "<=6",