material-react-table 0.14.5 → 0.15.1

package/dist/sortingFns.d.ts

@@ -0,0 +1,5 @@
+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/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.15.1",
   "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>>;
 };
@@ -87,6 +88,7 @@ export type MRT_TableInstance<D extends Record<string, any> = {}> = Omit<
   | 'getFlatHeaders'
   | 'getLeftLeafColumns'
   | 'getPaginationRowModel'
+  | 'getPreFilteredRowModel'
   | 'getPrePaginationRowModel'
   | 'getRightLeafColumns'
   | 'getRowModel'
@@ -103,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>;
@@ -145,11 +148,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 +207,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 +317,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 +363,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 +383,21 @@ 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;
+    enableGlobalFilterRankedResults?: boolean;
     enablePagination?: boolean;
     enablePersistentState?: boolean;
     enableRowActions?: boolean;
@@ -833,6 +841,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,9 +850,12 @@ export default <D extends Record<string, any> = {}>({
   enableFilters = true,
   enableFullScreenToggle = true,
   enableGlobalFilter = true,
+  enableGlobalFilterChangeMode = true,
+  enableGlobalFilterRankedResults = true,
   enableGrouping = false,
   enableHiding = true,
   enableMultiRowSelection = true,
+  enableMultiSort = true,
   enablePagination = true,
   enablePinning = false,
   enableRowSelection = false,
@@ -872,6 +884,7 @@ export default <D extends Record<string, any> = {}>({
     defaultColumn={defaultColumn}
     editingMode={editingMode}
     enableColumnActions={enableColumnActions}
+    enableColumnFilterChangeMode={enableColumnFilterChangeMode}
     enableColumnFilters={enableColumnFilters}
     enableColumnOrdering={enableColumnOrdering}
     enableColumnResizing={enableColumnResizing}
@@ -880,9 +893,12 @@ export default <D extends Record<string, any> = {}>({
     enableFilters={enableFilters}
     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,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
+      ? 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/{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,25 @@
+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,
+};
+
+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));

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>