material-react-table 0.14.5 → 0.14.6

package/dist/sortingFns.d.ts

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

package/dist/utils.d.ts

@@ -7,7 +7,7 @@ export declare const createGroup: <D extends Record<string, any> = {}>(table: Ta
 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>;
 }) => ColumnDef<D>;
-export declare const createDisplayColumn: <D extends Record<string, any> = {}>(table: Table<D>, column: Pick<MRT_ColumnDef<D>, "accessorFn" | "footer" | "columns" | "filterFn" | "id" | "accessorKey" | "meta" | "enableHiding" | "enablePinning" | "enableColumnFilter" | "enableGlobalFilter" | "sortingFn" | "sortDescFirst" | "enableSorting" | "enableMultiSort" | "invertSorting" | "sortUndefined" | "aggregationFn" | "enableGrouping" | "enableResizing" | "size" | "minSize" | "maxSize" | "AggregatedCell" | "Cell" | "Edit" | "Filter" | "Footer" | "Header" | "enableClickToCopy" | "enableColumnActions" | "enableColumnOrdering" | "enableEditing" | "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" | "enableColumnOrdering" | "enableEditing" | "enableColumnFilterChangeMode" | "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.5",
+  "version": "0.14.6",
   "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

@@ -38,6 +38,8 @@ import {
   Overwrite,
   ReactTableGenerics,
   Row,
+  SortingFn,
+  SortingFnOption,
   TableGenerics,
   TableInstance,
   TableState,
@@ -52,13 +54,12 @@ import { MRT_TableRoot } from './table/MRT_TableRoot';
 export type MRT_TableOptions<D extends Record<string, any> = {}> = Partial<
   Omit<
     UseTableInstanceOptions<ReactTableGenerics>,
-    'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn' | 'filterFns'
+    'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn'
   >
 > & {
   columns: MRT_ColumnDef<D>[];
   data: D[];
   expandRowsFn?: (dataRow: D) => D[];
-  filterFns?: MRT_FILTER_OPTION | FilterFn<D> | string | number | symbol;
   initialState?: Partial<MRT_TableState<D>>;
   state?: Partial<MRT_TableState<D>>;
 };
@@ -145,11 +146,12 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
   ColumnDef<D>,
   | 'accessorFn'
   | 'aggregatedCell'
-  | 'header'
-  | 'footer'
+  | 'cell'
   | 'columns'
   | 'filterFn'
-  | 'cell'
+  | 'footer'
+  | 'header'
+  | 'sortingFn'
 > & {
   AggregatedCell?: ({
     cell,
@@ -203,6 +205,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
   enableColumnActions?: boolean;
   enableColumnOrdering?: boolean;
   enableEditing?: boolean;
+  enableColumnFilterChangeMode?: boolean;
   enabledColumnFilterOptions?: (MRT_FILTER_OPTION | string)[] | null;
   filterFn?: MRT_FilterFn;
   filterSelectOptions?: (string | { text: string; value: string })[];
@@ -312,6 +315,7 @@ export type MRT_ColumnDef<D extends Record<string, any> = {}> = Omit<
     filterValue: any;
     instance: MRT_TableInstance<D>;
   }) => void;
+  sortingFn?: MRT_SortingFn;
 };
 
 export type MRT_Column<D extends Record<string, any> = {}> = Omit<
@@ -357,6 +361,10 @@ export type MRT_Cell<D extends Record<string, any> = {}> = Omit<
   row: MRT_Row<D>;
 };
 
+export type MRT_SortingOption = SortingFnOption<TableGenerics> | 'fuzzy';
+
+export type MRT_SortingFn = SortingFn<TableGenerics> | MRT_SortingOption;
+
 export type MRT_FILTER_OPTION =
   | 'between'
   | 'contains'
@@ -373,23 +381,20 @@ export type MRT_FILTER_OPTION =
   | 'startsWith'
   | FilterFnOption<TableGenerics>;
 
-export type MRT_FilterFn =
-  | FilterFn<TableGenerics>
-  | MRT_FILTER_OPTION
-  | number
-  | string
-  | symbol;
+export type MRT_FilterFn = FilterFn<TableGenerics> | MRT_FILTER_OPTION;
 
 export type MaterialReactTableProps<D extends Record<string, any> = {}> =
   MRT_TableOptions<D> & {
     editingMode?: 'table' | 'row' | 'cell';
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
+    enableColumnFilterChangeMode?: boolean;
     enableColumnOrdering?: boolean;
     enableDensityToggle?: boolean;
     enableEditing?: boolean;
     enableExpandAll?: boolean;
     enableFullScreenToggle?: boolean;
+    enableGlobalFilterChangeMode?: boolean;
     enablePagination?: boolean;
     enablePersistentState?: boolean;
     enableRowActions?: boolean;
@@ -833,6 +838,7 @@ export default <D extends Record<string, any> = {}>({
   defaultColumn = { minSize: 40, maxSize: 1000, size: 180 },
   editingMode = 'row',
   enableColumnActions = true,
+  enableColumnFilterChangeMode = true,
   enableColumnFilters = true,
   enableColumnOrdering = false,
   enableColumnResizing = false,
@@ -841,6 +847,7 @@ export default <D extends Record<string, any> = {}>({
   enableFilters = true,
   enableFullScreenToggle = true,
   enableGlobalFilter = true,
+  enableGlobalFilterChangeMode = true,
   enableGrouping = false,
   enableHiding = true,
   enableMultiRowSelection = true,
@@ -872,6 +879,7 @@ export default <D extends Record<string, any> = {}>({
     defaultColumn={defaultColumn}
     editingMode={editingMode}
     enableColumnActions={enableColumnActions}
+    enableColumnFilterChangeMode={enableColumnFilterChangeMode}
     enableColumnFilters={enableColumnFilters}
     enableColumnOrdering={enableColumnOrdering}
     enableColumnResizing={enableColumnResizing}
@@ -880,6 +888,7 @@ export default <D extends Record<string, any> = {}>({
     enableFilters={enableFilters}
     enableFullScreenToggle={enableFullScreenToggle}
     enableGlobalFilter={enableGlobalFilter}
+    enableGlobalFilterChangeMode={enableGlobalFilterChangeMode}
     enableGrouping={enableGrouping}
     enableHiding={enableHiding}
     enableMultiRowSelection={enableMultiRowSelection}

package/src/{filtersFNs.ts → filtersFns.ts}

@@ -133,7 +133,7 @@ export const notEmpty = (
 
 notEmpty.autoRemove = (val: any) => !val;
 
-export const defaultFilterFNs = {
+export const MRT_FilterFns = {
   between,
   contains,
   empty,

package/src/inputs/MRT_FilterTextField.tsx

@@ -32,6 +32,7 @@ export const MRT_FilterTextField: FC<Props> = ({
   const {
     getState,
     options: {
+      enableColumnFilterChangeMode,
       enabledColumnFilterOptions,
       icons: { FilterListIcon, CloseIcon },
       localization,
@@ -176,6 +177,10 @@ export const MRT_FilterTextField: FC<Props> = ({
   const allowedColumnFilterOptions =
     columnDef?.enabledColumnFilterOptions ?? enabledColumnFilterOptions;
 
+  const allowColumnChangeMode =
+    enableColumnFilterChangeMode &&
+    columnDef.enableColumnFilterChangeMode !== false;
+
   return (
     <>
       <TextField
@@ -190,6 +195,7 @@ export const MRT_FilterTextField: FC<Props> = ({
           title: filterPlaceholder,
         }}
         helperText={
+          allowColumnChangeMode &&
           !inputIndex &&
           (allowedColumnFilterOptions === undefined ||
             (allowedColumnFilterOptions?.length ?? 0) > 0) ? (
@@ -224,7 +230,6 @@ export const MRT_FilterTextField: FC<Props> = ({
             whiteSpace: 'nowrap',
           },
         }}
-        label={isSelectFilter && !filterValue ? filterPlaceholder : undefined}
         margin="none"
         placeholder={
           filterChipLabel || isSelectFilter ? undefined : filterPlaceholder
@@ -235,10 +240,12 @@ export const MRT_FilterTextField: FC<Props> = ({
         value={filterValue ?? ''}
         variant="standard"
         InputProps={{
-          startAdornment: !isSelectFilter &&
+          startAdornment:
+            allowColumnChangeMode &&
+            !isSelectFilter &&
             !inputIndex &&
             (allowedColumnFilterOptions === undefined ||
-              (allowedColumnFilterOptions?.length ?? 0) > 0) && (
+              !!allowedColumnFilterOptions?.length) ? (
               <InputAdornment position="start">
                 <Tooltip arrow title={localization.changeFilterMode}>
                   <span>
@@ -259,6 +266,8 @@ export const MRT_FilterTextField: FC<Props> = ({
                   />
                 )}
               </InputAdornment>
+            ) : (
+              <FilterListIcon />
             ),
           endAdornment: !filterChipLabel && (
             <InputAdornment position="end">
@@ -292,7 +301,6 @@ export const MRT_FilterTextField: FC<Props> = ({
           p: 0,
           minWidth: !filterChipLabel ? '8rem' : 'auto',
           width: 'calc(100% + 0.5rem)',
-          mt: isSelectFilter && !filterValue ? '-1rem' : undefined,
           '&	.MuiSelect-icon': {
             mr: '1.5rem',
           },

package/src/inputs/{MRT_SearchTextField.tsx → MRT_GlobalFilterTextField.tsx}

@@ -20,17 +20,18 @@ interface Props {
   instance: MRT_TableInstance;
 }
 
-export const MRT_SearchTextField: FC<Props> = ({ instance }) => {
+export const MRT_GlobalFilterTextField: FC<Props> = ({ instance }) => {
   const {
     getState,
     setGlobalFilter,
     options: {
+      enableGlobalFilterChangeMode,
       icons: { SearchIcon, CloseIcon },
-      tableId,
       localization,
       muiSearchTextFieldProps,
       onGlobalFilterValueChanged,
       onGlobalFilterValueChangedDebounced,
+      tableId,
     },
   } = instance;
 
@@ -76,7 +77,7 @@ export const MRT_SearchTextField: FC<Props> = ({ instance }) => {
         value={searchValue ?? ''}
         variant="standard"
         InputProps={{
-          startAdornment: (
+          startAdornment: enableGlobalFilterChangeMode ? (
             <InputAdornment position="start">
               <Tooltip arrow title={localization.changeSearchMode}>
                 <IconButton
@@ -89,18 +90,23 @@ export const MRT_SearchTextField: FC<Props> = ({ instance }) => {
                 </IconButton>
               </Tooltip>
             </InputAdornment>
+          ) : (
+            <SearchIcon />
           ),
           endAdornment: (
             <InputAdornment position="end">
-              <IconButton
-                aria-label={localization.clearSearch}
-                disabled={searchValue?.length === 0}
-                onClick={handleClear}
-                size="small"
-                title={localization.clearSearch}
-              >
-                <CloseIcon />
-              </IconButton>
+              <Tooltip arrow title={localization.clearSearch ?? ''}>
+                <span>
+                  <IconButton
+                    aria-label={localization.clearSearch}
+                    disabled={!searchValue?.length}
+                    onClick={handleClear}
+                    size="small"
+                  >
+                    <CloseIcon />
+                  </IconButton>
+                </span>
+              </Tooltip>
             </InputAdornment>
           ),
         }}

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -18,7 +18,7 @@ import {
   notEmpty,
   notEquals,
   startsWith,
-} from '../filtersFNs';
+} from '../filtersFns';
 
 const commonMenuItemStyles = {
   py: '6px',

package/src/sortingFns.ts

@@ -0,0 +1,21 @@
+import { compareItems, RankingInfo } from '@tanstack/match-sorter-utils';
+import { Row, sortingFns } from '@tanstack/react-table';
+import type { MRT_Row } from '.';
+
+const fuzzy = (rowA: MRT_Row, rowB: MRT_Row, columnId: string) => {
+  let dir = 0;
+  if (rowA.columnFiltersMeta[columnId]) {
+    dir = compareItems(
+      rowA.columnFiltersMeta[columnId]! as RankingInfo,
+      rowB.columnFiltersMeta[columnId]! as RankingInfo,
+    );
+  }
+  // Provide a fallback for when the item ranks are equal
+  return dir === 0
+    ? sortingFns.alphanumeric(rowA as Row<any>, rowB as Row<any>, columnId)
+    : dir;
+};
+
+export const MRT_SortingFns = {
+  fuzzy,
+};

package/src/table/MRT_TableRoot.tsx

@@ -1,18 +1,20 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import {
   FilterFn,
+  ReactTableGenerics,
+  Table,
+  TableState,
   createTable,
+  filterFns,
+  getCoreRowModel,
   getExpandedRowModel,
-  getPaginationRowModel,
-  useTableInstance,
+  getFacetedRowModel,
+  getFilteredRowModel,
   getGroupedRowModel,
+  getPaginationRowModel,
   getSortedRowModel,
-  getCoreRowModel,
-  getFilteredRowModel,
-  ReactTableGenerics,
-  getFacetedRowModel,
-  TableState,
-  Table,
+  useTableInstance,
+  sortingFns,
 } from '@tanstack/react-table';
 import {
   MRT_Cell,
@@ -29,6 +31,7 @@ import { MRT_ToggleRowActionMenuButton } from '../buttons/MRT_ToggleRowActionMen
 import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
 import { MaterialReactTableProps } from '../MaterialReactTable';
 import { MRT_TablePaper } from './MRT_TablePaper';
+import { Box, Dialog, Grow } from '@mui/material';
 import {
   createDataColumn,
   createDisplayColumn,
@@ -36,8 +39,8 @@ import {
   getAllLeafColumnDefs,
   getDefaultColumnOrderIds,
 } from '../utils';
-import { defaultFilterFNs } from '../filtersFNs';
-import { Box, Dialog, Grow } from '@mui/material';
+import { MRT_FilterFns } from '../filtersFns';
+import { MRT_SortingFns } from '../sortingFns';
 
 export const MRT_TableRoot = <D extends Record<string, any> = {}>(
   props: MaterialReactTableProps<D>,
@@ -123,8 +126,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
     () =>
       // @ts-ignore
       createTable().setOptions({
-        //@ts-ignore
-        filterFns: defaultFilterFNs,
+        filterFns: { ...filterFns, ...MRT_FilterFns, ...props.filterFns },
         getCoreRowModel: getCoreRowModel(),
         getExpandedRowModel: getExpandedRowModel(),
         getFacetedRowModel: getFacetedRowModel(),
@@ -132,8 +134,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         getGroupedRowModel: getGroupedRowModel(),
         getPaginationRowModel: getPaginationRowModel(),
         getSortedRowModel: getSortedRowModel(),
-        getSubRows: (row) => (row as MRT_Row)?.subRows,
-        tableId,
+        sortingFns: { ...sortingFns, ...MRT_SortingFns, ...props.sortingFns },
       }) as Table<D>,
     [],
   );
@@ -252,6 +253,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
       //@ts-ignore
       columns,
       data,
+      getSubRows: (row) => (row as MRT_Row)?.subRows,
       //@ts-ignore
       globalFilterFn: currentGlobalFilterFn,
       initialState,
@@ -267,6 +269,7 @@ export const MRT_TableRoot = <D extends Record<string, any> = {}>(
         showGlobalFilter,
         ...props.state,
       } as TableState,
+      tableId,
     }),
     setCurrentEditingCell:
       props.onCurrentEditingCellChange ?? setCurrentEditingCell,

package/src/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -6,7 +6,7 @@ import { MRT_ToggleDensePaddingButton } from '../buttons/MRT_ToggleDensePaddingB
 import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
 import { MRT_ToggleGlobalFilterButton } from '../buttons/MRT_ToggleGlobalFilterButton';
 import { MRT_TableInstance } from '..';
-import { MRT_SearchTextField } from '../inputs/MRT_SearchTextField';
+import { MRT_GlobalFilterTextField } from '../inputs/MRT_GlobalFilterTextField';
 
 interface Props {
   instance: MRT_TableInstance;
@@ -44,7 +44,7 @@ export const MRT_ToolbarInternalButtons: FC<Props> = ({ instance }) => {
       }) ?? (
         <>
           {enableGlobalFilter && positionGlobalFilter === 'right' && (
-            <MRT_SearchTextField instance={instance} />
+            <MRT_GlobalFilterTextField instance={instance} />
           )}
           {enableFilters && enableGlobalFilter && (
             <MRT_ToggleGlobalFilterButton instance={instance} />

package/src/toolbar/MRT_ToolbarTop.tsx

@@ -5,7 +5,7 @@ import { MRT_TablePagination } from './MRT_TablePagination';
 import { MRT_ToolbarAlertBanner } from './MRT_ToolbarAlertBanner';
 import { MRT_LinearProgressBar } from './MRT_LinearProgressBar';
 import { MRT_TableInstance } from '..';
-import { MRT_SearchTextField } from '../inputs/MRT_SearchTextField';
+import { MRT_GlobalFilterTextField } from '../inputs/MRT_GlobalFilterTextField';
 
 export const commonToolbarStyles = ({ theme }: { theme: Theme }) => ({
   backgroundColor: lighten(theme.palette.background.default, 0.04),
@@ -86,7 +86,7 @@ export const MRT_ToolbarTop: FC<Props> = ({ instance }) => {
         }}
       >
         {enableGlobalFilter && positionGlobalFilter === 'left' && (
-          <MRT_SearchTextField instance={instance} />
+          <MRT_GlobalFilterTextField instance={instance} />
         )}
 
         {renderToolbarTopCustomActions?.({ instance }) ?? <span />}
@@ -95,7 +95,7 @@ export const MRT_ToolbarTop: FC<Props> = ({ instance }) => {
         ) : (
           enableGlobalFilter &&
           positionGlobalFilter === 'right' && (
-            <MRT_SearchTextField instance={instance} />
+            <MRT_GlobalFilterTextField instance={instance} />
           )
         )}
       </Box>

package/src/utils.ts

@@ -10,7 +10,7 @@ import {
   MRT_ColumnDef,
   MRT_FilterFn,
 } from '.';
-import { defaultFilterFNs } from './filtersFNs';
+import { MRT_FilterFns } from './filtersFns';
 
 export const getAllLeafColumnDefs = (
   columns: MRT_ColumnDef[],
@@ -54,7 +54,7 @@ export const createDataColumn = <D extends Record<string, any> = {}>(
       currentFilterFns[column.id] instanceof Function
         ? currentFilterFns[column.id]
         : // @ts-ignore
-          defaultFilterFNs[currentFilterFns[column.id]],
+          MRT_FilterFns[currentFilterFns[column.id]],
     ...column,
   }) as any;