@cutting/material-react-table 5.0.0-beta.2 → 5.1.0

package/src/components/toolbar/MRT_ToolbarDropZone.tsx

@@ -1,29 +1,25 @@
-import { Box, type BoxProps } from '@mui/material';
-import { Fade } from '@mui/material';
-import { Typography } from '@mui/material';
-import { alpha } from '@mui/material/styles';
-import { type DragEvent, useEffect } from 'react';
+import { Box, type BoxProps, Fade, Typography } from '@mui/material';
+import { alpha, type CSSObject } from '@mui/material/styles';
+import { type DragEvent, useEffect, useRef } from 'react';
 
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-export interface MRT_ToolbarDropZoneProps<TData extends MRT_RowData>
-  extends BoxProps {
+export interface MRT_ToolbarDropZoneProps<TData extends MRT_RowData> extends BoxProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_ToolbarDropZone = <TData extends MRT_RowData>({
   table,
   ...rest
-}: MRT_ToolbarDropZoneProps<TData>) => {
+}: MRT_ToolbarDropZoneProps<TData>): JSX.Element => {
   const {
     options: { enableGrouping, localization },
     setHoveredColumn,
     setShowToolbarDropZone,
   } = table;
 
-  const { draggingColumn, grouping, hoveredColumn, showToolbarDropZone } =
-    table.state;
+  const { draggingColumn, grouping, hoveredColumn, showToolbarDropZone } = table.state;
 
   const handleDragEnter = (_event: DragEvent<HTMLDivElement>) => {
     setHoveredColumn({ id: 'drop-zone' });
@@ -33,16 +29,23 @@ export const MRT_ToolbarDropZone = <TData extends MRT_RowData>({
     e.preventDefault();
   };
 
+  const isShowToolbarDropZoneControlled = table.options.state?.showToolbarDropZone !== undefined;
+  const setShowToolbarDropZoneRef = useRef(setShowToolbarDropZone);
+
+  useEffect(() => {
+    setShowToolbarDropZoneRef.current = setShowToolbarDropZone;
+  });
+
   useEffect(() => {
-    if (table.options.state?.showToolbarDropZone !== undefined) {
-      setShowToolbarDropZone(
+    if (isShowToolbarDropZoneControlled) {
+      setShowToolbarDropZoneRef.current(
         !!enableGrouping &&
           !!draggingColumn &&
           draggingColumn.columnDef.enableGrouping !== false &&
           !grouping.includes(draggingColumn.id),
       );
     }
-  }, [enableGrouping, draggingColumn, grouping]);
+  }, [draggingColumn, enableGrouping, grouping, isShowToolbarDropZoneControlled]);
 
   return (
     <Fade in={showToolbarDropZone}>
@@ -63,16 +66,15 @@ export const MRT_ToolbarDropZone = <TData extends MRT_RowData>({
           position: 'absolute',
           width: '100%',
           zIndex: 4,
-          ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+          ...(parseFromValuesOrFunc(rest?.sx, theme) as CSSObject),
         })}
       >
-        <Typography sx={{
-          fontStyle: "italic"
-        }}>
-          {localization.dropToGroupBy.replace(
-            '{column}',
-            draggingColumn?.columnDef?.header ?? '',
-          )}
+        <Typography
+          sx={{
+            fontStyle: 'italic',
+          }}
+        >
+          {localization.dropToGroupBy.replace('{column}', draggingColumn?.columnDef?.header ?? '')}
         </Typography>
       </Box>
     </Fade>

package/src/components/toolbar/MRT_ToolbarInternalButtons.tsx

@@ -1,4 +1,5 @@
 import { Box, type BoxProps } from '@mui/material';
+import { type CSSObject } from '@mui/material/styles';
 
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
@@ -8,15 +9,14 @@ import { MRT_ToggleFiltersButton } from '../buttons/MRT_ToggleFiltersButton';
 import { MRT_ToggleFullScreenButton } from '../buttons/MRT_ToggleFullScreenButton';
 import { MRT_ToggleGlobalFilterButton } from '../buttons/MRT_ToggleGlobalFilterButton';
 
-export interface MRT_ToolbarInternalButtonsProps<TData extends MRT_RowData>
-  extends BoxProps {
+export interface MRT_ToolbarInternalButtonsProps<TData extends MRT_RowData> extends BoxProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_ToolbarInternalButtons = <TData extends MRT_RowData>({
   table,
   ...rest
-}: MRT_ToolbarInternalButtonsProps<TData>) => {
+}: MRT_ToolbarInternalButtonsProps<TData>): JSX.Element => {
   const {
     options: {
       columnFilterDisplayMode,
@@ -40,32 +40,22 @@ export const MRT_ToolbarInternalButtons = <TData extends MRT_RowData>({
         alignItems: 'center',
         display: 'flex',
         zIndex: 3,
-        ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+        ...(parseFromValuesOrFunc(rest?.sx, theme) as CSSObject),
       })}
     >
       {renderToolbarInternalActions?.({
         table,
       }) ?? (
         <>
-          {enableFilters &&
-            enableGlobalFilter &&
-            !initialState?.showGlobalFilter && (
-              <MRT_ToggleGlobalFilterButton table={table} />
-            )}
-          {enableFilters &&
-            enableColumnFilters &&
-            columnFilterDisplayMode !== 'popover' && (
-              <MRT_ToggleFiltersButton table={table} />
-            )}
-          {(enableHiding || enableColumnOrdering || enableColumnPinning) && (
-            <MRT_ShowHideColumnsButton table={table} />
+          {enableFilters && enableGlobalFilter && !initialState?.showGlobalFilter && (
+            <MRT_ToggleGlobalFilterButton table={table} />
           )}
-          {enableDensityToggle && (
-            <MRT_ToggleDensePaddingButton table={table} />
-          )}
-          {enableFullScreenToggle && (
-            <MRT_ToggleFullScreenButton table={table} />
+          {enableFilters && enableColumnFilters && columnFilterDisplayMode !== 'popover' && (
+            <MRT_ToggleFiltersButton table={table} />
           )}
+          {(enableHiding || enableColumnOrdering || enableColumnPinning) && <MRT_ShowHideColumnsButton table={table} />}
+          {enableDensityToggle && <MRT_ToggleDensePaddingButton table={table} />}
+          {enableFullScreenToggle && <MRT_ToggleFullScreenButton table={table} />}
         </>
       )}
     </Box>

package/src/components/toolbar/MRT_TopToolbar.tsx

@@ -1,4 +1,5 @@
 import { Box, useMediaQuery } from '@mui/material';
+import { type CSSObject } from '@mui/material/styles';
 
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { getCommonToolbarStyles } from '../../utils/style.utils';
@@ -14,9 +15,7 @@ export interface MRT_TopToolbarProps<TData extends MRT_RowData> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TopToolbar = <TData extends MRT_RowData>({
-  table,
-}: MRT_TopToolbarProps<TData>) => {
+export const MRT_TopToolbar = <TData extends MRT_RowData>({ table }: MRT_TopToolbarProps<TData>): JSX.Element => {
   const {
     options: {
       enableGlobalFilter,
@@ -39,10 +38,7 @@ export const MRT_TopToolbar = <TData extends MRT_RowData>({
 
   const toolbarProps = parseFromValuesOrFunc(muiTopToolbarProps, { table });
 
-  const stackAlertBanner =
-    isMobile ||
-    !!renderTopToolbarCustomActions ||
-    (showGlobalFilter && isTablet);
+  const stackAlertBanner = isMobile || !!renderTopToolbarCustomActions || (showGlobalFilter && isTablet);
 
   const globalFilterProps = {
     sx: !isTablet
@@ -58,8 +54,7 @@ export const MRT_TopToolbar = <TData extends MRT_RowData>({
       {...toolbarProps}
       ref={(ref: HTMLDivElement) => {
         topToolbarRef.current = ref;
-        if (toolbarProps?.ref) {
-          // @ts-expect-error
+        if (toolbarProps?.ref && typeof toolbarProps.ref === 'object') {
           toolbarProps.ref.current = ref;
         }
       }}
@@ -67,18 +62,13 @@ export const MRT_TopToolbar = <TData extends MRT_RowData>({
         ...getCommonToolbarStyles({ table, theme }),
         position: isFullScreen ? 'sticky' : 'relative',
         top: isFullScreen ? '0' : undefined,
-        ...(parseFromValuesOrFunc(toolbarProps?.sx, theme) as any),
+        ...(parseFromValuesOrFunc(toolbarProps?.sx, theme) as CSSObject),
       })}
     >
       {positionToolbarAlertBanner === 'top' && (
-        <MRT_ToolbarAlertBanner
-          stackAlertBanner={stackAlertBanner}
-          table={table}
-        />
-      )}
-      {['both', 'top'].includes(positionToolbarDropZone ?? '') && (
-        <MRT_ToolbarDropZone table={table} />
+        <MRT_ToolbarAlertBanner stackAlertBanner={stackAlertBanner} table={table} />
       )}
+      {['both', 'top'].includes(positionToolbarDropZone ?? '') && <MRT_ToolbarDropZone table={table} />}
       <Box
         sx={{
           alignItems: 'flex-start',
@@ -93,9 +83,7 @@ export const MRT_TopToolbar = <TData extends MRT_RowData>({
           width: '100%',
         }}
       >
-        {enableGlobalFilter && positionGlobalFilter === 'left' && (
-          <MRT_GlobalFilterTextField {...globalFilterProps} />
-        )}
+        {enableGlobalFilter && positionGlobalFilter === 'left' && <MRT_GlobalFilterTextField {...globalFilterProps} />}
         {renderTopToolbarCustomActions?.({ table }) ?? <span />}
         {enableToolbarInternalActions ? (
           <Box
@@ -113,16 +101,12 @@ export const MRT_TopToolbar = <TData extends MRT_RowData>({
             <MRT_ToolbarInternalButtons table={table} />
           </Box>
         ) : (
-          enableGlobalFilter &&
-          positionGlobalFilter === 'right' && (
-            <MRT_GlobalFilterTextField {...globalFilterProps} />
-          )
+          enableGlobalFilter && positionGlobalFilter === 'right' && <MRT_GlobalFilterTextField {...globalFilterProps} />
         )}
       </Box>
-      {enablePagination &&
-        ['both', 'top'].includes(positionPagination ?? '') && (
-          <MRT_TablePagination position="top" table={table} />
-        )}
+      {enablePagination && ['both', 'top'].includes(positionPagination ?? '') && (
+        <MRT_TablePagination position="top" table={table} />
+      )}
       <MRT_LinearProgressBar isTopToolbar table={table} />
     </Box>
   );

package/src/fns/aggregationFns.test.tsx

@@ -46,9 +46,7 @@ describe('aggregation fns', () => {
   ])('%s aggregates each group', (aggregationFn, expected) => {
     const container = renderGrouped(aggregationFn);
 
-    const aggregated = Array.from(
-      container.querySelectorAll('tbody td'),
-    )
+    const aggregated = Array.from(container.querySelectorAll('tbody td'))
       .map((td) => td.textContent)
       .filter((text) => text?.startsWith('agg:'));
 

package/src/fns/filterFns.test.tsx

@@ -8,31 +8,16 @@ interface Person {
   name: string;
 }
 
-const data: Person[] = [
-  { name: 'Jonathan' },
-  { name: 'John' },
-  { name: 'Sara' },
-  { name: 'Aaron' },
-];
+const data: Person[] = [{ name: 'Jonathan' }, { name: 'John' }, { name: 'Sara' }, { name: 'Aaron' }];
 
-const columns: MRT_ColumnDef<Person>[] = [
-  { accessorKey: 'name', header: 'Name' },
-];
+const columns: MRT_ColumnDef<Person>[] = [{ accessorKey: 'name', header: 'Name' }];
 
 const renderedNames = (container: HTMLElement) =>
-  Array.from(container.querySelectorAll('tbody tr')).map(
-    (row) => row.textContent,
-  );
+  Array.from(container.querySelectorAll('tbody tr')).map((row) => row.textContent);
 
 describe('fuzzy global filter', () => {
   test('keeps rows whose value matches the term and drops the rest', () => {
-    render(
-      <MaterialReactTable
-        columns={columns}
-        data={data}
-        initialState={{ globalFilter: 'john' }}
-      />,
-    );
+    render(<MaterialReactTable columns={columns} data={data} initialState={{ globalFilter: 'john' }} />);
 
     expect(screen.getByText('John')).toBeInTheDocument();
     expect(screen.getByText('Jonathan')).toBeInTheDocument();
@@ -42,11 +27,7 @@ describe('fuzzy global filter', () => {
 
   test('orders matches by rank rather than by source order', () => {
     const { container } = render(
-      <MaterialReactTable
-        columns={columns}
-        data={data}
-        initialState={{ globalFilter: 'john' }}
-      />,
+      <MaterialReactTable columns={columns} data={data} initialState={{ globalFilter: 'john' }} />,
     );
 
     expect(renderedNames(container)).toEqual(['John', 'Jonathan']);
@@ -67,11 +48,7 @@ describe('fuzzy global filter', () => {
 
   test('drops every row when no value matches the term', () => {
     const { container } = render(
-      <MaterialReactTable
-        columns={columns}
-        data={data}
-        initialState={{ globalFilter: 'zzz' }}
-      />,
+      <MaterialReactTable columns={columns} data={data} initialState={{ globalFilter: 'zzz' }} />,
     );
 
     expect(renderedNames(container)).toEqual(['No results found']);
@@ -94,11 +71,7 @@ const employeeColumns = (): MRT_ColumnDef<Employee>[] => [
   { accessorKey: 'age', header: 'Age' },
 ];
 
-const renderFiltered = (
-  columnId: string,
-  filterFn: string,
-  value: unknown,
-) => {
+const renderFiltered = (columnId: string, filterFn: string, value: unknown) => {
   const { container } = render(
     <MaterialReactTable
       columns={employeeColumns()}
@@ -109,9 +82,7 @@ const renderFiltered = (
       }}
     />,
   );
-  return Array.from(container.querySelectorAll('tbody tr')).map(
-    (row) => row.querySelector('td')?.textContent,
-  );
+  return Array.from(container.querySelectorAll('tbody tr')).map((row) => row.querySelector('td')?.textContent);
 };
 
 describe('column filter fns', () => {
@@ -135,6 +106,7 @@ describe('column filter fns', () => {
     ['greaterThanOrEqualTo', 30, ['Alice', 'alice']],
     ['lessThan', 30, ['Bob']],
     ['lessThanOrEqualTo', 20, ['Bob']],
+    ['weakEquals', '30', ['Alice']],
   ])('%s filters the age column', (filterFn, value, expected) => {
     expect(renderFiltered('age', filterFn, value)).toEqual(expected);
   });

package/src/fns/filterFns.ts

@@ -8,182 +8,158 @@ import {
   filterFn_includesString,
   filterFn_includesStringSensitive,
   filterFn_inNumberRange,
+  filterFn_weakEquals,
   type FilterMeta,
   type Row,
+  type TableFeatures,
 } from '@tanstack/react-table';
 
 import { type MRT_RowData } from '../types';
 
-const fuzzy = <TData extends MRT_RowData>(
-  row: Row<any, TData>,
+const fuzzy = <TFeatures extends TableFeatures, TData extends MRT_RowData>(
+  row: Row<TFeatures, TData>,
   columnId: string,
   filterValue: number | string,
   addMeta?: (meta: FilterMeta) => void,
 ): boolean => {
-  const itemRank = rankItem(
-    row.getValue<null | number | string>(columnId),
-    filterValue as string,
-    {
-      threshold: rankings.MATCHES,
-    },
-  );
+  const itemRank = rankItem(row.getValue<null | number | string>(columnId), filterValue as string, {
+    threshold: rankings.MATCHES,
+  });
   addMeta?.(itemRank);
   return itemRank.passed;
 };
 
-fuzzy.autoRemove = (val: any) => !val;
+fuzzy.autoRemove = (val: unknown): boolean => !val;
 
-const contains = <TData extends MRT_RowData>(
-  row: Row<any, TData>,
+const normalize = (value: number | string): string => value.toString().toLowerCase().trim();
+
+const getNormalizedValue = <TFeatures extends TableFeatures, TData extends MRT_RowData>(
+  row: Row<TFeatures, TData>,
+  id: string,
+): string | undefined => {
+  const value = row.getValue<null | number | string>(id);
+  return value === null || value === undefined ? undefined : normalize(value);
+};
+
+const contains = <TFeatures extends TableFeatures, TData extends MRT_RowData>(
+  row: Row<TFeatures, TData>,
   id: string,
   filterValue: number | string,
-): boolean =>
-  !!row
-    .getValue<null | number | string>(id)
-    ?.toString()
-    .toLowerCase()
-    .trim()
-    .includes(filterValue.toString().toLowerCase().trim());
+): boolean => !!getNormalizedValue(row, id)?.includes(normalize(filterValue));
 
-contains.autoRemove = (val: any) => !val;
+contains.autoRemove = (val: unknown): boolean => !val;
 
-const startsWith = <TData extends MRT_RowData>(
-  row: Row<any, TData>,
+const startsWith = <TFeatures extends TableFeatures, TData extends MRT_RowData>(
+  row: Row<TFeatures, TData>,
   id: string,
   filterValue: number | string,
-): boolean =>
-  !!row
-    .getValue<null | number | string>(id)
-    ?.toString()
-    .toLowerCase()
-    .trim()
-    .startsWith(filterValue.toString().toLowerCase().trim());
+): boolean => !!getNormalizedValue(row, id)?.startsWith(normalize(filterValue));
 
-startsWith.autoRemove = (val: any) => !val;
+startsWith.autoRemove = (val: unknown): boolean => !val;
 
-const endsWith = <TData extends MRT_RowData>(
-  row: Row<any, TData>,
+const endsWith = <TFeatures extends TableFeatures, TData extends MRT_RowData>(
+  row: Row<TFeatures, TData>,
   id: string,
   filterValue: number | string,
-): boolean =>
-  !!row
-    .getValue<null | number | string>(id)
-    ?.toString()
-    .toLowerCase()
-    .trim()
-    .endsWith(filterValue.toString().toLowerCase().trim());
+): boolean => !!getNormalizedValue(row, id)?.endsWith(normalize(filterValue));
 
-endsWith.autoRemove = (val: any) => !val;
+endsWith.autoRemove = (val: unknown): boolean => !val;
 
-const equals = <TData extends MRT_RowData>(
-  row: Row<any, TData>,
+const equals = <TFeatures extends TableFeatures, TData extends MRT_RowData>(
+  row: Row<TFeatures, TData>,
   id: string,
   filterValue: number | string,
-): boolean =>
-  row.getValue<null | number | string>(id)?.toString().toLowerCase().trim() ===
-  filterValue.toString().toLowerCase().trim();
+): boolean => getNormalizedValue(row, id) === normalize(filterValue);
 
-equals.autoRemove = (val: any) => !val;
+equals.autoRemove = (val: unknown): boolean => !val;
 
-const notEquals = <TData extends MRT_RowData>(
-  row: Row<any, TData>,
+const notEquals = <TFeatures extends TableFeatures, TData extends MRT_RowData>(
+  row: Row<TFeatures, TData>,
   id: string,
   filterValue: number | string,
-): boolean =>
-  row.getValue<null | number | string>(id)?.toString().toLowerCase().trim() !==
-  filterValue.toString().toLowerCase().trim();
+): boolean => getNormalizedValue(row, id) !== normalize(filterValue);
 
-notEquals.autoRemove = (val: any) => !val;
+notEquals.autoRemove = (val: unknown): boolean => !val;
 
-const greaterThan = <TData extends MRT_RowData>(
-  row: Row<any, TData>,
+const greaterThan = <TFeatures extends TableFeatures, TData extends MRT_RowData>(
+  row: Row<TFeatures, TData>,
   id: string,
   filterValue: number | string,
 ): boolean =>
   !isNaN(+filterValue) && !isNaN(+row.getValue<number | string>(id))
     ? +(row.getValue<null | number | string>(id) ?? 0) > +filterValue
-    : (row.getValue<null | number | string>(id) ?? '')
-        ?.toString()
-        .toLowerCase()
-        .trim() > filterValue.toString().toLowerCase().trim();
+    : (getNormalizedValue(row, id) ?? '') > normalize(filterValue);
 
-greaterThan.autoRemove = (val: any) => !val;
+greaterThan.autoRemove = (val: unknown): boolean => !val;
 
-const greaterThanOrEqualTo = <TData extends MRT_RowData>(
-  row: Row<any, TData>,
+const greaterThanOrEqualTo = <TFeatures extends TableFeatures, TData extends MRT_RowData>(
+  row: Row<TFeatures, TData>,
   id: string,
   filterValue: number | string,
 ): boolean => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
 
-greaterThanOrEqualTo.autoRemove = (val: any) => !val;
+greaterThanOrEqualTo.autoRemove = (val: unknown): boolean => !val;
 
-const lessThan = <TData extends MRT_RowData>(
-  row: Row<any, TData>,
+const lessThan = <TFeatures extends TableFeatures, TData extends MRT_RowData>(
+  row: Row<TFeatures, TData>,
   id: string,
   filterValue: number | string,
 ): boolean =>
   !isNaN(+filterValue) && !isNaN(+row.getValue<number | string>(id))
     ? +(row.getValue<null | number | string>(id) ?? 0) < +filterValue
-    : (row.getValue<null | number | string>(id) ?? '')
-        ?.toString()
-        .toLowerCase()
-        .trim() < filterValue.toString().toLowerCase().trim();
+    : (getNormalizedValue(row, id) ?? '') < normalize(filterValue);
 
-lessThan.autoRemove = (val: any) => !val;
+lessThan.autoRemove = (val: unknown): boolean => !val;
 
-const lessThanOrEqualTo = <TData extends MRT_RowData>(
-  row: Row<any, TData>,
+const lessThanOrEqualTo = <TFeatures extends TableFeatures, TData extends MRT_RowData>(
+  row: Row<TFeatures, TData>,
   id: string,
   filterValue: number | string,
 ): boolean => equals(row, id, filterValue) || lessThan(row, id, filterValue);
 
-lessThanOrEqualTo.autoRemove = (val: any) => !val;
+lessThanOrEqualTo.autoRemove = (val: unknown): boolean => !val;
 
-const between = <TData extends MRT_RowData>(
-  row: Row<any, TData>,
+const between = <TFeatures extends TableFeatures, TData extends MRT_RowData>(
+  row: Row<TFeatures, TData>,
   id: string,
   filterValues: [number | string, number | string],
 ): boolean =>
-  ((['', undefined] as any[]).includes(filterValues[0]) ||
-    greaterThan(row, id, filterValues[0])) &&
-  ((!isNaN(+filterValues[0]) &&
-    !isNaN(+filterValues[1]) &&
-    +filterValues[0] > +filterValues[1]) ||
-    (['', undefined] as any[]).includes(filterValues[1]) ||
+  (filterValues[0] === '' || filterValues[0] === undefined || greaterThan(row, id, filterValues[0])) &&
+  ((!isNaN(+filterValues[0]) && !isNaN(+filterValues[1]) && +filterValues[0] > +filterValues[1]) ||
+    filterValues[1] === '' ||
+    filterValues[1] === undefined ||
     lessThan(row, id, filterValues[1]));
 
-between.autoRemove = (val: any) => !val;
+between.autoRemove = (val: unknown): boolean => !val;
 
-const betweenInclusive = <TData extends MRT_RowData>(
-  row: Row<any, TData>,
+const betweenInclusive = <TFeatures extends TableFeatures, TData extends MRT_RowData>(
+  row: Row<TFeatures, TData>,
   id: string,
   filterValues: [number | string, number | string],
 ): boolean =>
-  ((['', undefined] as any[]).includes(filterValues[0]) ||
-    greaterThanOrEqualTo(row, id, filterValues[0])) &&
-  ((!isNaN(+filterValues[0]) &&
-    !isNaN(+filterValues[1]) &&
-    +filterValues[0] > +filterValues[1]) ||
-    (['', undefined] as any[]).includes(filterValues[1]) ||
+  (filterValues[0] === '' || filterValues[0] === undefined || greaterThanOrEqualTo(row, id, filterValues[0])) &&
+  ((!isNaN(+filterValues[0]) && !isNaN(+filterValues[1]) && +filterValues[0] > +filterValues[1]) ||
+    filterValues[1] === '' ||
+    filterValues[1] === undefined ||
     lessThanOrEqualTo(row, id, filterValues[1]));
 
-betweenInclusive.autoRemove = (val: any) => !val;
+betweenInclusive.autoRemove = (val: unknown): boolean => !val;
 
-const empty = <TData extends MRT_RowData>(
-  row: Row<any, TData>,
+const empty = <TFeatures extends TableFeatures, TData extends MRT_RowData>(
+  row: Row<TFeatures, TData>,
   id: string,
   _filterValue: number | string,
 ): boolean => !row.getValue<null | number | string>(id)?.toString().trim();
 
-empty.autoRemove = (val: any) => !val;
+empty.autoRemove = (val: unknown): boolean => !val;
 
-const notEmpty = <TData extends MRT_RowData>(
-  row: Row<any, TData>,
+const notEmpty = <TFeatures extends TableFeatures, TData extends MRT_RowData>(
+  row: Row<TFeatures, TData>,
   id: string,
   _filterValue: number | string,
 ): boolean => !!row.getValue<null | number | string>(id)?.toString().trim();
 
-notEmpty.autoRemove = (val: any) => !val;
+notEmpty.autoRemove = (val: unknown): boolean => !val;
 
 export const MRT_FilterFns = {
   arrIncludes: filterFn_arrIncludes,
@@ -208,4 +184,5 @@ export const MRT_FilterFns = {
   notEmpty,
   notEquals,
   startsWith,
+  weakEquals: filterFn_weakEquals,
 };

package/src/fns/sortingFns.test.tsx

@@ -0,0 +1,39 @@
+import { render } from '@testing-library/react';
+import { describe, expect, test } from 'vitest';
+
+import { MaterialReactTable } from '../components/MaterialReactTable';
+import { type MRT_ColumnDef } from '../types';
+
+interface Item {
+  code: string;
+  count: number;
+}
+
+const items: Item[] = [
+  { code: 'item10', count: 100 },
+  { code: 'item9', count: 9 },
+  { code: 'item100', count: 10 },
+];
+
+const renderSorted = (columnId: keyof Item, sortFn: string) => {
+  const columns: MRT_ColumnDef<Item>[] = [
+    { accessorKey: 'code', header: 'Code' },
+    { accessorKey: 'count', header: 'Count' },
+  ].map((column) => (column.accessorKey === columnId ? { ...column, sortFn } : column));
+
+  const { container } = render(
+    <MaterialReactTable columns={columns} data={items} initialState={{ sorting: [{ desc: false, id: columnId }] }} />,
+  );
+
+  return Array.from(container.querySelectorAll('tbody tr')).map((row) => row.querySelector('td')?.textContent);
+};
+
+describe('sort fns', () => {
+  test('alphanumericCaseSensitive sorts the numbers inside the code', () => {
+    expect(renderSorted('code', 'alphanumericCaseSensitive')).toEqual(['item9', 'item10', 'item100']);
+  });
+
+  test('textCaseSensitive sorts the count as text', () => {
+    expect(renderSorted('count', 'textCaseSensitive')).toEqual(['item100', 'item10', 'item9']);
+  });
+});