material-react-table 0.14.6 → 0.16.0

package/dist/MaterialReactTable.d.ts

@@ -20,7 +20,7 @@ export interface MRT_RowModel<D extends Record<string, any> = {}> {
 }
 export declare type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<TableInstance<Overwrite<Partial<TableGenerics>, {
     Row: D;
-}>>, 'getAllColumns' | 'getAllFlatColumns' | 'getAllLeafColumns' | 'getCenterLeafColumns' | 'getColumn' | 'getExpandedRowModel' | 'getFlatHeaders' | 'getLeftLeafColumns' | 'getPaginationRowModel' | 'getPrePaginationRowModel' | 'getRightLeafColumns' | 'getRowModel' | 'getSelectedRowModel' | 'getState' | 'options'> & {
+}>>, 'getAllColumns' | 'getAllFlatColumns' | 'getAllLeafColumns' | 'getCenterLeafColumns' | 'getColumn' | 'getExpandedRowModel' | 'getFlatHeaders' | 'getLeftLeafColumns' | 'getPaginationRowModel' | 'getPreFilteredRowModel' | 'getPrePaginationRowModel' | 'getRightLeafColumns' | 'getRowModel' | 'getSelectedRowModel' | 'getState' | 'options'> & {
     getAllColumns: () => MRT_Column<D>[];
     getAllFlatColumns: () => MRT_Column<D>[];
     getAllLeafColumns: () => MRT_Column<D>[];
@@ -30,6 +30,7 @@ export declare type MRT_TableInstance<D extends Record<string, any> = {}> = Omit
     getFlatHeaders: () => MRT_Header<D>[];
     getLeftLeafColumns: () => MRT_Column<D>[];
     getPaginationRowModel: () => MRT_RowModel<D>;
+    getPreFilteredRowModel: () => MRT_RowModel<D>;
     getPrePaginationRowModel: () => MRT_RowModel<D>;
     getRightLeafColumns: () => MRT_Column<D>[];
     getRowModel: () => MRT_RowModel<D>;
@@ -93,9 +94,9 @@ export declare type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<Col
     columns?: MRT_ColumnDef<D>[];
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
+    enableColumnFilterChangeMode?: boolean;
     enableColumnOrdering?: boolean;
     enableEditing?: boolean;
-    enableColumnFilterChangeMode?: boolean;
     enabledColumnFilterOptions?: (MRT_FILTER_OPTION | string)[] | null;
     filterFn?: MRT_FilterFn;
     filterSelectOptions?: (string | {
@@ -195,6 +196,7 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
     enableExpandAll?: boolean;
     enableFullScreenToggle?: boolean;
     enableGlobalFilterChangeMode?: boolean;
+    enableGlobalFilterRankedResults?: boolean;
     enablePagination?: boolean;
     enablePersistentState?: boolean;
     enableRowActions?: boolean;
@@ -456,5 +458,5 @@ export declare type MaterialReactTableProps<D extends Record<string, any> = {}>
     tableId?: string;
     virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement>>;
 };
-declare const _default: <D extends Record<string, any> = {}>({ 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, ...rest }: MaterialReactTableProps<D>) => JSX.Element;
+declare const _default: <D extends Record<string, any> = {}>({ 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, ...rest }: MaterialReactTableProps<D>) => JSX.Element;
 export default _default;

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

@@ -173,7 +173,7 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
     enterDelay: 1000,
     enterNextDelay: 1000,
     title: localization.expandAll
-  }, React__default.createElement(material.IconButton, Object.assign({
+  }, React__default.createElement("span", null, React__default.createElement(material.IconButton, Object.assign({
     "aria-label": localization.expandAll,
     disabled: !getCanSomeRowsExpand() && !renderDetailPanel,
     onClick: function onClick() {
@@ -189,7 +189,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) {
@@ -225,7 +225,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
     enterDelay: 1000,
     enterNextDelay: 1000,
     title: localization.expand
-  }, React__default.createElement(material.IconButton, Object.assign({
+  }, React__default.createElement("span", null, React__default.createElement(material.IconButton, Object.assign({
     "aria-label": localization.expand,
     disabled: !row.getCanExpand() && !renderDetailPanel,
     onClick: handleToggleExpand
@@ -239,7 +239,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) {
@@ -5729,7 +5729,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,
@@ -5877,7 +5877,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__default.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: {
@@ -7289,27 +7289,72 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
   }));
 };
 
+var fuzzy$1 = function fuzzy(rowA, rowB, columnId) {
+  var dir = 0;
+
+  if (rowA.columnFiltersMeta[columnId]) {
+    dir = matchSorterUtils.compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
+  } // Provide a fallback for when the item ranks are equal
+
+
+  return dir === 0 ? reactTable.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 = React.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)) : {};
@@ -7550,21 +7595,6 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
   })));
 };
 
-var fuzzy$1 = function fuzzy(rowA, rowB, columnId) {
-  var dir = 0;
-
-  if (rowA.columnFiltersMeta[columnId]) {
-    dir = matchSorterUtils.compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
-  } // Provide a fallback for when the item ranks are equal
-
-
-  return dir === 0 ? reactTable.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;
 
@@ -7827,7 +7857,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,
@@ -7863,12 +7893,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,
@@ -7925,9 +7959,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,