material-react-table 0.5.8 → 0.5.9

package/dist/material-react-table.esm.js

@@ -160,6 +160,26 @@ notEqualsFilterFN.autoRemove = function (val) {
   return !val;
 };
 
+var greaterThanFilterFN = function greaterThanFilterFN(rows, id, filterValue) {
+  return rows.filter(function (row) {
+    return !isNaN(+filterValue) && !isNaN(+row.values[id]) ? +row.values[id] > +filterValue : row.values[id].toString().toLowerCase().trim() > filterValue.toString().toLowerCase().trim();
+  });
+};
+
+greaterThanFilterFN.autoRemove = function (val) {
+  return !val;
+};
+
+var lessThanFilterFN = function lessThanFilterFN(rows, id, filterValue) {
+  return rows.filter(function (row) {
+    return !isNaN(+filterValue) && !isNaN(+row.values[id]) ? +row.values[id] < +filterValue : row.values[id].toString().toLowerCase().trim() < filterValue.toString().toLowerCase().trim();
+  });
+};
+
+lessThanFilterFN.autoRemove = function (val) {
+  return !val;
+};
+
 var emptyFilterFN = function emptyFilterFN(rows, id, _filterValue) {
   return rows.filter(function (row) {
     return !row.values[id].toString().toLowerCase().trim();
@@ -184,6 +204,8 @@ var defaultFilterFNs = {
   contains: containsFilterFN,
   empty: emptyFilterFN,
   endsWith: endsWithFilterFN,
+  greaterThan: greaterThanFilterFN,
+  lessThan: lessThanFilterFN,
   equals: equalsFilterFN,
   fuzzy: fuzzyFilterFN,
   notEmpty: notEmptyFilterFN,
@@ -225,12 +247,40 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
     return _extends({}, defaultFilterFNs, props.filterTypes);
   }, [props.filterTypes]);
 
-  var _useState6 = useState(function () {
-    return Object.assign.apply(Object, [{}].concat(props.columns.map(function (c) {
+  var getInitialFilterTypeState = function getInitialFilterTypeState() {
+    var lowestLevelColumns = props.columns;
+    var currentCols = props.columns;
+
+    while (!!currentCols.length && currentCols.some(function (col) {
+      return col.columns;
+    })) {
+      var nextCols = currentCols.filter(function (col) {
+        return !!col.columns;
+      }).map(function (col) {
+        return col.columns;
+      }).flat();
+
+      if (nextCols.every(function (col) {
+        return !col.columns;
+      })) {
+        lowestLevelColumns = [].concat(lowestLevelColumns, nextCols);
+      }
+
+      currentCols = nextCols;
+    }
+
+    lowestLevelColumns = lowestLevelColumns.filter(function (col) {
+      return !col.columns;
+    });
+    return Object.assign.apply(Object, [{}].concat(lowestLevelColumns.map(function (c) {
       var _ref, _c$filter, _props$initialState5, _props$initialState5$, _ref2;
 
       return _ref2 = {}, _ref2[c.accessor] = (_ref = (_c$filter = c.filter) != null ? _c$filter : props == null ? void 0 : (_props$initialState5 = props.initialState) == null ? void 0 : (_props$initialState5$ = _props$initialState5.filters) == null ? void 0 : _props$initialState5$[c.accessor]) != null ? _ref : !!c.filterSelectOptions ? 'equals' : 'fuzzy', _ref2;
     })));
+  };
+
+  var _useState6 = useState(function () {
+    return getInitialFilterTypeState();
   }),
       currentFilterTypes = _useState6[0],
       setCurrentFilterTypes = _useState6[1];
@@ -295,6 +345,21 @@ var useMRT = function useMRT() {
   return useContext(MaterialReactTableContext);
 };
 
+var MRT_FILTER_TYPE;
+
+(function (MRT_FILTER_TYPE) {
+  MRT_FILTER_TYPE["CONTAINS"] = "contains";
+  MRT_FILTER_TYPE["EMPTY"] = "empty";
+  MRT_FILTER_TYPE["ENDS_WITH"] = "endsWith";
+  MRT_FILTER_TYPE["EQUALS"] = "equals";
+  MRT_FILTER_TYPE["FUZZY"] = "fuzzy";
+  MRT_FILTER_TYPE["GREATER_THAN"] = "greaterThan";
+  MRT_FILTER_TYPE["LESS_THAN"] = "lessThan";
+  MRT_FILTER_TYPE["NOT_EMPTY"] = "notEmpty";
+  MRT_FILTER_TYPE["NOT_EQUALS"] = "notEquals";
+  MRT_FILTER_TYPE["STARTS_WITH"] = "startsWith";
+})(MRT_FILTER_TYPE || (MRT_FILTER_TYPE = {}));
+
 var commonMenuItemStyles = {
   py: '6px',
   my: 0,
@@ -315,35 +380,53 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
     return [{
       type: MRT_FILTER_TYPE.FUZZY,
       label: localization.filterMenuItemFuzzy,
-      divider: false
+      divider: false,
+      fn: fuzzyFilterFN
     }, {
       type: MRT_FILTER_TYPE.CONTAINS,
       label: localization.filterMenuItemContains,
-      divider: true
+      divider: true,
+      fn: containsFilterFN
     }, {
       type: MRT_FILTER_TYPE.STARTS_WITH,
       label: localization.filterMenuItemStartsWith,
-      divider: false
+      divider: false,
+      fn: startsWithFilterFN
     }, {
       type: MRT_FILTER_TYPE.ENDS_WITH,
       label: localization.filterMenuItemEndsWith,
-      divider: true
+      divider: true,
+      fn: endsWithFilterFN
     }, {
       type: MRT_FILTER_TYPE.EQUALS,
       label: localization.filterMenuItemEquals,
-      divider: false
+      divider: false,
+      fn: equalsFilterFN
     }, {
       type: MRT_FILTER_TYPE.NOT_EQUALS,
       label: localization.filterMenuItemNotEquals,
-      divider: true
+      divider: true,
+      fn: notEqualsFilterFN
+    }, {
+      type: MRT_FILTER_TYPE.GREATER_THAN,
+      label: localization.filterMenuItemGreaterThan,
+      divider: false,
+      fn: greaterThanFilterFN
+    }, {
+      type: MRT_FILTER_TYPE.LESS_THAN,
+      label: localization.filterMenuItemLessThan,
+      divider: true,
+      fn: lessThanFilterFN
     }, {
       type: MRT_FILTER_TYPE.EMPTY,
       label: localization.filterMenuItemEmpty,
-      divider: false
+      divider: false,
+      fn: emptyFilterFN
     }, {
       type: MRT_FILTER_TYPE.NOT_EMPTY,
       label: localization.filterMenuItemNotEmpty,
-      divider: false
+      divider: false,
+      fn: notEmptyFilterFN
     }];
   }, []);
 
@@ -379,14 +462,15 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
   }, filterTypes.map(function (_ref2, index) {
     var type = _ref2.type,
         label = _ref2.label,
-        divider = _ref2.divider;
+        divider = _ref2.divider,
+        fn = _ref2.fn;
     return React.createElement(MenuItem, {
       divider: divider,
       key: index,
       onClick: function onClick() {
         return handleSelectFilterType(type);
       },
-      selected: type === filterType,
+      selected: type === filterType || fn === filterType,
       sx: commonMenuItemStyles,
       value: type
     }, label);
@@ -495,7 +579,6 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
         arrow: true,
         title: localization.changeFilterMode
       }, React.createElement("span", null, React.createElement(IconButton, {
-        disabled: isCustomFilterType,
         onClick: handleFilterMenuOpen,
         size: "small",
         sx: {
@@ -748,6 +831,7 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
     arrow: true,
     enterDelay: 1000,
     enterNextDelay: 1000,
+    placement: "top",
     title: localization.columnActionMenuButtonTitle
   }, React.createElement(IconButton, {
     "aria-label": localization.columnActionMenuButtonTitle,
@@ -2820,6 +2904,7 @@ var MRT_TableContainer = function MRT_TableContainer() {
 
 var MRT_DefaultLocalization_EN = {
   actionsHeadColumnTitle: 'Actions',
+  changeFilterMode: 'Change filter mode',
   columnActionMenuButtonTitle: 'Column Actions',
   columnActionMenuItemClearSort: 'Clear sort',
   columnActionMenuItemGroupBy: 'Group by {column}',
@@ -2836,8 +2921,9 @@ var MRT_DefaultLocalization_EN = {
   filterMenuItemEmpty: 'Empty',
   filterMenuItemEndsWith: 'Ends With',
   filterMenuItemEquals: 'Equals',
-  changeFilterMode: 'Change filter mode',
   filterMenuItemFuzzy: 'Fuzzy Match (Default)',
+  filterMenuItemGreaterThan: 'Greater Than',
+  filterMenuItemLessThan: 'Less Than',
   filterMenuItemNotEmpty: 'Not Empty',
   filterMenuItemNotEquals: 'Not Equals',
   filterMenuItemStartsWith: 'Starts With',
@@ -2895,19 +2981,6 @@ var MRT_Default_Icons = {
 };
 
 var _excluded = ["defaultColumn", "icons", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
-var MRT_FILTER_TYPE;
-
-(function (MRT_FILTER_TYPE) {
-  MRT_FILTER_TYPE["CONTAINS"] = "contains";
-  MRT_FILTER_TYPE["EMPTY"] = "empty";
-  MRT_FILTER_TYPE["ENDS_WITH"] = "endsWith";
-  MRT_FILTER_TYPE["EQUALS"] = "equals";
-  MRT_FILTER_TYPE["FUZZY"] = "fuzzy";
-  MRT_FILTER_TYPE["NOT_EMPTY"] = "notEmpty";
-  MRT_FILTER_TYPE["NOT_EQUALS"] = "notEquals";
-  MRT_FILTER_TYPE["STARTS_WITH"] = "startsWith";
-})(MRT_FILTER_TYPE || (MRT_FILTER_TYPE = {}));
-
 var MaterialReactTable = (function (_ref) {
   var _ref$defaultColumn = _ref.defaultColumn,
       defaultColumn = _ref$defaultColumn === void 0 ? {
@@ -2938,5 +3011,4 @@ var MaterialReactTable = (function (_ref) {
 });
 
 export default MaterialReactTable;
-export { MRT_FILTER_TYPE };
 //# sourceMappingURL=material-react-table.esm.js.map