material-react-table 0.14.3 → 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.3",
+  "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.",
@@ -59,9 +59,9 @@
     "@babel/core": "^7.18.5",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
-    "@faker-js/faker": "^6.3.1",
+    "@faker-js/faker": "^7.3.0",
     "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.8.4",
+    "@mui/material": "^5.8.5",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.5.9",
     "@storybook/addon-actions": "^6.5.9",
@@ -73,7 +73,7 @@
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
     "babel-loader": "^8.2.5",
-    "eslint": "^8.17.0",
+    "eslint": "^8.18.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.1",
     "prettier": "^2.7.1",
@@ -87,7 +87,7 @@
     "storybook-dark-mode": "^1.1.0",
     "tsdx": "^0.14.1",
     "tslib": "^2.4.0",
-    "typescript": "^4.7.3"
+    "typescript": "^4.7.4"
   },
   "peerDependencies": {
     "@emotion/react": ">=11",

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;
@@ -824,7 +829,7 @@ export type MaterialReactTableProps<D extends Record<string, any> = {}> =
     rowNumberMode?: 'original' | 'static';
     selectAllMode?: 'all' | 'page';
     tableId?: string;
-    virtualizerProps?: VirtualizerOptions<HTMLDivElement>;
+    virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement>>;
   };
 
 export default <D extends Record<string, any> = {}>({
@@ -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/head/MRT_TableHeadCell.tsx

@@ -12,32 +12,32 @@ interface Props {
   dragRef?: Ref<HTMLButtonElement>;
   dropRef?: Ref<HTMLDivElement>;
   header: MRT_Header;
+  instance: MRT_TableInstance;
   isDragging?: boolean;
   previewRef?: Ref<HTMLTableCellElement>;
-  instance: MRT_TableInstance;
 }
 
 export const MRT_TableHeadCell: FC<Props> = ({
   dragRef,
   dropRef,
   header,
+  instance,
   isDragging,
   previewRef,
-  instance,
 }) => {
   const {
     getState,
     options: {
       enableColumnActions,
-      enableColumnFilters,
       enableColumnOrdering,
       enableColumnResizing,
       enableGrouping,
+      enableMultiSort,
       muiTableHeadCellProps,
     },
   } = instance;
 
-  const { density } = getState();
+  const { density, showFilters } = getState();
 
   const { column } = header;
 
@@ -139,7 +139,9 @@ export const MRT_TableHeadCell: FC<Props> = ({
         right:
           column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
         transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`,
-        verticalAlign: 'text-top',
+        userSelect: enableMultiSort ? 'none' : undefined,
+        verticalAlign:
+          columnDefType === 'display' && showFilters ? 'center' : 'text-top',
         zIndex: column.getIsResizing()
           ? 3
           : column.getIsPinned() && columnDefType !== 'group'
@@ -167,7 +169,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
           }}
         >
           <Box
-            onClick={() => column.toggleSorting()}
+            onClick={column.getToggleSortingHandler()}
             sx={{
               alignItems: 'center',
               cursor:
@@ -184,14 +186,12 @@ export const MRT_TableHeadCell: FC<Props> = ({
             {columnDefType === 'data' && column.getCanSort() && (
               <MRT_TableHeadCellSortLabel header={header} instance={instance} />
             )}
-            {columnDefType === 'data' &&
-              enableColumnFilters &&
-              column.getCanFilter() && (
-                <MRT_TableHeadCellFilterLabel
-                  header={header}
-                  instance={instance}
-                />
-              )}
+            {columnDefType === 'data' && column.getCanFilter() && (
+              <MRT_TableHeadCellFilterLabel
+                header={header}
+                instance={instance}
+              />
+            )}
           </Box>
           <Box sx={{ whiteSpace: 'nowrap' }}>
             {columnDefType === 'data' &&

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -1,5 +1,5 @@
 import React, { FC, MouseEvent } from 'react';
-import { IconButton, Tooltip } from '@mui/material';
+import { Grow, IconButton, Tooltip } from '@mui/material';
 import { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
@@ -14,73 +14,71 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({
   const {
     getState,
     options: {
-      icons: { FilterAltIcon, FilterAltOffIcon },
+      icons: { FilterAltIcon },
       localization,
     },
-    setShowFilters,
   } = instance;
 
-  const { showFilters } = getState();
+  const { currentFilterFns } = getState();
 
   const { column } = header;
 
   const { columnDef } = column;
 
-  const filterFn = getState()?.currentFilterFns?.[header.id];
+  const filterFn = currentFilterFns?.[header.id];
 
-  const filterTooltip = !!column.getFilterValue()
-    ? localization.filteringByColumn
-        .replace('{column}', String(columnDef.header))
-        .replace(
-          '{filterType}',
-          filterFn instanceof Function
-            ? ''
-            : // @ts-ignore
-              localization[
-                `filter${filterFn.charAt(0).toUpperCase() + filterFn.slice(1)}`
-              ],
-        )
-        .replace(
-          '{filterValue}',
-          `"${
-            Array.isArray(column.getFilterValue())
-              ? (column.getFilterValue() as [string, string]).join(
-                  `" ${localization.and} "`,
-                )
-              : (column.getFilterValue() as string)
-          }"`,
-        )
-        .replace('" "', '')
-    : localization.showHideFilters;
+  const filterTooltip = localization.filteringByColumn
+    .replace('{column}', String(columnDef.header))
+    .replace(
+      '{filterType}',
+      filterFn instanceof Function
+        ? ''
+        : // @ts-ignore
+          localization[
+            `filter${filterFn.charAt(0).toUpperCase() + filterFn.slice(1)}`
+          ],
+    )
+    .replace(
+      '{filterValue}',
+      `"${
+        Array.isArray(column.getFilterValue())
+          ? (column.getFilterValue() as [string, string]).join(
+              `" ${localization.and} "`,
+            )
+          : (column.getFilterValue() as string)
+      }"`,
+    )
+    .replace('" "', '');
 
   return (
-    <Tooltip arrow placement="top" title={filterTooltip}>
-      <IconButton
-        disableRipple
-        onClick={(event: MouseEvent<HTMLButtonElement>) => {
-          event.stopPropagation();
-          setShowFilters(!showFilters);
-        }}
-        size="small"
-        sx={{
-          m: 0,
-          opacity: !!column.getFilterValue() || showFilters ? 0.8 : 0,
-          p: '2px',
-          transition: 'all 0.2s ease-in-out',
-          transform: 'scale(0.66)',
-          '&:hover': {
-            backgroundColor: 'transparent',
-            opacity: 0.8,
-          },
-          width: '1.5ch',
-        }}
-      >
-        {showFilters && !column.getFilterValue() ? (
-          <FilterAltOffIcon />
-        ) : (
-          <FilterAltIcon />
-        )}
-      </IconButton>
-    </Tooltip>
+    <Grow
+      unmountOnExit
+      in={
+        (!!column.getFilterValue() && filterFn !== 'between') ||
+        (filterFn === 'between' && // @ts-ignore
+          (!!column.getFilterValue()?.[0] || !!column.getFilterValue()?.[1]))
+      }
+    >
+      <span>
+        <Tooltip arrow placement="top" title={filterTooltip}>
+          <IconButton
+            disableRipple
+            onClick={(event: MouseEvent<HTMLButtonElement>) => {
+              event.stopPropagation();
+            }}
+            size="small"
+            sx={{
+              m: 0,
+              opacity: 0.8,
+              p: '2px',
+              transform: 'scale(0.66)',
+              width: '1.5ch',
+            }}
+          >
+            <FilterAltIcon />
+          </IconButton>
+        </Tooltip>
+      </span>
+    </Grow>
   );
 };

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,