material-react-table 0.14.6 → 0.15.0

package/dist/sortingFns.d.ts

@@ -2,3 +2,4 @@ import type { MRT_Row } from '.';
 export declare const MRT_SortingFns: {
     fuzzy: (rowA: MRT_Row, rowB: MRT_Row, columnId: string) => number;
 };
+export declare const rankGlobalFuzzy: (rowA: MRT_Row, rowB: MRT_Row) => number;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.14.6",
+  "version": "0.15.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of TanStack React Table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",

package/src/MaterialReactTable.tsx

@@ -88,6 +88,7 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
   | 'getFlatHeaders'
   | 'getLeftLeafColumns'
   | 'getPaginationRowModel'
+  | 'getPreFilteredRowModel'
   | 'getPrePaginationRowModel'
   | 'getRightLeafColumns'
   | 'getRowModel'
@@ -104,6 +105,7 @@ export 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>;
@@ -395,6 +397,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     enableExpandAll?: boolean;
     enableFullScreenToggle?: boolean;
     enableGlobalFilterChangeMode?: boolean;
+    enableGlobalFilterRankedResults?: boolean;
     enablePagination?: boolean;
     enablePersistentState?: boolean;
     enableRowActions?: boolean;
@@ -848,9 +851,11 @@ export default <D extends Record<string, any> = {}>({
   enableFullScreenToggle = true,
   enableGlobalFilter = true,
   enableGlobalFilterChangeMode = true,
+  enableGlobalFilterRankedResults = true,
   enableGrouping = false,
   enableHiding = true,
   enableMultiRowSelection = true,
+  enableMultiSort = true,
   enablePagination = true,
   enablePinning = false,
   enableRowSelection = false,
@@ -889,9 +894,11 @@ export default <D extends Record<string, any> = {}>({
     enableFullScreenToggle={enableFullScreenToggle}
     enableGlobalFilter={enableGlobalFilter}
     enableGlobalFilterChangeMode={enableGlobalFilterChangeMode}
+    enableGlobalFilterRankedResults={enableGlobalFilterRankedResults}
     enableGrouping={enableGrouping}
     enableHiding={enableHiding}
     enableMultiRowSelection={enableMultiRowSelection}
+    enableMultiSort={enableMultiSort}
     enablePagination={enablePagination}
     enablePinning={enablePinning}
     enableRowSelection={enableRowSelection}

package/src/body/MRT_TableBody.tsx

@@ -1,8 +1,9 @@
-import React, { FC, RefObject } from 'react';
+import React, { FC, RefObject, useMemo } from 'react';
 import { useVirtual } from 'react-virtual';
 import { TableBody } from '@mui/material';
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
 import type { MRT_Row, MRT_TableInstance } from '..';
+import { rankGlobalFuzzy } from '../sortingFns';
 
 interface Props {
   instance: MRT_TableInstance;
@@ -15,6 +16,7 @@ export const MRT_TableBody: FC<Props> = ({ instance, tableContainerRef }) => {
     getPrePaginationRowModel,
     getState,
     options: {
+      enableGlobalFilterRankedResults,
       enablePagination,
       enableRowVirtualization,
       muiTableBodyProps,
@@ -22,20 +24,38 @@ export const MRT_TableBody: FC<Props> = ({ instance, tableContainerRef }) => {
     },
   } = instance;
 
-  const { density } = getState();
+  const { density, globalFilter, pagination } = getState();
 
   const tableBodyProps =
     muiTableBodyProps instanceof Function
       ? muiTableBodyProps({ instance })
       : muiTableBodyProps;
 
-  const rows = enablePagination
-    ? getPaginationRowModel().rows
-    : getPrePaginationRowModel().rows;
+  const rows = useMemo(() => {
+    if (enableGlobalFilterRankedResults && globalFilter) {
+      const rankedRows = getPrePaginationRowModel().rows.sort((a, b) =>
+        rankGlobalFuzzy(a, b),
+      );
+      if (enablePagination) {
+        return rankedRows.slice(0, pagination.pageSize);
+      }
+      return rankedRows;
+    }
+
+    return enablePagination
+      ? getPaginationRowModel().rows
+      : getPrePaginationRowModel().rows;
+  }, [
+    enableGlobalFilterRankedResults,
+    (enableGlobalFilterRankedResults && globalFilter) || !enablePagination
+      ? getPrePaginationRowModel().rows
+      : getPaginationRowModel().rows,
+    globalFilter,
+  ]);
 
   const rowVirtualizer = enableRowVirtualization
     ? useVirtual({
-        overscan: density === 'compact' ? 15 : 5,
+        overscan: density === 'compact' ? 20 : 10,
         size: rows.length,
         parentRef: tableContainerRef,
         ...virtualizerProps,

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -35,26 +35,32 @@ export const MRT_ExpandAllButton: FC<Props> = ({ instance }) => {
       enterNextDelay={1000}
       title={localization.expandAll}
     >
-      <IconButton
-        aria-label={localization.expandAll}
-        disabled={!getCanSomeRowsExpand() && !renderDetailPanel}
-        onClick={() => toggleAllRowsExpanded(!getIsAllRowsExpanded())}
-        {...iconButtonProps}
-        sx={{
-          height: density === 'compact' ? '1.75rem' : '2.25rem',
-          width: density === 'compact' ? '1.75rem' : '2.25rem',
-          ...iconButtonProps?.sx,
-        }}
-      >
-        <KeyboardDoubleArrowDownIcon
-          style={{
-            transform: `rotate(${
-              getIsAllRowsExpanded() ? -180 : getIsSomeRowsExpanded() ? -90 : 0
-            }deg)`,
-            transition: 'transform 0.2s',
+      <span>
+        <IconButton
+          aria-label={localization.expandAll}
+          disabled={!getCanSomeRowsExpand() && !renderDetailPanel}
+          onClick={() => toggleAllRowsExpanded(!getIsAllRowsExpanded())}
+          {...iconButtonProps}
+          sx={{
+            height: density === 'compact' ? '1.75rem' : '2.25rem',
+            width: density === 'compact' ? '1.75rem' : '2.25rem',
+            ...iconButtonProps?.sx,
           }}
-        />
-      </IconButton>
+        >
+          <KeyboardDoubleArrowDownIcon
+            style={{
+              transform: `rotate(${
+                getIsAllRowsExpanded()
+                  ? -180
+                  : getIsSomeRowsExpanded()
+                  ? -90
+                  : 0
+              }deg)`,
+              transition: 'transform 0.2s',
+            }}
+          />
+        </IconButton>
+      </span>
     </Tooltip>
   );
 };

package/src/buttons/MRT_ExpandButton.tsx

@@ -38,30 +38,32 @@ export const MRT_ExpandButton: FC<Props> = ({ row, instance }) => {
       enterNextDelay={1000}
       title={localization.expand}
     >
-      <IconButton
-        aria-label={localization.expand}
-        disabled={!row.getCanExpand() && !renderDetailPanel}
-        onClick={handleToggleExpand}
-        {...iconButtonProps}
-        sx={{
-          height: density === 'compact' ? '1.75rem' : '2.25rem',
-          width: density === 'compact' ? '1.75rem' : '2.25rem',
-          ...iconButtonProps?.sx,
-        }}
-      >
-        <ExpandMoreIcon
-          style={{
-            transform: `rotate(${
-              !row.getCanExpand() && !renderDetailPanel
-                ? -90
-                : row.getIsExpanded()
-                ? -180
-                : 0
-            }deg)`,
-            transition: 'transform 0.2s',
+      <span>
+        <IconButton
+          aria-label={localization.expand}
+          disabled={!row.getCanExpand() && !renderDetailPanel}
+          onClick={handleToggleExpand}
+          {...iconButtonProps}
+          sx={{
+            height: density === 'compact' ? '1.75rem' : '2.25rem',
+            width: density === 'compact' ? '1.75rem' : '2.25rem',
+            ...iconButtonProps?.sx,
           }}
-        />
-      </IconButton>
+        >
+          <ExpandMoreIcon
+            style={{
+              transform: `rotate(${
+                !row.getCanExpand() && !renderDetailPanel
+                  ? -90
+                  : row.getIsExpanded()
+                  ? -180
+                  : 0
+              }deg)`,
+              transition: 'transform 0.2s',
+            }}
+          />
+        </IconButton>
+      </span>
     </Tooltip>
   );
 };

package/src/sortingFns.ts

@@ -19,3 +19,7 @@ const fuzzy = (rowA: MRT_Row, rowB: MRT_Row, columnId: string) => {
 export const MRT_SortingFns = {
   fuzzy,
 };
+
+export const rankGlobalFuzzy = (rowA: MRT_Row, rowB: MRT_Row) =>
+  Math.max(...Object.values(rowB.columnFiltersMeta).map((v: any) => v.rank)) -
+  Math.max(...Object.values(rowA.columnFiltersMeta).map((v: any) => v.rank));