material-react-table 0.14.6 → 0.16.0

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

@@ -168,7 +168,7 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
     enterDelay: 1000,
     enterNextDelay: 1000,
     title: localization.expandAll
-  }, React.createElement(IconButton, Object.assign({
+  }, React.createElement("span", null, React.createElement(IconButton, Object.assign({
     "aria-label": localization.expandAll,
     disabled: !getCanSomeRowsExpand() && !renderDetailPanel,
     onClick: function onClick() {
@@ -184,7 +184,7 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
       transform: "rotate(" + (getIsAllRowsExpanded() ? -180 : getIsSomeRowsExpanded() ? -90 : 0) + "deg)",
       transition: 'transform 0.2s'
     }
-  })));
+  }))));
 };
 
 var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
@@ -220,7 +220,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
     enterDelay: 1000,
     enterNextDelay: 1000,
     title: localization.expand
-  }, React.createElement(IconButton, Object.assign({
+  }, React.createElement("span", null, React.createElement(IconButton, Object.assign({
     "aria-label": localization.expand,
     disabled: !row.getCanExpand() && !renderDetailPanel,
     onClick: handleToggleExpand
@@ -234,7 +234,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
       transform: "rotate(" + (!row.getCanExpand() && !renderDetailPanel ? -90 : row.getIsExpanded() ? -180 : 0) + "deg)",
       transition: 'transform 0.2s'
     }
-  })));
+  }))));
 };
 
 var fuzzy = function fuzzy(row, columnId, filterValue, addMeta) {
@@ -1977,7 +1977,7 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
 };
 
 var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
-  var _localization$filterB, _columnDef$enabledCol, _allowedColumnFilterO, _localization$filterM, _localization$, _localization$clearFi, _columnDef$filterSele;
+  var _localization$filterB, _columnDef$enabledCol, _allowedColumnFilterO, _localization$filterM, _localization, _localization$clearFi, _columnDef$filterSele;
 
   var header = _ref.header,
       inputIndex = _ref.inputIndex,
@@ -2125,7 +2125,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     helperText: allowColumnChangeMode && !inputIndex && (allowedColumnFilterOptions === undefined || ((_allowedColumnFilterO = allowedColumnFilterOptions == null ? void 0 : allowedColumnFilterOptions.length) != null ? _allowedColumnFilterO : 0) > 0) ? React.createElement("label", {
       htmlFor: filterId
     }, filterFn instanceof Function ? (_localization$filterM = localization.filterMode.replace('{filterType}', // @ts-ignore
-    (_localization$ = localization["filter" + (filterFn.name.charAt(0).toUpperCase() + filterFn.name.slice(1))]) != null ? _localization$ : '')) != null ? _localization$filterM : '' : localization.filterMode.replace('{filterType}', // @ts-ignore
+    (_localization = localization["filter" + (filterFn.name.charAt(0).toUpperCase() + filterFn.name.slice(1))]) != null ? _localization : '')) != null ? _localization$filterM : '' : localization.filterMode.replace('{filterType}', // @ts-ignore
     localization["filter" + (filterFn.charAt(0).toUpperCase() + filterFn.slice(1))])) : null,
     FormHelperTextProps: {
       sx: {
@@ -3045,27 +3045,72 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
   }));
 };
 
+var fuzzy$1 = function fuzzy(rowA, rowB, columnId) {
+  var dir = 0;
+
+  if (rowA.columnFiltersMeta[columnId]) {
+    dir = compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
+  } // Provide a fallback for when the item ranks are equal
+
+
+  return dir === 0 ? sortingFns.alphanumeric(rowA, rowB, columnId) : dir;
+};
+
+var MRT_SortingFns = {
+  fuzzy: fuzzy$1
+};
+var rankGlobalFuzzy = function rankGlobalFuzzy(rowA, rowB) {
+  return Math.max.apply(Math, Object.values(rowB.columnFiltersMeta).map(function (v) {
+    return v.rank;
+  })) - Math.max.apply(Math, Object.values(rowA.columnFiltersMeta).map(function (v) {
+    return v.rank;
+  }));
+};
+
 var MRT_TableBody = function MRT_TableBody(_ref) {
   var instance = _ref.instance,
       tableContainerRef = _ref.tableContainerRef;
-  var getPaginationRowModel = instance.getPaginationRowModel,
+  var getRowModel = instance.getRowModel,
       getPrePaginationRowModel = instance.getPrePaginationRowModel,
       getState = instance.getState,
       _instance$options = instance.options,
+      enableGlobalFilterRankedResults = _instance$options.enableGlobalFilterRankedResults,
       enablePagination = _instance$options.enablePagination,
       enableRowVirtualization = _instance$options.enableRowVirtualization,
       muiTableBodyProps = _instance$options.muiTableBodyProps,
       virtualizerProps = _instance$options.virtualizerProps;
 
   var _getState = getState(),
-      density = _getState.density;
+      density = _getState.density,
+      globalFilter = _getState.globalFilter,
+      pagination = _getState.pagination,
+      sorting = _getState.sorting;
 
   var tableBodyProps = muiTableBodyProps instanceof Function ? muiTableBodyProps({
     instance: instance
   }) : muiTableBodyProps;
-  var rows = enablePagination ? getPaginationRowModel().rows : getPrePaginationRowModel().rows;
+
+  var getIsSomeColumnsSorted = function getIsSomeColumnsSorted() {
+    return Object.values(sorting).some(Boolean);
+  };
+
+  var rows = useMemo(function () {
+    if (enableGlobalFilterRankedResults && globalFilter && !getIsSomeColumnsSorted()) {
+      var rankedRows = getPrePaginationRowModel().rows.sort(function (a, b) {
+        return rankGlobalFuzzy(a, b);
+      });
+
+      if (enablePagination) {
+        return rankedRows.slice(0, pagination.pageSize);
+      }
+
+      return rankedRows;
+    }
+
+    return enablePagination ? getRowModel().rows : getPrePaginationRowModel().rows;
+  }, [enableGlobalFilterRankedResults, enableGlobalFilterRankedResults && globalFilter || !enablePagination ? getPrePaginationRowModel().rows : getRowModel().rows, globalFilter]);
   var rowVirtualizer = enableRowVirtualization ? useVirtual(_extends({
-    overscan: density === 'compact' ? 15 : 5,
+    overscan: density === 'compact' ? 20 : 10,
     size: rows.length,
     parentRef: tableContainerRef
   }, virtualizerProps)) : {};
@@ -3306,21 +3351,6 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
   })));
 };
 
-var fuzzy$1 = function fuzzy(rowA, rowB, columnId) {
-  var dir = 0;
-
-  if (rowA.columnFiltersMeta[columnId]) {
-    dir = compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
-  } // Provide a fallback for when the item ranks are equal
-
-
-  return dir === 0 ? sortingFns.alphanumeric(rowA, rowB, columnId) : dir;
-};
-
-var MRT_SortingFns = {
-  fuzzy: fuzzy$1
-};
-
 var MRT_TableRoot = function MRT_TableRoot(props) {
   var _initialState$columnO, _initialState$current, _initialState$current2, _initialState$density, _initialState$isFullS, _initialState$showFil, _initialState$showGlo, _props$globalFilterFn, _props$state3, _props$state4, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onDensityChang, _props$onIsFullScreen, _props$onShowFiltersC, _props$onShowGlobalFi;
 
@@ -3583,7 +3613,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   }));
 };
 
-var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilterChangeMode", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterChangeMode", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "rowNumberMode", "selectAllMode"];
+var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilterChangeMode", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterChangeMode", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "rowNumberMode", "selectAllMode"];
 var MaterialReactTable = (function (_ref) {
   var _ref$autoResetExpande = _ref.autoResetExpanded,
       autoResetExpanded = _ref$autoResetExpande === void 0 ? false : _ref$autoResetExpande,
@@ -3619,12 +3649,16 @@ var MaterialReactTable = (function (_ref) {
       enableGlobalFilter = _ref$enableGlobalFilt === void 0 ? true : _ref$enableGlobalFilt,
       _ref$enableGlobalFilt2 = _ref.enableGlobalFilterChangeMode,
       enableGlobalFilterChangeMode = _ref$enableGlobalFilt2 === void 0 ? true : _ref$enableGlobalFilt2,
+      _ref$enableGlobalFilt3 = _ref.enableGlobalFilterRankedResults,
+      enableGlobalFilterRankedResults = _ref$enableGlobalFilt3 === void 0 ? true : _ref$enableGlobalFilt3,
       _ref$enableGrouping = _ref.enableGrouping,
       enableGrouping = _ref$enableGrouping === void 0 ? false : _ref$enableGrouping,
       _ref$enableHiding = _ref.enableHiding,
       enableHiding = _ref$enableHiding === void 0 ? true : _ref$enableHiding,
       _ref$enableMultiRowSe = _ref.enableMultiRowSelection,
       enableMultiRowSelection = _ref$enableMultiRowSe === void 0 ? true : _ref$enableMultiRowSe,
+      _ref$enableMultiSort = _ref.enableMultiSort,
+      enableMultiSort = _ref$enableMultiSort === void 0 ? true : _ref$enableMultiSort,
       _ref$enablePagination = _ref.enablePagination,
       enablePagination = _ref$enablePagination === void 0 ? true : _ref$enablePagination,
       _ref$enablePinning = _ref.enablePinning,
@@ -3681,9 +3715,11 @@ var MaterialReactTable = (function (_ref) {
     enableFullScreenToggle: enableFullScreenToggle,
     enableGlobalFilter: enableGlobalFilter,
     enableGlobalFilterChangeMode: enableGlobalFilterChangeMode,
+    enableGlobalFilterRankedResults: enableGlobalFilterRankedResults,
     enableGrouping: enableGrouping,
     enableHiding: enableHiding,
     enableMultiRowSelection: enableMultiRowSelection,
+    enableMultiSort: enableMultiSort,
     enablePagination: enablePagination,
     enablePinning: enablePinning,
     enableRowSelection: enableRowSelection,