material-react-table 0.6.1 → 0.6.2

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

@@ -1,7 +1,7 @@
-import React, { useState, useMemo, useCallback, useContext, createContext, Fragment, useRef, useEffect } from 'react';
+import React, { useState, useCallback, useMemo, useContext, createContext, Fragment, useRef, useEffect } from 'react';
 import { useTable, useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect, useResizeColumns, useFlexLayout, useAsyncDebounce } from 'react-table';
-import { matchSorter } from 'match-sorter';
 import { Menu, MenuItem, TextField, InputAdornment, Tooltip, IconButton, Chip, FormControlLabel, Switch, Box, Button, Divider, TableCell, TableSortLabel, Collapse, Skeleton, Checkbox, TableRow, TableHead, alpha, TableBody, TableFooter, Table, TablePagination, useMediaQuery, Alert, Toolbar, TableContainer, Paper, LinearProgress } from '@mui/material';
+import { matchSorter } from 'match-sorter';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import CancelIcon from '@mui/icons-material/Cancel';
 import ClearAllIcon from '@mui/icons-material/ClearAll';
@@ -97,144 +97,12 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
-var fuzzySearchFN = function fuzzySearchFN(rows, columnIds, filterValue) {
-  return matchSorter(rows, filterValue.toString().trim(), {
-    keys: columnIds.map(function (c) {
-      return "values." + c;
-    }),
-    sorter: function sorter(rankedItems) {
-      return rankedItems;
-    }
-  });
-};
-
-fuzzySearchFN.autoRemove = function (val) {
-  return !val;
-};
-
-var fuzzyFilterFN = function fuzzyFilterFN(rows, id, filterValue) {
-  return matchSorter(rows, filterValue.toString().trim(), {
-    keys: ["values." + id],
-    sorter: function sorter(rankedItems) {
-      return rankedItems;
-    }
-  });
-};
-
-fuzzyFilterFN.autoRemove = function (val) {
-  return !val;
-};
-
-var containsFilterFN = function containsFilterFN(rows, id, filterValue) {
-  return rows.filter(function (row) {
-    return row.values[id].toString().toLowerCase().trim().includes(filterValue.toString().toLowerCase().trim());
-  });
-};
-
-containsFilterFN.autoRemove = function (val) {
-  return !val;
-};
-
-var startsWithFilterFN = function startsWithFilterFN(rows, id, filterValue) {
-  return rows.filter(function (row) {
-    return row.values[id].toString().toLowerCase().trim().startsWith(filterValue.toString().toLowerCase().trim());
-  });
-};
-
-startsWithFilterFN.autoRemove = function (val) {
-  return !val;
-};
-
-var endsWithFilterFN = function endsWithFilterFN(rows, id, filterValue) {
-  return rows.filter(function (row) {
-    return row.values[id].toString().toLowerCase().trim().endsWith(filterValue.toString().toLowerCase().trim());
-  });
-};
-
-endsWithFilterFN.autoRemove = function (val) {
-  return !val;
-};
-
-var equalsFilterFN = function equalsFilterFN(rows, id, filterValue) {
-  return rows.filter(function (row) {
-    return row.values[id].toString().toLowerCase().trim() === filterValue.toString().toLowerCase().trim();
-  });
-};
-
-equalsFilterFN.autoRemove = function (val) {
-  return !val;
-};
-
-var notEqualsFilterFN = function notEqualsFilterFN(rows, id, filterValue) {
-  return rows.filter(function (row) {
-    return row.values[id].toString().toLowerCase().trim() !== filterValue.toString().toLowerCase().trim();
-  });
-};
-
-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();
-  });
-};
-
-emptyFilterFN.autoRemove = function (val) {
-  return !val;
-};
-
-var notEmptyFilterFN = function notEmptyFilterFN(rows, id, _filterValue) {
-  return rows.filter(function (row) {
-    return !!row.values[id].toString().toLowerCase().trim();
-  });
-};
-
-notEmptyFilterFN.autoRemove = function (val) {
-  return !val;
-};
-
-var defaultFilterFNs = {
-  contains: containsFilterFN,
-  empty: emptyFilterFN,
-  endsWith: endsWithFilterFN,
-  equals: equalsFilterFN,
-  fuzzy: fuzzyFilterFN,
-  globalFuzzy: fuzzySearchFN,
-  greaterThan: greaterThanFilterFN,
-  lessThan: lessThanFilterFN,
-  notEmpty: notEmptyFilterFN,
-  notEquals: notEqualsFilterFN,
-  startsWith: startsWithFilterFN
-};
-
 var MaterialReactTableContext = /*#__PURE__*/function () {
   return createContext({});
 }();
 
 var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
-  var _props$initialState$d, _props$initialState, _props$initialState$f, _props$initialState2, _props$initialState$s, _props$initialState3, _props$initialState$s2, _props$initialState4, _props$globalFilter;
+  var _props$initialState$d, _props$initialState, _props$initialState$f, _props$initialState2, _props$initialState$s, _props$initialState3, _props$initialState$s2, _props$initialState4;
 
   var hooks = [useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect];
   if (props.enableColumnResizing) hooks.unshift(useResizeColumns, useFlexLayout);
@@ -259,9 +127,6 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
       showSearch = _useState5[0],
       setShowSearch = _useState5[1];
 
-  var filterTypes = useMemo(function () {
-    return _extends({}, defaultFilterFNs, props.filterTypes);
-  }, [props.filterTypes]);
   var findLowestLevelCols = useCallback(function () {
     var lowestLevelColumns = props.columns;
     var currentCols = props.columns;
@@ -299,17 +164,26 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
       currentFilterTypes = _useState6[0],
       setCurrentFilterTypes = _useState6[1];
 
-  var columns = useMemo(function () {
-    return findLowestLevelCols().map(function (column) {
-      column.filter = filterTypes[currentFilterTypes[column.accessor]];
+  var applyFiltersToColumns = useCallback(function (cols) {
+    return cols.map(function (column) {
+      if (column.columns) {
+        applyFiltersToColumns(column.columns);
+      } else {
+        var _props$filterTypes;
+
+        column.filter = props == null ? void 0 : (_props$filterTypes = props.filterTypes) == null ? void 0 : _props$filterTypes[currentFilterTypes[column.accessor]];
+      }
+
       return column;
     });
-  }, [props.columns, filterTypes, currentFilterTypes]);
-  var tableInstance = useTable.apply(void 0, [_extends({}, props, {
-    columns: columns,
+  }, [currentFilterTypes, props.filterTypes]);
+  var columns = useMemo(function () {
+    return applyFiltersToColumns(props.columns);
+  }, [props.columns, applyFiltersToColumns]);
+  var tableInstance = useTable.apply(void 0, [// @ts-ignore
+  _extends({}, props, {
     // @ts-ignore
-    filterTypes: filterTypes,
-    globalFilter: (_props$globalFilter = props.globalFilter) != null ? _props$globalFilter : 'globalFuzzy',
+    columns: columns,
     useControlledState: function useControlledState(state) {
       return useMemo(function () {
         return _extends({}, state, {
@@ -374,6 +248,124 @@ var MRT_FILTER_TYPE;
   MRT_FILTER_TYPE["STARTS_WITH"] = "startsWith";
 })(MRT_FILTER_TYPE || (MRT_FILTER_TYPE = {}));
 
+var fuzzyFilterFN = function fuzzyFilterFN(rows, columnIds, filterValue) {
+  return matchSorter(rows, filterValue.toString().trim(), {
+    keys: Array.isArray(columnIds) ? columnIds.map(function (c) {
+      return "values." + c;
+    }) : ["values." + columnIds],
+    sorter: function sorter(rankedItems) {
+      return rankedItems;
+    }
+  });
+};
+
+fuzzyFilterFN.autoRemove = function (val) {
+  return !val;
+};
+
+var containsFilterFN = function containsFilterFN(rows, id, filterValue) {
+  return rows.filter(function (row) {
+    return row.values[id].toString().toLowerCase().trim().includes(filterValue.toString().toLowerCase().trim());
+  });
+};
+
+containsFilterFN.autoRemove = function (val) {
+  return !val;
+};
+
+var startsWithFilterFN = function startsWithFilterFN(rows, id, filterValue) {
+  return rows.filter(function (row) {
+    return row.values[id].toString().toLowerCase().trim().startsWith(filterValue.toString().toLowerCase().trim());
+  });
+};
+
+startsWithFilterFN.autoRemove = function (val) {
+  return !val;
+};
+
+var endsWithFilterFN = function endsWithFilterFN(rows, id, filterValue) {
+  return rows.filter(function (row) {
+    return row.values[id].toString().toLowerCase().trim().endsWith(filterValue.toString().toLowerCase().trim());
+  });
+};
+
+endsWithFilterFN.autoRemove = function (val) {
+  return !val;
+};
+
+var equalsFilterFN = function equalsFilterFN(rows, id, filterValue) {
+  return rows.filter(function (row) {
+    return row.values[id].toString().toLowerCase().trim() === filterValue.toString().toLowerCase().trim();
+  });
+};
+
+equalsFilterFN.autoRemove = function (val) {
+  return !val;
+};
+
+var notEqualsFilterFN = function notEqualsFilterFN(rows, id, filterValue) {
+  return rows.filter(function (row) {
+    return row.values[id].toString().toLowerCase().trim() !== filterValue.toString().toLowerCase().trim();
+  });
+};
+
+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();
+  });
+};
+
+emptyFilterFN.autoRemove = function (val) {
+  return !val;
+};
+
+var notEmptyFilterFN = function notEmptyFilterFN(rows, id, _filterValue) {
+  return rows.filter(function (row) {
+    return !!row.values[id].toString().toLowerCase().trim();
+  });
+};
+
+notEmptyFilterFN.autoRemove = function (val) {
+  return !val;
+};
+
+var defaultFilterFNs = {
+  contains: containsFilterFN,
+  empty: emptyFilterFN,
+  endsWith: endsWithFilterFN,
+  equals: equalsFilterFN,
+  fuzzy: fuzzyFilterFN,
+  greaterThan: greaterThanFilterFN,
+  lessThan: lessThanFilterFN,
+  notEmpty: notEmptyFilterFN,
+  notEquals: notEqualsFilterFN,
+  startsWith: startsWithFilterFN
+};
+
 var commonMenuItemStyles = {
   py: '6px',
   my: 0,
@@ -601,6 +593,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
         arrow: true,
         title: localization.changeFilterMode
       }, React.createElement("span", null, React.createElement(IconButton, {
+        "aria-label": localization.changeFilterMode,
         onClick: handleFilterMenuOpen,
         size: "small",
         sx: {
@@ -3054,13 +3047,16 @@ var MRT_Default_Icons = {
   VisibilityOffIcon: VisibilityOffIcon
 };
 
-var _excluded = ["defaultColumn", "icons", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
+var _excluded = ["defaultColumn", "filterTypes", "globalFilter", "icons", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
 var MaterialReactTable = (function (_ref) {
   var _ref$defaultColumn = _ref.defaultColumn,
       defaultColumn = _ref$defaultColumn === void 0 ? {
     minWidth: 50,
     maxWidth: 1000
   } : _ref$defaultColumn,
+      filterTypes = _ref.filterTypes,
+      _ref$globalFilter = _ref.globalFilter,
+      globalFilter = _ref$globalFilter === void 0 ? 'fuzzy' : _ref$globalFilter,
       icons = _ref.icons,
       localization = _ref.localization,
       _ref$positionActionsC = _ref.positionActionsColumn,
@@ -3075,6 +3071,9 @@ var MaterialReactTable = (function (_ref) {
 
   return React.createElement(MaterialReactTableProvider, Object.assign({
     defaultColumn: defaultColumn,
+    // @ts-ignore
+    filterTypes: _extends({}, defaultFilterFNs, filterTypes),
+    globalFilter: globalFilter,
     icons: _extends({}, MRT_Default_Icons, icons),
     localization: _extends({}, MRT_DefaultLocalization_EN, localization),
     positionActionsColumn: positionActionsColumn,