@gridsuite/commons-ui 0.29.1 → 0.30.0

package/lib/components/MuiVirtualizedTable/MuiVirtualizedTable.js

@@ -5,31 +5,31 @@ exports["default"] = exports.DEFAULT_ROW_HEIGHT = exports.DEFAULT_HEADER_HEIGHT
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _reactIntl = require("react-intl");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _clsx3 = _interopRequireDefault(require("clsx"));
 
-var _TableCell = _interopRequireDefault(require("@mui/material/TableCell"));
-
-var _reactVirtualized = require("react-virtualized");
+var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 
-var _TableSortLabel = _interopRequireDefault(require("@mui/material/TableSortLabel"));
+var _material = require("@mui/material");
 
-var _memoizeOne = _interopRequireDefault(require("memoize-one"));
+var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
 
 var _GetApp = _interopRequireDefault(require("@mui/icons-material/GetApp"));
 
-var _reactCsvDownloader = _interopRequireDefault(require("react-csv-downloader"));
+var _reactVirtualized = require("react-virtualized");
 
-var _IconButton = _interopRequireDefault(require("@mui/material/IconButton"));
+var _reactCsvDownloader = _interopRequireDefault(require("react-csv-downloader"));
 
-var _reactIntl = require("react-intl");
+var _overflowableText = _interopRequireDefault(require("../OverflowableText/overflowable-text"));
 
-var _withStyles = _interopRequireDefault(require("@mui/styles/withStyles"));
+var _KeyedColumnsRowIndexer = require("./KeyedColumnsRowIndexer");
 
-var _overflowableText = _interopRequireDefault(require("../OverflowableText/overflowable-text"));
+var _ColumnHeader = _interopRequireDefault(require("./ColumnHeader"));
 
-var _excluded = ["name", "classes", "rows", "columns", "rowHeight", "headerHeight", "rowCount", "sortable", "enableExportCSV"],
+var _excluded = ["sort"],
     _excluded2 = ["dataKey"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -38,10 +38,14 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
 function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); }
@@ -50,6 +54,8 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Objec
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function getTextWidth(text) {
   // re-use canvas object for better performance
   var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement('canvas'));
@@ -102,48 +108,132 @@ var defaultStyles = {
   }
 };
 
+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: id,
+    value: value !== null && value !== void 0 ? value : [],
+    multiple: true,
+    onChange: function onChange(evt, newVal) {
+      setValue(newVal);
+    },
+    options: options // getOptionLabel={(code) => options.get(code)}
+    ,
+    renderInput: function renderInput(props) {
+      return /*#__PURE__*/_react["default"].createElement(_material.TextField // label={<FormattedMessage id={titleMessage} />}
+      , props);
+    },
+    renderTags: function renderTags(val, getTagsProps) {
+      return val.map(function (code, index) {
+        return /*#__PURE__*/_react["default"].createElement(_material.Chip, _extends({
+          id: 'chip_' + code,
+          size: 'small',
+          label: code
+        }, getTagsProps({
+          index: index
+        })));
+      });
+    }
+  }));
+};
+
+var initIndexer = function initIndexer(props, oldProps, versionSetter) {
+  if (!props.sortable) {
+    return null;
+  }
+
+  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 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), "state", {
-      key: undefined,
-      direction: 'asc',
-      headerHeight: _this.props.headerHeight
+    _defineProperty(_assertThisInitialized(_this), "setVersion", function (v) {
+      _this.setState({
+        indirectionVersion: v
+      });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "reorderIndex", (0, _memoizeOne["default"])(function (key, direction, filter, rows) {
-      if (!rows) return [];
-      var indexedArray = [];
+    _defineProperty(_assertThisInitialized(_this), "preFilterData", (0, _memoizeOne["default"])(function (columns, rows) {
+      return _this.state.indexer.preFilterRowMapping(columns, rows);
+    }));
 
-      for (var i = 0; i < rows.length; i++) {
-        var row = rows[i];
-        if (!filter || filter(row)) indexedArray.push([row, i]);
-      }
+    _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);
 
-      function compareValue(a, b, isNumeric, reverse) {
-        var mult = reverse ? 1 : -1;
-        if (a === undefined && b === undefined) return 0;else if (a === undefined) return mult;else if (b === undefined) return -mult;
-        return isNumeric ? (Number(a) < Number(b) ? 1 : -1) * mult : ('' + a).localeCompare(b) * mult;
-      }
+        var reorderedIndex = indexer.makeGroupAndSortIndirector(prefiltered, columns);
+        return {
+          viewIndexToModel: reorderedIndex,
+          rowGetter: function rowGetter(viewIndex) {
+            if (reorderedIndex === null) return rows[viewIndex];
 
-      if (key !== undefined) {
-        var reverse = direction === 'asc';
-        var isNumeric = _this.props.columns[key].numeric;
-        var dataKey = _this.props.columns[key].dataKey;
-        if (dataKey && dataKey !== '' && _this.state.direction !== '') if (_this.props.sort) return _this.props.sort(dataKey, reverse, isNumeric);
-        indexedArray.sort(function (a, b) {
-          return compareValue(a[0][dataKey], b[0][dataKey], isNumeric, reverse);
-        });
+            if (viewIndex >= reorderedIndex.length || viewIndex < 0) {
+              return {};
+            }
+
+            var modelIndex = reorderedIndex[viewIndex];
+            return rows[modelIndex];
+          }
+        };
       }
 
-      return indexedArray.map(function (k) {
-        return k[1];
-      });
+      return {
+        viewIndexToModel: null,
+        rowGetter: function rowGetter(viewIndex) {
+          return rows[viewIndex];
+        }
+      };
     }));
 
     _defineProperty(_assertThisInitialized(_this), "computeDataWidth", function (text) {
@@ -156,14 +246,16 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
         if (col.width) {
           sizes[col.dataKey] = col.width;
         } else {
-          /* calculate the header (and min size if exists) */
+          /* calculate the header (and min size if exists)
+           * NB : ignores the possible icons
+           */
           var size = Math.max(col.minWidth || 0, _this.computeDataWidth(col.label));
           /* calculate for each row the width, and keep the max  */
 
           for (var i = 0; i < rows.length; ++i) {
-            var text = _this.getDisplayValue(col, rowGetter({
-              index: i
-            })[col.dataKey]);
+            var gotRow = rowGetter(i);
+
+            var text = _this.getDisplayValue(col, gotRow[col.dataKey]);
 
             size = Math.max(size, _this.computeDataWidth(text));
           }
@@ -175,52 +267,200 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
       return sizes;
     }));
 
+    _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;
+      });
+
+      if ((0, _KeyedColumnsRowIndexer.getHelper)(col) !== _KeyedColumnsRowIndexer.collectibleHelper) {
+        return;
+      }
+
+      _this.setState({
+        popoverAnchorEl: popoverTarget,
+        popoverColKey: colKey
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "closePopover", function (evt, reason) {
+      var bumpsVersion = false;
+
+      if (reason === 'backdropClick') {
+        bumpsVersion = _this._commitFilterChange();
+      }
+
+      _this.setState({
+        popoverAnchorEl: null,
+        popoverColKey: null,
+        deferredFilterChange: null,
+        indirectionVersion: _this.state.indirectionVersion + (bumpsVersion ? 1 : 0)
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "makeColumnFilterEditor", function () {
+      var _prefiltered$colsStat, _col$label;
+
+      var colKey = _this.state.popoverColKey;
+
+      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 options = [];
+
+      if (outerParams) {
+        options.push.apply(options, outerParams);
+      }
+
+      var colStat = prefiltered === null || prefiltered === void 0 ? void 0 : (_prefiltered$colsStat = prefiltered.colsStats) === null || _prefiltered$colsStat === void 0 ? void 0 : _prefiltered$colsStat[colKey];
+
+      if (colStat === null || colStat === void 0 ? void 0 : colStat.seen) {
+        var _loop = function _loop() {
+          var key = _step.value;
+
+          if (options.findIndex(function (o) {
+            return o === key;
+          }) < 0) {
+            options.push(key);
+          }
+        };
+
+        for (var _iterator = _createForOfIteratorHelperLoose(Object.getOwnPropertyNames(colStat.seen)), _step; !(_step = _iterator()).done;) {
+          _loop();
+        }
+      }
+
+      var col = _this.props.columns.find(function (c) {
+        return c.dataKey === colKey;
+      });
+
+      return /*#__PURE__*/_react["default"].createElement(AmongChooser, {
+        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",
+        setValue: function setValue(newVal) {
+          _this.onFilterParamsChange(newVal, colKey);
+        }
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_commitFilterChange", function () {
+      if (_this.state.deferredFilterChange) {
+        var _newVal;
+
+        var colKey = _this.state.deferredFilterChange.colKey;
+        var newVal = _this.state.deferredFilterChange.newVal;
+
+        if (((_newVal = newVal) === null || _newVal === void 0 ? void 0 : _newVal.length) === 0) {
+          newVal = null;
+        }
+
+        if (_this.state.indexer.setColFilterUserParams(colKey, newVal)) {
+          return true;
+        }
+      }
+
+      return false;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "sortClickHandler", function (evt, name, columnIndex) {
+      var colKey = _this.props.columns[columnIndex].dataKey;
+
+      if (evt.altKey) {
+        _this.openPopover(evt.target, colKey);
+
+        return;
+      }
+
+      var way = _KeyedColumnsRowIndexer.CHANGE_WAYS.SIMPLE;
+
+      if (evt.ctrlKey && evt.shiftKey) {
+        way = _KeyedColumnsRowIndexer.CHANGE_WAYS.AMEND;
+      } else if (evt.ctrlKey) {
+        way = _KeyedColumnsRowIndexer.CHANGE_WAYS.REMOVE;
+      } else if (evt.shiftKey) {
+        way = _KeyedColumnsRowIndexer.CHANGE_WAYS.TAIL;
+      }
+
+      if (_this.state.indexer.updateSortingFromUser(colKey, way)) {
+        _this.setState({
+          indirectionVersion: _this.state.indirectionVersion + 1
+        });
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "filterClickHandler", function (evt, retargeted, columnIndex) {
+      var colKey = _this.props.columns[columnIndex].dataKey;
+
+      _this.openPopover(retargeted, colKey);
+    });
+
     _defineProperty(_assertThisInitialized(_this), "sortableHeader", function (_ref) {
+      var _prefiltered$colsStat2;
+
       var label = _ref.label,
-          columnIndex = _ref.columnIndex,
-          width = _ref.width;
+          columnIndex = _ref.columnIndex;
       var _this$props = _this.props,
           columns = _this$props.columns,
           classes = _this$props.classes;
-      return /*#__PURE__*/_react["default"].createElement(_TableSortLabel["default"], {
-        component: "div",
-        className: (0, _clsx3["default"])(classes.tableCell, classes.flexContainer, classes.header),
-        active: columnIndex === _this.state.key,
-        style: {
-          justifyContent: columns[columnIndex].numeric ? 'flex-end' : 'baseline',
-          height: _this.state.headerHeight
-        },
-        direction: _this.state.direction,
-        onClick: function onClick() {
-          var _this$state = _this.state,
-              key = _this$state.key,
-              direction = _this$state.direction;
-          if (key === undefined) key = columnIndex;else if (direction === 'asc') direction = 'desc';else {
-            key = undefined;
-            direction = 'asc';
-          }
+      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 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;
+
+      if (colStat === null || colStat === void 0 ? void 0 : colStat.seen) {
+        var countSeen = Object.getOwnPropertyNames(colStat.seen).length;
+        var userSelectedCount = userParams === null || userParams === void 0 ? void 0 : userParams.length;
+        filterLevel += userSelectedCount ? 1 : 0;
+        filterLevel += userSelectedCount >= countSeen ? 2 : 0;
+      }
 
-          _this.setState({
-            key: key,
-            direction: direction
-          });
-        },
-        width: width,
+      var onFilterClick = numeric || _this.props.sort ? undefined : function (ev, retargeted) {
+        _this.filterClickHandler(ev, retargeted, columnIndex);
+      };
+      return /*#__PURE__*/_react["default"].createElement(_ColumnHeader["default"], {
+        label: label,
         ref: function ref(e) {
-          return _this._registerObserver(e);
-        }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
+          return _this._registerHeader(label, e);
+        },
+        className: (0, _clsx3["default"])(classes.tableCell, classes.header),
+        sortSignedRank: signedRank,
+        filterLevel: filterLevel,
+        numeric: numeric,
+        onSortClick: function onSortClick(ev, name) {
+          _this.sortClickHandler(ev, name, columnIndex);
+        },
+        onFilterClick: onFilterClick
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "simpleHeaderRenderer", function (_ref2) {
+      var label = _ref2.label;
+      return /*#__PURE__*/_react["default"].createElement("div", {
         ref: function ref(element) {
           _this._registerHeader(label, element);
         }
-      }, label));
+      }, label);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getRowClassName", function (_ref2) {
+    _defineProperty(_assertThisInitialized(_this), "getRowClassName", function (_ref3) {
       var _rowGetter, _rowGetter2, _clsx;
 
-      var index = _ref2.index,
-          rowGetter = _ref2.rowGetter;
+      var index = _ref3.index,
+          rowGetter = _ref3.rowGetter;
       var _this$props2 = _this.props,
           classes = _this$props2.classes,
           onRowClick = _this$props2.onRowClick;
@@ -235,12 +475,12 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
       }
     });
 
-    _defineProperty(_assertThisInitialized(_this), "cellRenderer", function (_ref3) {
+    _defineProperty(_assertThisInitialized(_this), "cellRenderer", function (_ref4) {
       var _rows$rowIndex, _rows$rowIndex2, _clsx2;
 
-      var cellData = _ref3.cellData,
-          columnIndex = _ref3.columnIndex,
-          rowIndex = _ref3.rowIndex;
+      var cellData = _ref4.cellData,
+          columnIndex = _ref4.columnIndex,
+          rowIndex = _ref4.rowIndex;
       var _this$props3 = _this.props,
           columns = _this$props3.columns,
           classes = _this$props3.classes,
@@ -250,7 +490,7 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
 
       var displayedValue = _this.getDisplayValue(columns[columnIndex], cellData);
 
-      return /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
+      return /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
         component: "div",
         className: (0, _clsx3["default"])(classes.tableCell, classes.flexContainer, (_clsx2 = {}, _clsx2[classes.noClick] = displayedValue === undefined || ((_rows$rowIndex = rows[rowIndex]) === null || _rows$rowIndex === void 0 ? void 0 : _rows$rowIndex.notClickable) === true || onCellClick == null || columns[columnIndex].clickable === undefined || !columns[columnIndex].clickable, _clsx2[classes.tableCellColor] = displayedValue === undefined || onCellClick !== null && !((_rows$rowIndex2 = rows[rowIndex]) === null || _rows$rowIndex2 === void 0 ? void 0 : _rows$rowIndex2.notClickable) === true && columns[columnIndex].clickable !== undefined && columns[columnIndex].clickable, _clsx2)),
         variant: "body",
@@ -272,55 +512,81 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
       }));
     });
 
-    _defineProperty(_assertThisInitialized(_this), "headerRenderer", function (_ref4) {
-      var label = _ref4.label,
-          columnIndex = _ref4.columnIndex;
+    _defineProperty(_assertThisInitialized(_this), "makeSizedTable", function (height, width, sizes, reorderedIndex, _rowGetter3) {
+      var _reorderedIndex$lengt;
+
       var _this$props4 = _this.props,
-          columns = _this$props4.columns,
-          classes = _this$props4.classes;
-      return /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
-        component: "div",
-        className: (0, _clsx3["default"])(classes.tableCell, classes.flexContainer, classes.noClick, classes.header),
-        variant: "head",
-        style: {
-          height: _this.state.headerHeight
+          sort = _this$props4.sort,
+          otherProps = _objectWithoutPropertiesLoose(_this$props4, _excluded);
+
+      return /*#__PURE__*/_react["default"].createElement(_reactVirtualized.Table, _extends({}, otherProps, {
+        height: height,
+        width: width,
+        rowHeight: otherProps.rowHeight,
+        gridStyle: {
+          direction: 'inherit'
         },
-        align: columns[columnIndex].numeric || false ? 'right' : 'left',
-        ref: function ref(e) {
-          return _this._registerObserver(e);
-        }
-      }, /*#__PURE__*/_react["default"].createElement("div", {
-        ref: function ref(element) {
-          _this._registerHeader(label, element);
+        headerHeight: _this.state.headerHeight,
+        className: otherProps.classes.table,
+        onRowClick: _this.props.onRowClick &&
+        /* 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;
+          return _this.getRowClassName({
+            index: index,
+            rowGetter: _rowGetter3
+          });
+        },
+        rowGetter: function rowGetter(_ref6) {
+          var index = _ref6.index;
+          return _rowGetter3(index);
         }
-      }, label));
+      }), otherProps.columns.map(function (_ref7, index) {
+        var dataKey = _ref7.dataKey,
+            other = _objectWithoutPropertiesLoose(_ref7, _excluded2);
+
+        return /*#__PURE__*/_react["default"].createElement(_reactVirtualized.Column, _extends({
+          key: dataKey,
+          headerRenderer: _this.makeHeaderRenderer(dataKey, index),
+          className: otherProps.classes.flexContainer,
+          cellRenderer: _this.cellRenderer,
+          dataKey: dataKey,
+          flexGrow: 1,
+          width: sizes[dataKey]
+        }, other));
+      }));
     });
 
     _defineProperty(_assertThisInitialized(_this), "getCSVFilename", function () {
-      if (_this.props.name && _this.props.name.length > 0) {
+      var _this$props$name;
+
+      if (((_this$props$name = _this.props.name) === null || _this$props$name === void 0 ? void 0 : _this$props$name.length) > 0) {
         return _this.props.name.replace(/\s/g, '_');
       } else {
-        var filename = '';
-
-        _this.props.columns.forEach(function (col, idx) {
-          filename += col.label;
-          if (idx !== _this.props.columns.length - 1) filename += '_';
-        });
-
+        var filename = Object.entries(_this.props.columns).map(function (p) {
+          return p[1].label;
+        }).join('_');
         return filename;
       }
     });
 
     _defineProperty(_assertThisInitialized(_this), "getCSVData", function () {
-      var reorderedIndex = _this.reorderIndex(_this.state.key, _this.state.direction, _this.props.filter, _this.props.rows);
+      var _reorderedIndex$viewI, _reorderedIndex$viewI2;
 
+      var reorderedIndex = _this.reorderIndex(_this.state.indirectionVersion, _this.props.rows, _this.props.columns);
+
+      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 = [];
-      reorderedIndex.forEach(function (index) {
+
+      var _loop2 = function _loop2(index) {
         var myobj = {};
-        var sortedRow = _this.props.rows[index];
+        var sortedRow = reorderedIndex.rowGetter(index);
+        var exportedKeys = _this.props.exportCSVDataKeys;
 
         _this.props.columns.forEach(function (col) {
-          if (_this.props.exportCSVDataKeys !== undefined && _this.props.exportCSVDataKeys.find(function (el) {
+          if (exportedKeys === null || exportedKeys === void 0 ? void 0 : exportedKeys.find(function (el) {
             return el === col.dataKey;
           })) {
             myobj[col.dataKey] = sortedRow[col.dataKey];
@@ -328,7 +594,12 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
         });
 
         csvData.push(myobj);
-      });
+      };
+
+      for (var index = 0; index < rowsCount; ++index) {
+        _loop2(index);
+      }
+
       return Promise.resolve(csvData);
     });
 
@@ -352,17 +623,43 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
     _this._registerObserver = _this._registerObserver.bind(_assertThisInitialized(_this));
     _this.headers = (0, _react.createRef)();
     _this.headers.current = {};
-    var options = {
+    var _options = {
       root: null,
       rootMargin: '0px',
       threshold: 0.1
     };
-    _this.observer = new IntersectionObserver(_this._computeHeaderSize, options);
+    _this.observer = new IntersectionObserver(_this._computeHeaderSize, _options);
+    _this.state = {
+      headerHeight: _this.props.headerHeight,
+      indexer: initIndexer(_props, null, _this.setVersion),
+      indirectionVersion: 0,
+      reorderIndex: null,
+      popoverAnchorEl: null,
+      popoverColKey: null,
+      deferredFilterChange: null
+    };
     return _this;
   }
 
   var _proto = MuiVirtualizedTable.prototype;
 
+  _proto.componentDidUpdate = function componentDidUpdate(oldProps) {
+    if (oldProps.data !== this.props.data) {
+      this.setState({
+        indexer: initIndexer(this.props, oldProps)
+      });
+    }
+  };
+
+  _proto.componentDidMount = function componentDidMount() {
+    window.addEventListener('resize', this._computeHeaderSize);
+  };
+
+  _proto.componentWillUnmount = function componentWillUnmount() {
+    window.removeEventListener('resize', this._computeHeaderSize);
+    this.observer.disconnect();
+  };
+
   _proto._registerHeader = function _registerHeader(label, header) {
     if (header !== null) {
       this.headers.current[label] = header;
@@ -375,21 +672,34 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
     }
   };
 
+  _proto.onFilterParamsChange = function onFilterParamsChange(newVal, colKey) {
+    var nonEmpty = newVal.length === 0 ? null : newVal;
+
+    if (this.props.defersFilterChanges) {
+      this.setState({
+        deferredFilterChange: {
+          newVal: newVal,
+          colKey: colKey
+        }
+      });
+    } else if (this.state.indexer.setColFilterUserParams(colKey, nonEmpty)) {
+      this.setState({
+        indirectionVersion: this.state.indirectionVersion + 1
+      });
+    }
+  };
+
   _proto.getDisplayValue = function getDisplayValue(column, cellData) {
     var displayedValue;
 
-    if (column.numeric) {
-      if (!isNaN(cellData)) {
-        if (column.fractionDigits !== undefined && column.fractionDigits !== 0) {
-          displayedValue = Number(cellData).toFixed(column.fractionDigits);
-        } else {
-          displayedValue = Math.round(cellData);
-        }
-      } else {
-        displayedValue = '';
-      }
-    } else {
+    if (!column.numeric) {
       displayedValue = cellData;
+    } else if (isNaN(cellData)) {
+      displayedValue = '';
+    } else if (column.fractionDigits === undefined || column.fractionDigits === 0) {
+      displayedValue = Math.round(cellData);
+    } else {
+      displayedValue = Number(cellData).toFixed(column.fractionDigits);
     }
 
     if (column.unit !== undefined) {
@@ -401,17 +711,16 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
   };
 
   _proto._computeHeaderSize = function _computeHeaderSize() {
-    console.debug('recompute header size');
     var headers = Object.values(this.headers.current);
-    if (headers.length === 0) return;
-    var headerHeight = this.props.headerHeight;
-    headers.forEach(function (h) {
-      // https://developer.mozilla.org/fr/docs/Web/API/Element/scrollHeight
-      // The scrollHeight value is equal to the minimum height the element
-      // would require in order to fit all the content in the viewport
-      // without using a vertical scrollbar.
-      headerHeight = Math.max(h.scrollHeight + DEFAULT_CELL_PADDING, headerHeight);
+    if (headers.length === 0) return; // for now keep 'historical' use of scrollHeight,
+    // though it can not make a difference from clientHeight,
+    // as overflow-y as no scroll value
+
+    var scrollHeights = headers.map(function (header) {
+      return header.scrollHeight;
     });
+    var headerHeight = Math.max(Math.max.apply(Math, scrollHeights) + DEFAULT_CELL_PADDING, this.props.headerHeight // hides (most often) padding override by forcing height
+    );
 
     if (headerHeight !== this.state.headerHeight) {
       this.setState({
@@ -420,45 +729,41 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
     }
   };
 
-  _proto.componentDidMount = function componentDidMount() {
-    window.addEventListener('resize', this._computeHeaderSize);
-  };
-
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    window.removeEventListener('resize', this._computeHeaderSize);
-    this.observer.disconnect();
-  };
-
-  _proto.render = function render() {
+  _proto.makeHeaderRenderer = function makeHeaderRenderer(dataKey, columnIndex) {
     var _this2 = this;
 
     var _this$props5 = this.props,
-        name = _this$props5.name,
-        classes = _this$props5.classes,
-        rows = _this$props5.rows,
         columns = _this$props5.columns,
-        rowHeight = _this$props5.rowHeight,
-        headerHeight = _this$props5.headerHeight,
-        rowCount = _this$props5.rowCount,
-        sortable = _this$props5.sortable,
-        enableExportCSV = _this$props5.enableExportCSV,
-        tableProps = _objectWithoutPropertiesLoose(_this$props5, _excluded);
-
-    if (tableProps.onRowClick) {
-      tableProps.onRowClick = this.onClickableRowClick;
-    }
-
-    var reorderedIndex = this.reorderIndex(this.state.key, this.state.direction, this.props.filter, this.props.rows);
-
-    var getIndexFor = function getIndexFor(index) {
-      return index < reorderedIndex.length ? reorderedIndex[index] : 0;
+        classes = _this$props5.classes;
+    return function (headerProps) {
+      return /*#__PURE__*/_react["default"].createElement(_material.TableCell, {
+        component: "div",
+        className: (0, _clsx3["default"])(classes.tableCell, classes.flexContainer, classes.noClick, classes.header),
+        variant: "head",
+        style: {
+          height: _this2.state.headerHeight
+        },
+        align: columns[columnIndex].numeric || false ? 'right' : 'left',
+        ref: function ref(e) {
+          return _this2._registerObserver(e);
+        }
+      }, _this2.props.sortable ? _this2.sortableHeader(_extends({}, headerProps, {
+        columnIndex: columnIndex,
+        key: {
+          dataKey: dataKey
+        }
+      })) : _this2.simpleHeaderRenderer(_extends({}, headerProps)));
     };
+  };
 
-    var _rowGetter3 = function rowGetter(index) {
-      return _this2.props.rows[getIndexFor(index)];
-    };
+  _proto.render = function render() {
+    var _this3 = this;
+
+    var _this$reorderIndex = this.reorderIndex(this.state.indirectionVersion, this.props.rows, this.props.columns),
+        viewIndexToModel = _this$reorderIndex.viewIndexToModel,
+        rowGetter = _this$reorderIndex.rowGetter;
 
-    var sizes = this.sizes(this.props.columns, this.props.rows, _rowGetter3);
+    var sizes = this.sizes(this.props.columns, this.props.rows, rowGetter);
     var csvHeaders = this.csvHeaders(this.props.columns, this.props.exportCSVDataKeys);
     return /*#__PURE__*/_react["default"].createElement("div", {
       style: {
@@ -466,7 +771,7 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
         flexDirection: 'column',
         height: '100%'
       }
-    }, enableExportCSV && /*#__PURE__*/_react["default"].createElement("div", {
+    }, this.props.enableExportCSV && /*#__PURE__*/_react["default"].createElement("div", {
       style: {
         display: 'flex',
         justifyContent: 'flex-end',
@@ -478,67 +783,30 @@ var MuiVirtualizedTable = /*#__PURE__*/function (_React$PureComponent) {
       datas: this.getCSVData,
       columns: csvHeaders,
       filename: this.getCSVFilename()
-    }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], {
+    }, /*#__PURE__*/_react["default"].createElement(_material.IconButton, {
       "aria-label": "exportCSVButton",
       size: "large"
     }, /*#__PURE__*/_react["default"].createElement(_GetApp["default"], null)))), /*#__PURE__*/_react["default"].createElement("div", {
       style: {
         flexGrow: 1
       }
-    }, /*#__PURE__*/_react["default"].createElement(_reactVirtualized.AutoSizer, null, function (_ref5) {
-      var height = _ref5.height,
-          width = _ref5.width;
-      return /*#__PURE__*/_react["default"].createElement(_reactVirtualized.Table, _extends({
-        height: height,
-        width: width,
-        rowHeight: rowHeight,
-        gridStyle: {
-          direction: 'inherit'
-        },
-        headerHeight: _this2.state.headerHeight,
-        className: classes.table
-      }, tableProps, {
-        rowCount: reorderedIndex.length,
-        rowClassName: function rowClassName(_ref6) {
-          var index = _ref6.index;
-          return _this2.getRowClassName({
-            index: index,
-            rowGetter: _rowGetter3
-          });
-        },
-        rowGetter: function rowGetter(_ref7) {
-          var index = _ref7.index;
-          return _rowGetter3(index);
-        }
-      }), columns.map(function (_ref8, index) {
-        var dataKey = _ref8.dataKey,
-            other = _objectWithoutPropertiesLoose(_ref8, _excluded2);
-
-        return /*#__PURE__*/_react["default"].createElement(_reactVirtualized.Column, _extends({
-          key: dataKey,
-          headerRenderer: function headerRenderer(headerProps) {
-            if (sortable) {
-              return _this2.sortableHeader(_extends({}, headerProps, {
-                width: sizes[dataKey],
-                columnIndex: index,
-                key: {
-                  dataKey: dataKey
-                }
-              }));
-            } else {
-              return _this2.headerRenderer(_extends({}, headerProps, {
-                columnIndex: index
-              }));
-            }
-          },
-          className: classes.flexContainer,
-          cellRenderer: _this2.cellRenderer,
-          dataKey: dataKey,
-          flexGrow: 1,
-          width: sizes[dataKey]
-        }, other));
-      }));
-    })));
+    }, /*#__PURE__*/_react["default"].createElement(_reactVirtualized.AutoSizer, null, function (_ref8) {
+      var height = _ref8.height,
+          width = _ref8.width;
+      return _this3.makeSizedTable(height, width, sizes, viewIndexToModel, rowGetter);
+    })), this.state.popoverAnchorEl && /*#__PURE__*/_react["default"].createElement(_material.Popover, {
+      anchorEl: this.state.popoverAnchorEl,
+      anchorOrigin: {
+        vertical: 'center',
+        horizontal: 'center'
+      },
+      transformOrigin: {
+        vertical: 'center',
+        horizontal: 'center'
+      },
+      onClose: this.closePopover,
+      open: !!this.state.popoverAnchorEl
+    }, this.makeColumnFilterEditor()));
   };
 
   return MuiVirtualizedTable;
@@ -566,13 +834,14 @@ MuiVirtualizedTable.propTypes = process.env.NODE_ENV !== "production" ? {
   })).isRequired,
   enableExportCSV: _propTypes["default"].bool,
   exportCSVDataKeys: _propTypes["default"].array,
+  sort: _propTypes["default"].func,
   sortable: _propTypes["default"].bool,
+  indexer: _propTypes["default"].object,
   headerHeight: _propTypes["default"].number,
   onRowClick: _propTypes["default"].func,
   onCellClick: _propTypes["default"].func,
   rowHeight: _propTypes["default"].number,
-  filter: _propTypes["default"].func,
-  sort: _propTypes["default"].func
+  filter: _propTypes["default"].func
 } : {};
 
 var _default = (0, _withStyles["default"])(defaultStyles)(MuiVirtualizedTable);