material-react-table 0.5.8 → 0.5.9

package/dist/MaterialReactTable.d.ts

@@ -3,6 +3,7 @@ import { AlertProps, IconButtonProps, LinearProgressProps, SkeletonProps, TableB
 import { Cell, Column, ColumnInstance, FilterType, HeaderGroup, Row, TableInstance, TableOptions, TableState, UseColumnOrderInstanceProps, UseColumnOrderState, UseExpandedInstanceProps, UseExpandedOptions, UseExpandedRowProps, UseExpandedState, UseFiltersColumnOptions, UseFiltersColumnProps, UseFiltersInstanceProps, UseFiltersOptions, UseFiltersState, UseGlobalFiltersColumnOptions, UseGlobalFiltersInstanceProps, UseGlobalFiltersOptions, UseGlobalFiltersState, UseGroupByCellProps, UseGroupByColumnOptions, UseGroupByColumnProps, UseGroupByInstanceProps, UseGroupByOptions, UseGroupByRowProps, UseGroupByState, UsePaginationInstanceProps, UsePaginationOptions, UsePaginationState, UseResizeColumnsColumnOptions, UseResizeColumnsColumnProps, UseResizeColumnsOptions, UseResizeColumnsState, UseRowSelectInstanceProps, UseRowSelectOptions, UseRowSelectRowProps, UseRowSelectState, UseRowStateCellProps, UseRowStateInstanceProps, UseRowStateOptions, UseRowStateRowProps, UseRowStateState, UseSortByColumnOptions, UseSortByColumnProps, UseSortByInstanceProps, UseSortByOptions, UseSortByState, UseTableHeaderGroupProps, UseTableInstanceProps, UseTableOptions } from 'react-table';
 import { MRT_Localization } from './localization';
 import { MRT_Icons } from './icons';
+import { MRT_FILTER_TYPE } from './enums';
 export declare type MRT_TableOptions<D extends {} = {}> = TableOptions<D> & UseExpandedOptions<D> & UseFiltersOptions<D> & UseGlobalFiltersOptions<D> & UseGroupByOptions<D> & UsePaginationOptions<D> & UseResizeColumnsOptions<D> & UseRowSelectOptions<D> & UseRowStateOptions<D> & UseSortByOptions<D> & {
     columns: (Column<D> & MRT_ColumnInterface)[];
     data: D[];
@@ -53,16 +54,6 @@ export declare type MRT_Row<D extends {} = {}> = Row<D> & UseExpandedRowProps<D>
     cells: MRT_Cell<D>[];
 };
 export declare type MRT_Cell<D extends {} = {}, _V = any> = Cell<D> & UseGroupByCellProps<D> & UseRowStateCellProps<D> & {};
-export declare enum MRT_FILTER_TYPE {
-    CONTAINS = "contains",
-    EMPTY = "empty",
-    ENDS_WITH = "endsWith",
-    EQUALS = "equals",
-    FUZZY = "fuzzy",
-    NOT_EMPTY = "notEmpty",
-    NOT_EQUALS = "notEquals",
-    STARTS_WITH = "startsWith"
-}
 export declare type MRT_FilterType = MRT_FILTER_TYPE | Function;
 export declare type MRT_TableState<D extends {} = {}> = TableState<D> & UseColumnOrderState<D> & UseExpandedState<D> & UseFiltersState<D> & UseGlobalFiltersState<D> & UseGroupByState<D> & UsePaginationState<D> & UseResizeColumnsState<D> & UseRowSelectState<D> & UseRowStateState<D> & UseSortByState<D> & {
     currentEditingRow: MRT_Row<D> | null;

package/dist/body/MRT_TableBodyCell.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { MRT_Cell } from '..';
+import type { MRT_Cell } from '..';
 export declare const commonTableBodyCellStyles: (densePadding: boolean) => {
     p: string;
     transition: string;

package/dist/body/MRT_TableBodyRow.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { MRT_Row } from '..';
+import type { MRT_Row } from '..';
 interface Props {
     row: MRT_Row;
 }

package/dist/body/MRT_TableDetailPanel.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { MRT_Row } from '..';
+import type { MRT_Row } from '..';
 interface Props {
     row: MRT_Row;
 }

package/dist/buttons/MRT_EditActionButtons.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { MRT_Row } from '..';
+import type { MRT_Row } from '..';
 interface Props {
     row: MRT_Row;
 }

package/dist/buttons/MRT_ExpandButton.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { MRT_Row } from '..';
+import type { MRT_Row } from '..';
 interface Props {
     row: MRT_Row;
 }

package/dist/buttons/MRT_ToggleColumnActionMenuButton.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup } from '..';
 interface Props {
     column: MRT_HeaderGroup;
 }

package/dist/buttons/MRT_ToggleRowActionMenuButton.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { MRT_Row } from '..';
+import type { MRT_Row } from '..';
 interface Props {
     row: MRT_Row;
 }

package/dist/enums.d.ts

@@ -0,0 +1,12 @@
+export declare enum MRT_FILTER_TYPE {
+    CONTAINS = "contains",
+    EMPTY = "empty",
+    ENDS_WITH = "endsWith",
+    EQUALS = "equals",
+    FUZZY = "fuzzy",
+    GREATER_THAN = "greaterThan",
+    LESS_THAN = "lessThan",
+    NOT_EMPTY = "notEmpty",
+    NOT_EQUALS = "notEquals",
+    STARTS_WITH = "startsWith"
+}

package/dist/filtersFNs.d.ts

@@ -27,6 +27,14 @@ export declare const notEqualsFilterFN: {
     (rows: MRT_Row[], id: string, filterValue: string | number): MRT_Row<{}>[];
     autoRemove(val: any): boolean;
 };
+export declare const greaterThanFilterFN: {
+    (rows: MRT_Row[], id: string, filterValue: string | number): MRT_Row<{}>[];
+    autoRemove(val: any): boolean;
+};
+export declare const lessThanFilterFN: {
+    (rows: MRT_Row[], id: string, filterValue: string | number): MRT_Row<{}>[];
+    autoRemove(val: any): boolean;
+};
 export declare const emptyFilterFN: {
     (rows: MRT_Row[], id: string, _filterValue: string | number): MRT_Row<{}>[];
     autoRemove(val: any): boolean;
@@ -48,6 +56,14 @@ export declare const defaultFilterFNs: {
         (rows: MRT_Row[], id: string, filterValue: string | number): MRT_Row<{}>[];
         autoRemove(val: any): boolean;
     };
+    greaterThan: {
+        (rows: MRT_Row[], id: string, filterValue: string | number): MRT_Row<{}>[];
+        autoRemove(val: any): boolean;
+    };
+    lessThan: {
+        (rows: MRT_Row[], id: string, filterValue: string | number): MRT_Row<{}>[];
+        autoRemove(val: any): boolean;
+    };
     equals: {
         (rows: MRT_Row[], id: string, filterValue: string | number): MRT_Row<{}>[];
         autoRemove(val: any): boolean;

package/dist/footer/MRT_TableFooterCell.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup } from '..';
 interface Props {
     column: MRT_HeaderGroup;
 }

package/dist/footer/MRT_TableFooterRow.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup } from '..';
 interface Props {
     footerGroup: MRT_HeaderGroup;
 }

package/dist/head/MRT_TableHeadCell.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup } from '..';
 export declare const commonTableHeadCellStyles: (densePadding: boolean, enableColumnResizing?: boolean | undefined) => {
     fontWeight: string;
     height: string;

package/dist/head/MRT_TableHeadRow.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup } from '..';
 interface Props {
     headerGroup: MRT_HeaderGroup;
 }

package/dist/inputs/MRT_EditCellTextField.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { MRT_Cell } from '..';
+import type { MRT_Cell } from '..';
 interface Props {
     cell: MRT_Cell;
 }

package/dist/inputs/MRT_FilterTextField.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup } from '..';
 interface Props {
     column: MRT_HeaderGroup;
 }

package/dist/inputs/MRT_SelectCheckbox.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { MRT_Row } from '..';
+import type { MRT_Row } from '..';
 interface Props {
     row?: MRT_Row;
     selectAll?: boolean;

package/dist/localization.d.ts

@@ -1,5 +1,6 @@
 export interface MRT_Localization {
     actionsHeadColumnTitle: string;
+    changeFilterMode: string;
     columnActionMenuButtonTitle: string;
     columnActionMenuItemClearSort: string;
     columnActionMenuItemGroupBy: string;
@@ -17,6 +18,8 @@ export interface MRT_Localization {
     filterMenuItemEndsWith: string;
     filterMenuItemEquals: string;
     filterMenuItemFuzzy: string;
+    filterMenuItemGreaterThan: string;
+    filterMenuItemLessThan: string;
     filterMenuItemNotEmpty: string;
     filterMenuItemNotEquals: string;
     filterMenuItemStartsWith: string;
@@ -26,7 +29,6 @@ export interface MRT_Localization {
     filterTextFieldChipLabelNotEmpty: string;
     filterTextFieldClearButtonTitle: string;
     filterTextFieldPlaceholder: string;
-    changeFilterMode: string;
     rowActionButtonCancel: string;
     rowActionButtonSave: string;
     rowActionMenuButtonTitle: string;

package/dist/material-react-table.cjs.development.js

@@ -167,6 +167,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();
@@ -191,6 +211,8 @@ var defaultFilterFNs = {
   contains: containsFilterFN,
   empty: emptyFilterFN,
   endsWith: endsWithFilterFN,
+  greaterThan: greaterThanFilterFN,
+  lessThan: lessThanFilterFN,
   equals: equalsFilterFN,
   fuzzy: fuzzyFilterFN,
   notEmpty: notEmptyFilterFN,
@@ -232,12 +254,40 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
     return _extends({}, defaultFilterFNs, props.filterTypes);
   }, [props.filterTypes]);
 
-  var _useState6 = React.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 = React.useState(function () {
+    return getInitialFilterTypeState();
   }),
       currentFilterTypes = _useState6[0],
       setCurrentFilterTypes = _useState6[1];
@@ -302,6 +352,21 @@ var useMRT = function useMRT() {
   return React.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,
@@ -320,37 +385,55 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
 
   var filterTypes = React.useMemo(function () {
     return [{
-      type: exports.MRT_FILTER_TYPE.FUZZY,
+      type: MRT_FILTER_TYPE.FUZZY,
       label: localization.filterMenuItemFuzzy,
-      divider: false
+      divider: false,
+      fn: fuzzyFilterFN
     }, {
-      type: exports.MRT_FILTER_TYPE.CONTAINS,
+      type: MRT_FILTER_TYPE.CONTAINS,
       label: localization.filterMenuItemContains,
-      divider: true
+      divider: true,
+      fn: containsFilterFN
     }, {
-      type: exports.MRT_FILTER_TYPE.STARTS_WITH,
+      type: MRT_FILTER_TYPE.STARTS_WITH,
       label: localization.filterMenuItemStartsWith,
-      divider: false
+      divider: false,
+      fn: startsWithFilterFN
     }, {
-      type: exports.MRT_FILTER_TYPE.ENDS_WITH,
+      type: MRT_FILTER_TYPE.ENDS_WITH,
       label: localization.filterMenuItemEndsWith,
-      divider: true
+      divider: true,
+      fn: endsWithFilterFN
     }, {
-      type: exports.MRT_FILTER_TYPE.EQUALS,
+      type: MRT_FILTER_TYPE.EQUALS,
       label: localization.filterMenuItemEquals,
-      divider: false
+      divider: false,
+      fn: equalsFilterFN
     }, {
-      type: exports.MRT_FILTER_TYPE.NOT_EQUALS,
+      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: exports.MRT_FILTER_TYPE.EMPTY,
+      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: exports.MRT_FILTER_TYPE.NOT_EMPTY,
+      type: MRT_FILTER_TYPE.NOT_EMPTY,
       label: localization.filterMenuItemNotEmpty,
-      divider: false
+      divider: false,
+      fn: notEmptyFilterFN
     }];
   }, []);
 
@@ -362,7 +445,7 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
       return _extends({}, prev, (_extends2 = {}, _extends2[column.id] = value, _extends2));
     });
 
-    if ([exports.MRT_FILTER_TYPE.EMPTY, exports.MRT_FILTER_TYPE.NOT_EMPTY].includes(value)) {
+    if ([MRT_FILTER_TYPE.EMPTY, MRT_FILTER_TYPE.NOT_EMPTY].includes(value)) {
       column.setFilter(' ');
     }
 
@@ -386,14 +469,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__default.createElement(material.MenuItem, {
       divider: divider,
       key: index,
       onClick: function onClick() {
         return handleSelectFilterType(type);
       },
-      selected: type === filterType,
+      selected: type === filterType || fn === filterType,
       sx: commonMenuItemStyles,
       value: type
     }, label);
@@ -449,7 +533,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     setCurrentFilterTypes(function (prev) {
       var _extends2;
 
-      return _extends({}, prev, (_extends2 = {}, _extends2[column.id] = exports.MRT_FILTER_TYPE.FUZZY, _extends2));
+      return _extends({}, prev, (_extends2 = {}, _extends2[column.id] = MRT_FILTER_TYPE.FUZZY, _extends2));
     });
   };
 
@@ -462,7 +546,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   var filterType = tableInstance.state.currentFilterTypes[column.id];
   var isCustomFilterType = filterType instanceof Function;
   var isSelectFilter = !!column.filterSelectOptions;
-  var filterChipLabel = !isCustomFilterType && [exports.MRT_FILTER_TYPE.EMPTY, exports.MRT_FILTER_TYPE.NOT_EMPTY].includes(filterType);
+  var filterChipLabel = !isCustomFilterType && [MRT_FILTER_TYPE.EMPTY, MRT_FILTER_TYPE.NOT_EMPTY].includes(filterType);
   var filterPlaceholder = (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header));
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.TextField, Object.assign({
     fullWidth: true,
@@ -502,7 +586,6 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
         arrow: true,
         title: localization.changeFilterMode
       }, React__default.createElement("span", null, React__default.createElement(material.IconButton, {
-        disabled: isCustomFilterType,
         onClick: handleFilterMenuOpen,
         size: "small",
         sx: {
@@ -755,6 +838,7 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
     arrow: true,
     enterDelay: 1000,
     enterNextDelay: 1000,
+    placement: "top",
     title: localization.columnActionMenuButtonTitle
   }, React__default.createElement(material.IconButton, {
     "aria-label": localization.columnActionMenuButtonTitle,
@@ -2827,6 +2911,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}',
@@ -2843,8 +2928,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',
@@ -2902,18 +2988,6 @@ var MRT_Default_Icons = {
 };
 
 var _excluded = ["defaultColumn", "icons", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
-
-(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";
-})(exports.MRT_FILTER_TYPE || (exports.MRT_FILTER_TYPE = {}));
-
 var MaterialReactTable = (function (_ref) {
   var _ref$defaultColumn = _ref.defaultColumn,
       defaultColumn = _ref$defaultColumn === void 0 ? {