material-react-table 2.0.0-alpha.0 → 2.0.0-alpha.2

package/src/buttons/MRT_EditActionButtons.tsx

@@ -1,8 +1,8 @@
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import CircularProgress from '@mui/material/CircularProgress';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -23,8 +23,8 @@ export const MRT_EditActionButtons = <TData extends Record<string, any>>({
       localization,
       onCreatingRowCancel,
       onCreatingRowSave,
-      onEditingRowSave,
       onEditingRowCancel,
+      onEditingRowSave,
     },
     refs: { editInputRefs },
     setCreatingRow,
@@ -100,12 +100,12 @@ export const MRT_EditActionButtons = <TData extends Record<string, any>>({
         </>
       ) : (
         <>
-          <Button sx={{ minWidth: '100px' }} onClick={handleCancel}>
+          <Button onClick={handleCancel} sx={{ minWidth: '100px' }}>
             {localization.cancel}
           </Button>
           <Button
-            sx={{ minWidth: '100px' }}
             onClick={handleSubmitRow}
+            sx={{ minWidth: '100px' }}
             variant="contained"
           >
             {isSaving && <CircularProgress color="inherit" size={18} />}

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -1,5 +1,6 @@
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -10,9 +11,9 @@ export const MRT_ExpandAllButton = <TData extends Record<string, any>>({
   table,
 }: Props<TData>) => {
   const {
+    getCanSomeRowsExpand,
     getIsAllRowsExpanded,
     getIsSomeRowsExpanded,
-    getCanSomeRowsExpand,
     getState,
     options: {
       icons: { KeyboardDoubleArrowDownIcon },
@@ -24,10 +25,9 @@ export const MRT_ExpandAllButton = <TData extends Record<string, any>>({
   } = table;
   const { density, isLoading } = getState();
 
-  const iconButtonProps =
-    muiExpandAllButtonProps instanceof Function
-      ? muiExpandAllButtonProps({ table })
-      : muiExpandAllButtonProps;
+  const iconButtonProps = parseFromValuesOrFunc(muiExpandAllButtonProps, {
+    table,
+  });
 
   const isAllRowsExpanded = getIsAllRowsExpanded();
 
@@ -52,11 +52,9 @@ export const MRT_ExpandAllButton = <TData extends Record<string, any>>({
           {...iconButtonProps}
           sx={(theme) => ({
             height: density === 'compact' ? '1.75rem' : '2.25rem',
-            width: density === 'compact' ? '1.75rem' : '2.25rem',
             mt: density !== 'compact' ? '-0.25rem' : undefined,
-            ...(iconButtonProps?.sx instanceof Function
-              ? iconButtonProps?.sx(theme)
-              : (iconButtonProps?.sx as any)),
+            width: density === 'compact' ? '1.75rem' : '2.25rem',
+            ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
           })}
           title={undefined}
         >

package/src/buttons/MRT_ExpandButton.tsx

@@ -1,6 +1,7 @@
 import { type MouseEvent } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -23,10 +24,10 @@ export const MRT_ExpandButton = <TData extends Record<string, any>>({
   } = table;
   const { density } = getState();
 
-  const iconButtonProps =
-    muiExpandButtonProps instanceof Function
-      ? muiExpandButtonProps({ table, row })
-      : muiExpandButtonProps;
+  const iconButtonProps = parseFromValuesOrFunc(muiExpandButtonProps, {
+    row,
+    table,
+  });
 
   const canExpand = row.getCanExpand();
   const isExpanded = row.getIsExpanded();
@@ -58,9 +59,7 @@ export const MRT_ExpandButton = <TData extends Record<string, any>>({
           sx={(theme) => ({
             height: density === 'compact' ? '1.75rem' : '2.25rem',
             width: density === 'compact' ? '1.75rem' : '2.25rem',
-            ...(iconButtonProps?.sx instanceof Function
-              ? iconButtonProps.sx(theme)
-              : (iconButtonProps?.sx as any)),
+            ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
           })}
           title={undefined}
         >

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -1,13 +1,14 @@
 import { type DragEventHandler } from 'react';
 import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
 import { type IconButtonProps } from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   iconButtonProps?: IconButtonProps;
-  onDragStart: DragEventHandler<HTMLButtonElement>;
   onDragEnd: DragEventHandler<HTMLButtonElement>;
+  onDragStart: DragEventHandler<HTMLButtonElement>;
   table: MRT_TableInstance<TData>;
 }
 
@@ -41,24 +42,22 @@ export const MRT_GrabHandleButton = <TData extends Record<string, any>>({
           e.stopPropagation();
           iconButtonProps?.onClick?.(e);
         }}
-        onDragStart={onDragStart}
         onDragEnd={onDragEnd}
+        onDragStart={onDragStart}
         sx={(theme) => ({
+          '&:active': {
+            cursor: 'grabbing',
+          },
+          '&:hover': {
+            backgroundColor: 'transparent',
+            opacity: 1,
+          },
           cursor: 'grab',
           m: '0 -0.1rem',
           opacity: 0.5,
           p: '2px',
           transition: 'all 150ms ease-in-out',
-          '&:hover': {
-            backgroundColor: 'transparent',
-            opacity: 1,
-          },
-          '&:active': {
-            cursor: 'grabbing',
-          },
-          ...(iconButtonProps?.sx instanceof Function
-            ? iconButtonProps?.sx(theme)
-            : (iconButtonProps?.sx as any)),
+          ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
         })}
         title={undefined}
       >

package/src/buttons/MRT_RowPinButton.tsx

@@ -0,0 +1,74 @@
+import { type MouseEvent, useState } from 'react';
+import { type RowPinningPosition } from '@tanstack/react-table';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import { type MRT_Row, type MRT_TableInstance } from '../types';
+
+interface Props<TData extends Record<string, any>> {
+  pinningPosition: RowPinningPosition;
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_RowPinButton = <TData extends Record<string, any>>({
+  pinningPosition,
+  row,
+  table,
+}: Props<TData>) => {
+  const {
+    options: {
+      icons: { CloseIcon, PushPinIcon },
+      localization,
+      rowPinningDisplayMode,
+    },
+  } = table;
+
+  const isPinned = row.getIsPinned();
+
+  const [tooltipOpened, setTooltipOpened] = useState(false);
+
+  const handleTogglePin = (event: MouseEvent<HTMLButtonElement>) => {
+    setTooltipOpened(false);
+    event.stopPropagation();
+    row.pin(isPinned ? false : pinningPosition);
+  };
+
+  return (
+    <Tooltip
+      arrow
+      enterDelay={1000}
+      enterNextDelay={1000}
+      open={tooltipOpened}
+      title={isPinned ? localization.unpin : localization.pin}
+    >
+      <IconButton
+        aria-label={localization.pin}
+        onClick={handleTogglePin}
+        onMouseEnter={() => setTooltipOpened(true)}
+        onMouseLeave={() => setTooltipOpened(false)}
+        size="small"
+        sx={{
+          height: '24px',
+          width: '24px',
+        }}
+      >
+        {isPinned ? (
+          <CloseIcon />
+        ) : (
+          <PushPinIcon
+            fontSize="small"
+            style={{
+              transform: `rotate(${
+                rowPinningDisplayMode === 'sticky'
+                  ? 135
+                  : pinningPosition === 'top'
+                  ? 180
+                  : 0
+              }deg)`,
+            }}
+          />
+        )}
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -20,7 +20,7 @@ export const MRT_ShowHideColumnsButton = <TData extends Record<string, any>>({
     },
   } = table;
 
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 
   const handleClick = (event: MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);

package/src/buttons/MRT_ToggleFullScreenButton.tsx

@@ -1,8 +1,8 @@
+import { useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_TableInstance } from '../types';
-import { useState } from 'react';
 
 interface Props<TData extends Record<string, any>> extends IconButtonProps {
   table: MRT_TableInstance<TData>;
@@ -31,8 +31,8 @@ export const MRT_ToggleFullScreenButton = <TData extends Record<string, any>>({
 
   return (
     <Tooltip
-      open={tooltipOpened}
       arrow
+      open={tooltipOpened}
       title={rest?.title ?? localization.toggleFullScreen}
     >
       <IconButton

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -1,19 +1,20 @@
 import { type MouseEvent, useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
 import { MRT_EditActionButtons } from './MRT_EditActionButtons';
+import { parseFromValuesOrFunc } from '../column.utils';
+import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
 import { type MRT_Cell, type MRT_Row, type MRT_TableInstance } from '../types';
 
 const commonIconButtonStyles = {
+  '&:hover': {
+    opacity: 1,
+  },
   height: '2rem',
   ml: '10px',
   opacity: 0.5,
   transition: 'opacity 150ms',
   width: '2rem',
-  '&:hover': {
-    opacity: 1,
-  },
 };
 
 interface Props<TData extends Record<string, any>> {
@@ -52,7 +53,7 @@ export const MRT_ToggleRowActionMenuButton = <
     (isCreating && createDisplayMode === 'row') ||
     (isEditing && editDisplayMode === 'row');
 
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 
   const handleOpenRowActionMenu = (event: MouseEvent<HTMLElement>) => {
     event.stopPropagation();
@@ -73,14 +74,12 @@ export const MRT_ToggleRowActionMenuButton = <
       ) : showEditActionButtons ? (
         <MRT_EditActionButtons row={row} table={table} />
       ) : !renderRowActionMenuItems &&
-        (enableEditing instanceof Function
-          ? enableEditing(row)
-          : enableEditing) ? (
-        <Tooltip placement="right" arrow title={localization.edit}>
+        parseFromValuesOrFunc(enableEditing, row) ? (
+        <Tooltip arrow placement="right" title={localization.edit}>
           <IconButton
             aria-label={localization.edit}
-            sx={commonIconButtonStyles}
             onClick={handleStartEditMode}
+            sx={commonIconButtonStyles}
           >
             <EditIcon />
           </IconButton>

package/src/buttons/index.ts

@@ -3,10 +3,11 @@ export * from './MRT_CopyButton';
 export * from './MRT_EditActionButtons';
 export * from './MRT_ExpandAllButton';
 export * from './MRT_ExpandButton';
-export * from './MRT_ToggleFullScreenButton';
 export * from './MRT_GrabHandleButton';
+export * from './MRT_RowPinButton';
 export * from './MRT_ShowHideColumnsButton';
 export * from './MRT_ToggleDensePaddingButton';
 export * from './MRT_ToggleFiltersButton';
+export * from './MRT_ToggleFullScreenButton';
 export * from './MRT_ToggleGlobalFilterButton';
 export * from './MRT_ToggleRowActionMenuButton';

package/src/column.utils.ts

@@ -1,18 +1,17 @@
 import { type ReactNode } from 'react';
 import {
-  type Row,
-  type Renderable,
-  flexRender as _flexRender,
   createRow as _createRow,
+  flexRender as _flexRender,
+  type Renderable,
+  type Row,
 } from '@tanstack/react-table';
+import { type TableCellProps } from '@mui/material/TableCell';
 import { alpha, lighten } from '@mui/material/styles';
+import { type Theme } from '@mui/material/styles';
 import { type MRT_AggregationFns } from './aggregationFns';
 import { type MRT_FilterFns } from './filterFns';
 import { type MRT_SortingFns } from './sortingFns';
-import { type TableCellProps } from '@mui/material/TableCell';
-import { type Theme } from '@mui/material/styles';
 import {
-  type MRT_TableOptions,
   type MRT_Column,
   type MRT_ColumnDef,
   type MRT_ColumnOrderState,
@@ -21,8 +20,9 @@ import {
   type MRT_FilterOption,
   type MRT_GroupingState,
   type MRT_Header,
-  type MRT_TableInstance,
   type MRT_Row,
+  type MRT_TableInstance,
+  type MRT_TableOptions,
 } from './types';
 
 export const getColumnId = <TData extends Record<string, any>>(
@@ -94,8 +94,8 @@ export const prepareColumns = <TData extends Record<string, any>>({
           leafRows: Row<TData>[],
           childRows: Row<TData>[],
         ) =>
-          aggFns.map((fn) =>
-            aggregationFns[fn]?.(columnId, leafRows, childRows),
+          aggFns.map(
+            (fn) => aggregationFns[fn]?.(columnId, leafRows, childRows),
           );
       }
 
@@ -152,11 +152,14 @@ export const getLeadingDisplayColumnIds = <TData extends Record<string, any>>(
   props: MRT_TableOptions<TData>,
 ) =>
   [
+    props.enableRowPinning &&
+      !props.rowPinningDisplayMode?.startsWith('select') &&
+      'mrt-row-pin',
     (props.enableRowDragging || props.enableRowOrdering) && 'mrt-row-drag',
     props.positionActionsColumn === 'first' &&
       (props.enableRowActions ||
         (props.enableEditing &&
-          ['row', 'modal'].includes(props.editDisplayMode ?? ''))) &&
+          ['modal', 'row'].includes(props.editDisplayMode ?? ''))) &&
       'mrt-row-actions',
     props.positionExpandColumn === 'first' &&
       showExpandColumn(props) &&
@@ -172,7 +175,7 @@ export const getTrailingDisplayColumnIds = <TData extends Record<string, any>>(
     props.positionActionsColumn === 'last' &&
       (props.enableRowActions ||
         (props.enableEditing &&
-          ['row', 'modal'].includes(props.editDisplayMode ?? ''))) &&
+          ['modal', 'row'].includes(props.editDisplayMode ?? ''))) &&
       'mrt-row-actions',
     props.positionExpandColumn === 'last' &&
       showExpandColumn(props) &&
@@ -215,15 +218,21 @@ export const getIsFirstColumn = <TData extends Record<string, any>>(
   column: MRT_Column<TData>,
   table: MRT_TableInstance<TData>,
 ) => {
-  return table.getVisibleLeafColumns()[0].id === column.id;
+  const leftColumns = table.getLeftVisibleLeafColumns();
+  return leftColumns.length
+    ? leftColumns[0].id === column.id
+    : table.getVisibleLeafColumns()[0].id === column.id;
 };
 
 export const getIsLastColumn = <TData extends Record<string, any>>(
   column: MRT_Column<TData>,
   table: MRT_TableInstance<TData>,
 ) => {
+  const rightColumns = table.getRightVisibleLeafColumns();
   const columns = table.getVisibleLeafColumns();
-  return columns[columns.length - 1].id === column.id;
+  return rightColumns.length
+    ? rightColumns[rightColumns.length - 1].id === column.id
+    : columns[columns.length - 1].id === column.id;
 };
 
 export const getIsLastLeftPinnedColumn = <TData extends Record<string, any>>(
@@ -255,15 +264,15 @@ export const getTotalRight = <TData extends Record<string, any>>(
 export const getCanRankRows = <TData extends Record<string, any>>(
   table: MRT_TableInstance<TData>,
 ) => {
-  const { options, getState } = table;
+  const { getState, options } = table;
   const {
+    enableGlobalFilterRankedResults,
     manualExpanding,
     manualFiltering,
     manualGrouping,
     manualSorting,
-    enableGlobalFilterRankedResults,
   } = options;
-  const { globalFilterFn, expanded } = getState();
+  const { expanded, globalFilterFn } = getState();
 
   return (
     !manualExpanding &&
@@ -356,17 +365,15 @@ export const getCommonCellStyles = <TData extends Record<string, any>>({
       ? 'none'
       : `padding 150ms ease-in-out`,
     ...(!table.options.enableColumnResizing && widthStyles), //let devs pass in width styles if column resizing is disabled
-    ...(tableCellProps?.sx instanceof Function
-      ? tableCellProps.sx(theme)
-      : (tableCellProps?.sx as any)),
+    ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
     ...(table.options.enableColumnResizing && widthStyles), //don't let devs pass in width styles if column resizing is enabled
   };
 };
 
 export const MRT_DefaultColumn = {
   filterVariant: 'text',
-  minSize: 40,
   maxSize: 1000,
+  minSize: 40,
   size: 180,
 } as const;
 
@@ -385,12 +392,17 @@ export const MRT_DefaultDisplayColumn = {
   enableSorting: false,
 } as const;
 
+export const parseFromValuesOrFunc = <T, U>(
+  fn: ((arg: U) => T) | T | undefined,
+  arg: U,
+): T | undefined => (fn instanceof Function ? fn(arg) : fn);
+
 export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_');
 
 export const flexRender = _flexRender as (
   Comp: Renderable<any>,
   props: any,
-) => ReactNode | JSX.Element;
+) => JSX.Element | ReactNode;
 
 export const createRow = <TData extends Record<string, any>>(
   table: MRT_TableInstance<TData>,

package/src/filterFns.ts

@@ -1,14 +1,14 @@
 import {
+  type RankingInfo,
   rankItem,
   rankings,
-  type RankingInfo,
 } from '@tanstack/match-sorter-utils';
-import { filterFns, type Row } from '@tanstack/react-table';
+import { type Row, filterFns } from '@tanstack/react-table';
 
 const fuzzy = <TData extends Record<string, any>>(
   row: Row<TData>,
   columnId: string,
-  filterValue: string | number,
+  filterValue: number | string,
   addMeta: (item: RankingInfo) => void,
 ) => {
   const itemRank = rankItem(row.getValue(columnId), filterValue as string, {
@@ -23,10 +23,10 @@ fuzzy.autoRemove = (val: any) => !val;
 const contains = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValue: string | number,
+  filterValue: number | string,
 ) =>
   row
-    .getValue<string | number>(id)
+    .getValue<number | string>(id)
     .toString()
     .toLowerCase()
     .trim()
@@ -37,10 +37,10 @@ contains.autoRemove = (val: any) => !val;
 const startsWith = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValue: string | number,
+  filterValue: number | string,
 ) =>
   row
-    .getValue<string | number>(id)
+    .getValue<number | string>(id)
     .toString()
     .toLowerCase()
     .trim()
@@ -51,10 +51,10 @@ startsWith.autoRemove = (val: any) => !val;
 const endsWith = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValue: string | number,
+  filterValue: number | string,
 ) =>
   row
-    .getValue<string | number>(id)
+    .getValue<number | string>(id)
     .toString()
     .toLowerCase()
     .trim()
@@ -65,9 +65,9 @@ endsWith.autoRemove = (val: any) => !val;
 const equals = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValue: string | number,
+  filterValue: number | string,
 ) =>
-  row.getValue<string | number>(id).toString().toLowerCase().trim() ===
+  row.getValue<number | string>(id).toString().toLowerCase().trim() ===
   filterValue.toString().toLowerCase().trim();
 
 equals.autoRemove = (val: any) => !val;
@@ -75,9 +75,9 @@ equals.autoRemove = (val: any) => !val;
 const notEquals = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValue: string | number,
+  filterValue: number | string,
 ) =>
-  row.getValue<string | number>(id).toString().toLowerCase().trim() !==
+  row.getValue<number | string>(id).toString().toLowerCase().trim() !==
   filterValue.toString().toLowerCase().trim();
 
 notEquals.autoRemove = (val: any) => !val;
@@ -85,11 +85,11 @@ notEquals.autoRemove = (val: any) => !val;
 const greaterThan = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValue: string | number,
+  filterValue: number | string,
 ) =>
-  !isNaN(+filterValue) && !isNaN(+row.getValue<string | number>(id))
-    ? +row.getValue<string | number>(id) > +filterValue
-    : row.getValue<string | number>(id).toString().toLowerCase().trim() >
+  !isNaN(+filterValue) && !isNaN(+row.getValue<number | string>(id))
+    ? +row.getValue<number | string>(id) > +filterValue
+    : row.getValue<number | string>(id).toString().toLowerCase().trim() >
       filterValue.toString().toLowerCase().trim();
 
 greaterThan.autoRemove = (val: any) => !val;
@@ -97,7 +97,7 @@ greaterThan.autoRemove = (val: any) => !val;
 const greaterThanOrEqualTo = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValue: string | number,
+  filterValue: number | string,
 ) => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
 
 greaterThanOrEqualTo.autoRemove = (val: any) => !val;
@@ -105,11 +105,11 @@ greaterThanOrEqualTo.autoRemove = (val: any) => !val;
 const lessThan = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValue: string | number,
+  filterValue: number | string,
 ) =>
-  !isNaN(+filterValue) && !isNaN(+row.getValue<string | number>(id))
-    ? +row.getValue<string | number>(id) < +filterValue
-    : row.getValue<string | number>(id).toString().toLowerCase().trim() <
+  !isNaN(+filterValue) && !isNaN(+row.getValue<number | string>(id))
+    ? +row.getValue<number | string>(id) < +filterValue
+    : row.getValue<number | string>(id).toString().toLowerCase().trim() <
       filterValue.toString().toLowerCase().trim();
 
 lessThan.autoRemove = (val: any) => !val;
@@ -117,7 +117,7 @@ lessThan.autoRemove = (val: any) => !val;
 const lessThanOrEqualTo = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValue: string | number,
+  filterValue: number | string,
 ) => equals(row, id, filterValue) || lessThan(row, id, filterValue);
 
 lessThanOrEqualTo.autoRemove = (val: any) => !val;
@@ -125,7 +125,7 @@ lessThanOrEqualTo.autoRemove = (val: any) => !val;
 const between = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValues: [string | number, string | number],
+  filterValues: [number | string, number | string],
 ) =>
   ((['', undefined] as any[]).includes(filterValues[0]) ||
     greaterThan(row, id, filterValues[0])) &&
@@ -140,7 +140,7 @@ between.autoRemove = (val: any) => !val;
 const betweenInclusive = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValues: [string | number, string | number],
+  filterValues: [number | string, number | string],
 ) =>
   ((['', undefined] as any[]).includes(filterValues[0]) ||
     greaterThanOrEqualTo(row, id, filterValues[0])) &&
@@ -155,16 +155,16 @@ betweenInclusive.autoRemove = (val: any) => !val;
 const empty = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  _filterValue: string | number,
-) => !row.getValue<string | number>(id).toString().trim();
+  _filterValue: number | string,
+) => !row.getValue<number | string>(id).toString().trim();
 
 empty.autoRemove = (val: any) => !val;
 
 const notEmpty = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  _filterValue: string | number,
-) => !!row.getValue<string | number>(id).toString().trim();
+  _filterValue: number | string,
+) => !!row.getValue<number | string>(id).toString().trim();
 
 notEmpty.autoRemove = (val: any) => !val;