material-react-table 0.14.6 → 0.16.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/dist/table/MRT_TableRoot.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { MaterialReactTableProps } from '../MaterialReactTable';
 export declare const MRT_TableRoot: <D extends Record<string, any> = {}>(props: MaterialReactTableProps<D>) => JSX.Element;

package/dist/utils.d.ts

@@ -2,12 +2,12 @@ import { ColumnDef, ColumnOrderState, Table, Updater } from '@tanstack/react-tab
 import { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_FilterFn } from '.';
 export declare const getAllLeafColumnDefs: (columns: MRT_ColumnDef[]) => MRT_ColumnDef[];
 export declare const createGroup: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnDef<D>, currentFilterFns: {
-    [key: string]: import("@tanstack/react-table").FilterFnOption<import("@tanstack/react-table").TableGenerics>;
+    [key: string]: import("@tanstack/table-core").FilterFnOption<import("@tanstack/table-core").TableGenerics>;
 }) => ColumnDef<D>;
 export declare const createDataColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: MRT_ColumnDef<D>, currentFilterFns: {
-    [key: string]: import("@tanstack/react-table").FilterFnOption<import("@tanstack/react-table").TableGenerics>;
+    [key: string]: import("@tanstack/table-core").FilterFnOption<import("@tanstack/table-core").TableGenerics>;
 }) => ColumnDef<D>;
-export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnDef<D>, "accessorFn" | "columns" | "filterFn" | "footer" | "sortingFn" | "id" | "accessorKey" | "meta" | "enableHiding" | "enablePinning" | "enableColumnFilter" | "enableGlobalFilter" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "invertSorting" | "sortUndefined" | "aggregationFn" | "enableGrouping" | "enableResizing" | "size" | "minSize" | "maxSize" | "AggregatedCell" | "Cell" | "Edit" | "Filter" | "Footer" | "Header" | "enableClickToCopy" | "enableColumnActions" | "enableColumnOrdering" | "enableEditing" | "enableColumnFilterChangeMode" | "enabledColumnFilterOptions" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChanged" | "onColumnFilterValueChanged" | "onColumnFilterValueChangedDebounced"> & {
+export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnDef<D>, "accessorFn" | "columns" | "filterFn" | "footer" | "sortingFn" | "id" | "accessorKey" | "meta" | "enableHiding" | "enablePinning" | "enableColumnFilter" | "enableGlobalFilter" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "invertSorting" | "sortUndefined" | "aggregationFn" | "enableGrouping" | "enableResizing" | "size" | "minSize" | "maxSize" | "AggregatedCell" | "Cell" | "Edit" | "Filter" | "Footer" | "Header" | "enableClickToCopy" | "enableColumnActions" | "enableColumnFilterChangeMode" | "enableColumnOrdering" | "enableEditing" | "enabledColumnFilterOptions" | "filterSelectOptions" | "muiTableBodyCellCopyButtonProps" | "muiTableBodyCellEditTextFieldProps" | "muiTableBodyCellProps" | "muiTableFooterCellProps" | "muiTableHeadCellColumnActionsButtonProps" | "muiTableHeadCellFilterTextFieldProps" | "muiTableHeadCellProps" | "onCellEditBlur" | "onCellEditChanged" | "onColumnFilterValueChanged" | "onColumnFilterValueChangedDebounced"> & {
     header?: string | undefined;
 }) => ColumnDef<D>;
 export declare const reorderColumn: (movingColumn: MRT_Column, receivingColumn: MRT_Column, columnOrder: ColumnOrderState, setColumnOrder: (updater: Updater<ColumnOrderState>) => void) => void;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.14.6",
+  "version": "0.16.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.",
@@ -56,12 +56,12 @@
     }
   ],
   "devDependencies": {
-    "@babel/core": "^7.18.5",
+    "@babel/core": "^7.18.6",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
     "@faker-js/faker": "^7.3.0",
     "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.8.5",
+    "@mui/material": "^5.8.6",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.5.9",
     "@storybook/addon-actions": "^6.5.9",
@@ -77,8 +77,8 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.1",
     "prettier": "^2.7.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
@@ -97,8 +97,8 @@
     "react": ">=16.8"
   },
   "dependencies": {
-    "@tanstack/match-sorter-utils": "^8.0.0-alpha.83",
-    "@tanstack/react-table": "^8.0.0-beta.9",
+    "@tanstack/match-sorter-utils": "8.0.13",
+    "@tanstack/react-table": "8.0.13",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-virtual": "^2.10.4"

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>;
@@ -203,9 +205,9 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
   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 | { text: string; value: string })[];
@@ -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;
@@ -11,10 +12,11 @@ interface Props {
 
 export const MRT_TableBody: FC<Props> = ({ instance, tableContainerRef }) => {
   const {
-    getPaginationRowModel,
+    getRowModel,
     getPrePaginationRowModel,
     getState,
     options: {
+      enableGlobalFilterRankedResults,
       enablePagination,
       enableRowVirtualization,
       muiTableBodyProps,
@@ -22,20 +24,46 @@ export const MRT_TableBody: FC<Props> = ({ instance, tableContainerRef }) => {
     },
   } = instance;
 
-  const { density } = getState();
+  const { density, globalFilter, pagination, sorting } = getState();
 
   const tableBodyProps =
     muiTableBodyProps instanceof Function
       ? muiTableBodyProps({ instance })
       : muiTableBodyProps;
 
-  const rows = enablePagination
-    ? getPaginationRowModel().rows
-    : getPrePaginationRowModel().rows;
+  const getIsSomeColumnsSorted = () => {
+    return Object.values(sorting).some(Boolean);
+  };
+
+  const rows = useMemo(() => {
+    if (
+      enableGlobalFilterRankedResults &&
+      globalFilter &&
+      !getIsSomeColumnsSorted()
+    ) {
+      const rankedRows = getPrePaginationRowModel().rows.sort((a, b) =>
+        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,
+  ]);
 
   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));