material-react-table 2.0.0-alpha.4 → 2.0.0-alpha.6

package/src/body/MRT_TableBody.tsx

@@ -1,5 +1,6 @@
-import { memo, useMemo } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import {
+  type Range,
   type VirtualItem,
   type Virtualizer,
   useVirtualizer,
@@ -7,7 +8,11 @@ import {
 import TableBody from '@mui/material/TableBody';
 import Typography from '@mui/material/Typography';
 import { MRT_TableBodyRow, Memo_MRT_TableBodyRow } from './MRT_TableBodyRow';
-import { parseFromValuesOrFunc } from '../column.utils';
+import {
+  extraIndexRangeExtractor,
+  getCanRankRows,
+  parseFromValuesOrFunc,
+} from '../column.utils';
 import { rankGlobalFuzzy } from '../sortingFns';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
 
@@ -60,9 +65,9 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
   const {
     columnFilters,
     density,
+    draggingRow,
     expanded,
     globalFilter,
-    globalFilterFn,
     isFullScreen,
     pagination,
     rowPinning,
@@ -81,18 +86,11 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
   const tableFooterHeight =
     (enableStickyFooter && tableFooterRef.current?.clientHeight) || 0;
 
-  const shouldRankResults = useMemo(
+  const shouldRankRows = useMemo(
     () =>
-      !manualExpanding &&
-      !manualFiltering &&
-      !manualGrouping &&
-      !manualSorting &&
-      enableGlobalFilterRankedResults &&
-      globalFilter &&
-      globalFilterFn === 'fuzzy' &&
-      expanded !== true &&
+      getCanRankRows(table) &&
       !Object.values(sorting).some(Boolean) &&
-      !Object.values(expanded).some(Boolean),
+      globalFilter,
     [
       enableGlobalFilterRankedResults,
       expanded,
@@ -114,8 +112,8 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
   );
 
   const rows = useMemo(() => {
-    let rows = [];
-    if (!shouldRankResults) {
+    let rows: MRT_Row<TData>[] = [];
+    if (!shouldRankRows) {
       rows =
         !enableRowPinning || rowPinningDisplayMode?.includes('sticky')
           ? getRowModel().rows
@@ -139,8 +137,8 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
 
     return rows;
   }, [
-    shouldRankResults,
-    shouldRankResults ? getPrePaginationRowModel().rows : getRowModel().rows,
+    shouldRankRows,
+    shouldRankRows ? getPrePaginationRowModel().rows : getRowModel().rows,
     pagination.pageIndex,
     pagination.pageSize,
     rowPinning,
@@ -160,6 +158,12 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
             ? (element) => element?.getBoundingClientRect().height
             : undefined,
         overscan: 4,
+        rangeExtractor: useCallback(
+          (range: Range) => {
+            return extraIndexRangeExtractor(range, draggingRow?.index ?? 0);
+          },
+          [draggingRow],
+        ),
         ...rowVirtualizerProps,
       })
     : undefined;
@@ -179,7 +183,7 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
           <TableBody
             {...tableBodyProps}
             sx={(theme) => ({
-              display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
+              display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
               position: 'sticky',
               top: tableHeadHeight - 1,
               zIndex: 1,
@@ -209,7 +213,7 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
       <TableBody
         {...tableBodyProps}
         sx={(theme) => ({
-          display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
+          display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
           height: rowVirtualizer
             ? `${rowVirtualizer.getTotalSize()}px`
             : 'inherit',
@@ -221,12 +225,16 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
         {tableBodyProps?.children ??
           (!rows.length ? (
             <tr
-              style={{ display: layoutMode === 'grid' ? 'grid' : 'table-row' }}
+              style={{
+                display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
+              }}
             >
               <td
                 colSpan={table.getVisibleLeafColumns().length}
                 style={{
-                  display: layoutMode === 'grid' ? 'grid' : 'table-cell',
+                  display: layoutMode?.startsWith('grid')
+                    ? 'grid'
+                    : 'table-cell',
                 }}
               >
                 {renderEmptyRowsFallback?.({ table }) ?? (
@@ -285,7 +293,7 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
             {...tableBodyProps}
             sx={(theme) => ({
               bottom: tableFooterHeight - 1,
-              display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
+              display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
               position: 'sticky',
               zIndex: 1,
               ...(parseFromValuesOrFunc(tableBodyProps?.sx, theme) as any),

package/src/body/MRT_TableBodyCell.tsx

@@ -210,11 +210,11 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
           outlineOffset: '-1px',
           textOverflow: 'clip',
         },
-        alignItems: layoutMode === 'grid' ? 'center' : undefined,
+        alignItems: layoutMode?.startsWith('grid') ? 'center' : undefined,
         cursor:
           isEditable && editDisplayMode === 'cell' ? 'pointer' : 'inherit',
         justifyContent:
-          layoutMode === 'grid' ? tableCellProps.align : undefined,
+          layoutMode?.startsWith('grid') ? tableCellProps.align : undefined,
         overflow: 'hidden',
         p:
           density === 'compact'

package/src/body/MRT_TableBodyRow.tsx

@@ -145,7 +145,7 @@ export const MRT_TableBodyRow = <TData extends Record<string, any>>({
           },
           backgroundColor: `${lighten(
             theme.palette.background.default,
-            0.06,
+            0.05,
           )} !important`,
           bottom:
             !virtualRow && bottomPinnedIndex !== undefined && isPinned
@@ -155,7 +155,7 @@ export const MRT_TableBodyRow = <TData extends Record<string, any>>({
                 }px`
               : undefined,
           boxSizing: 'border-box',
-          display: layoutMode === 'grid' ? 'flex' : 'table-row',
+          display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
           opacity: isPinned
             ? 0.98
             : draggingRow?.id === row.id || hoveredRow?.id === row.id
@@ -185,7 +185,7 @@ export const MRT_TableBodyRow = <TData extends Record<string, any>>({
           width: '100%',
           zIndex:
             rowPinningDisplayMode?.includes('sticky') && isPinned
-              ? 1
+              ? 2
               : undefined,
           ...(sx as any),
         })}

package/src/body/MRT_TableDetailPanel.tsx

@@ -51,7 +51,7 @@ export const MRT_TableDetailPanel = <TData extends Record<string, any>>({
       className="Mui-TableBodyCell-DetailPanel"
       {...tableRowProps}
       sx={(theme) => ({
-        display: layoutMode === 'grid' ? 'flex' : 'table-row',
+        display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
         position: virtualRow ? 'absolute' : undefined,
         top: virtualRow
           ? `${parentRowRef.current?.getBoundingClientRect()?.height}px`
@@ -70,10 +70,10 @@ export const MRT_TableDetailPanel = <TData extends Record<string, any>>({
         {...tableCellProps}
         sx={(theme) => ({
           backgroundColor: virtualRow
-            ? lighten(theme.palette.background.default, 0.06)
+            ? lighten(theme.palette.background.default, 0.05)
             : undefined,
           borderBottom: !row.getIsExpanded() ? 'none' : undefined,
-          display: layoutMode === 'grid' ? 'flex' : 'table-cell',
+          display: layoutMode?.startsWith('grid') ? 'flex' : 'table-cell',
           pb: row.getIsExpanded() ? '1rem' : 0,
           pt: row.getIsExpanded() ? '1rem' : 0,
           transition: 'all 150ms ease-in-out',

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -1,6 +1,5 @@
 import { type DragEventHandler } from 'react';
-import IconButton from '@mui/material/IconButton';
-import { type IconButtonProps } from '@mui/material/IconButton';
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_TableInstance } from '../types';

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -1,6 +1,5 @@
 import { type MouseEvent, useState } from 'react';
-import IconButton from '@mui/material/IconButton';
-import { type IconButtonProps } from '@mui/material/IconButton';
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
 import { type MRT_TableInstance } from '../types';

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -1,5 +1,4 @@
-import IconButton from '@mui/material/IconButton';
-import { type IconButtonProps } from '@mui/material/IconButton';
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_TableInstance } from '../types';
 

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -1,5 +1,4 @@
-import IconButton from '@mui/material/IconButton';
-import { type IconButtonProps } from '@mui/material/IconButton';
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_TableInstance } from '../types';
 

package/src/buttons/MRT_ToggleFullScreenButton.tsx

@@ -1,6 +1,5 @@
 import { useState } from 'react';
-import IconButton from '@mui/material/IconButton';
-import { type IconButtonProps } from '@mui/material/IconButton';
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_TableInstance } from '../types';
 
@@ -36,7 +35,7 @@ export const MRT_ToggleFullScreenButton = <TData extends Record<string, any>>({
       title={rest?.title ?? localization.toggleFullScreen}
     >
       <IconButton
-        aria-label={localization.showHideFilters}
+        aria-label={localization.toggleFullScreen}
         onClick={handleToggleFullScreen}
         onMouseEnter={() => setTooltipOpened(true)}
         onMouseLeave={() => setTooltipOpened(false)}

package/src/column.utils.ts

@@ -1,10 +1,11 @@
-import { type ReactNode } from 'react';
+import { type CSSProperties, type ReactNode } from 'react';
 import {
   createRow as _createRow,
   flexRender as _flexRender,
   type Renderable,
   type Row,
 } from '@tanstack/react-table';
+import { type Range, defaultRangeExtractor } from '@tanstack/react-virtual';
 import { type TableCellProps } from '@mui/material/TableCell';
 import { alpha, lighten } from '@mui/material/styles';
 import { type Theme } from '@mui/material/styles';
@@ -295,7 +296,10 @@ export const getCommonCellStyles = <TData extends Record<string, any>>({
   tableCellProps: TableCellProps;
   theme: Theme;
 }) => {
-  const widthStyles = {
+  const {
+    options: { layoutMode },
+  } = table;
+  const widthStyles: CSSProperties = {
     minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
       header?.id ?? column.id,
     )}-size) * 1px), ${column.columnDef.minSize ?? 30}px)`,
@@ -303,6 +307,15 @@ export const getCommonCellStyles = <TData extends Record<string, any>>({
       header?.id ?? column.id,
     )}-size) * 1px)`,
   };
+
+  if (layoutMode === 'grid') {
+    widthStyles.flex = `var(--${header ? 'header' : 'col'}-${parseCSSVarId(
+      header?.id ?? column.id,
+    )}-size) 0 auto`;
+  } else if (layoutMode === 'grid-no-grow') {
+    widthStyles.flex = '0 0 auto';
+  }
+
   return {
     backgroundColor:
       column.getIsPinned() && column.columnDef.columnDefType !== 'group'
@@ -314,13 +327,7 @@ export const getCommonCellStyles = <TData extends Record<string, any>>({
       : getIsFirstRightPinnedColumn(column)
       ? `4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
       : undefined,
-    display: table.options.layoutMode === 'grid' ? 'flex' : 'table-cell',
-    flex:
-      table.options.layoutMode === 'grid'
-        ? `var(--${header ? 'header' : 'col'}-${parseCSSVarId(
-            header?.id ?? column.id,
-          )}-size) 0 auto`
-        : undefined,
+    display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
     left:
       column.getIsPinned() === 'left'
         ? `${column.getStart('left')}px`
@@ -417,3 +424,21 @@ export const createRow = <TData extends Record<string, any>>(
     -1,
     0,
   ) as MRT_Row<TData>;
+
+  export const extraIndexRangeExtractor = (
+    range: Range,
+    draggingIndex: number,
+  ) => {
+    const newIndexs = defaultRangeExtractor(range);
+    if (
+      draggingIndex >= 0 &&
+      draggingIndex < Math.max(range.startIndex - range.overscan, 0)
+    ) {
+      newIndexs.unshift(draggingIndex);
+    }
+    if (draggingIndex >= 0 && draggingIndex > range.endIndex + range.overscan) {
+      newIndexs.push(draggingIndex);
+    }
+    return newIndexs;
+  };
+  

package/src/filterFns.ts

@@ -68,7 +68,7 @@ const equals = <TData extends Record<string, any>>(
   filterValue: number | string,
 ) =>
   row.getValue<number | string>(id).toString().toLowerCase().trim() ===
-  filterValue.toString().toLowerCase().trim();
+  filterValue?.toString().toLowerCase().trim();
 
 equals.autoRemove = (val: any) => !val;
 
@@ -90,7 +90,7 @@ const greaterThan = <TData extends Record<string, any>>(
   !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();
+      filterValue?.toString().toLowerCase().trim();
 
 greaterThan.autoRemove = (val: any) => !val;
 
@@ -110,7 +110,7 @@ const lessThan = <TData extends Record<string, any>>(
   !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();
+      filterValue?.toString().toLowerCase().trim();
 
 lessThan.autoRemove = (val: any) => !val;
 

package/src/footer/MRT_TableFooter.tsx

@@ -44,7 +44,7 @@ export const MRT_TableFooter = <TData extends Record<string, any>>({
       }}
       sx={(theme) => ({
         bottom: stickFooter ? 0 : undefined,
-        display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
+        display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
         opacity: stickFooter ? 0.97 : undefined,
         outline: stickFooter
           ? theme.palette.mode === 'light'

package/src/footer/MRT_TableFooterCell.tsx

@@ -35,7 +35,7 @@ export const MRT_TableFooterCell = <TData extends Record<string, any>>({
       variant="head"
       {...tableCellProps}
       sx={(theme) => ({
-        display: layoutMode === 'grid' ? 'grid' : 'table-cell',
+        display: layoutMode?.startsWith('grid') ? 'grid' : 'table-cell',
         fontWeight: 'bold',
         justifyContent: columnDefType === 'group' ? 'center' : undefined,
         p:

package/src/footer/MRT_TableFooterRow.tsx

@@ -48,8 +48,8 @@ export const MRT_TableFooterRow = <TData extends Record<string, any>>({
     <TableRow
       {...tableRowProps}
       sx={(theme) => ({
-        backgroundColor: lighten(theme.palette.background.default, 0.04),
-        display: layoutMode === 'grid' ? 'flex' : 'table-row',
+        backgroundColor: lighten(theme.palette.background.default, 0.05),
+        display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
         width: '100%',
         ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as any),
       })}

package/src/head/MRT_TableHead.tsx

@@ -2,6 +2,7 @@ import { type VirtualItem } from '@tanstack/react-virtual';
 import TableHead from '@mui/material/TableHead';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { MRT_ToolbarAlertBanner } from '../toolbar';
 import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -19,11 +20,17 @@ export const MRT_TableHead = <TData extends Record<string, any>>({
 }: Props<TData>) => {
   const {
     getHeaderGroups,
+    getSelectedRowModel,
     getState,
-    options: { enableStickyHeader, layoutMode, muiTableHeadProps },
+    options: {
+      enableStickyHeader,
+      layoutMode,
+      muiTableHeadProps,
+      positionToolbarAlertBanner,
+    },
     refs: { tableHeadRef },
   } = table;
-  const { isFullScreen } = getState();
+  const { isFullScreen, showAlertBanner } = getState();
 
   const tableHeadProps = parseFromValuesOrFunc(muiTableHeadProps, { table });
 
@@ -40,24 +47,39 @@ export const MRT_TableHead = <TData extends Record<string, any>>({
         }
       }}
       sx={(theme) => ({
-        display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
+        display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
         opacity: 0.97,
         position: stickyHeader ? 'sticky' : 'relative',
-        top: stickyHeader && layoutMode === 'grid' ? 0 : undefined,
+        top: stickyHeader && layoutMode?.startsWith('grid') ? 0 : undefined,
         zIndex: stickyHeader ? 2 : undefined,
         ...(parseFromValuesOrFunc(tableHeadProps?.sx, theme) as any),
       })}
     >
-      {getHeaderGroups().map((headerGroup) => (
-        <MRT_TableHeadRow
-          headerGroup={headerGroup as any}
-          key={headerGroup.id}
-          table={table}
-          virtualColumns={virtualColumns}
-          virtualPaddingLeft={virtualPaddingLeft}
-          virtualPaddingRight={virtualPaddingRight}
-        />
-      ))}
+      {positionToolbarAlertBanner === 'head-overlay' &&
+      (showAlertBanner || getSelectedRowModel().rows.length > 0) ? (
+        <tr style={{ display: layoutMode?.startsWith('grid') ? 'grid' : undefined }}>
+          <th
+            colSpan={table.getVisibleLeafColumns().length}
+            style={{
+              display: layoutMode?.startsWith('grid') ? 'grid' : 'table-cell',
+              padding: 0,
+            }}
+          >
+            <MRT_ToolbarAlertBanner table={table} />
+          </th>
+        </tr>
+      ) : (
+        getHeaderGroups().map((headerGroup) => (
+          <MRT_TableHeadRow
+            headerGroup={headerGroup as any}
+            key={headerGroup.id}
+            table={table}
+            virtualColumns={virtualColumns}
+            virtualPaddingLeft={virtualPaddingLeft}
+            virtualPaddingRight={virtualPaddingRight}
+          />
+        ))
+      )}
     </TableHead>
   );
 };

package/src/head/MRT_TableHeadCell.tsx

@@ -126,7 +126,7 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
       }}
       {...tableCellProps}
       sx={(theme: Theme) => ({
-        flexDirection: layoutMode === 'grid' ? 'column' : undefined,
+        flexDirection: layoutMode?.startsWith('grid') ? 'column' : undefined,
         fontWeight: 'bold',
         overflow: 'visible',
         p:

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -122,11 +122,13 @@ export const MRT_TableHeadCellFilterLabel = <
           horizontal: 'center',
           vertical: 'top',
         }}
+        onClick={(event) => event.stopPropagation()}
         onClose={(event) => {
           //@ts-ignore
           event.stopPropagation();
           setAnchorEl(null);
         }}
+        onKeyDown={(event) => event.key === 'Enter' && setAnchorEl(null)}
         open={!!anchorEl}
         transformOrigin={{
           horizontal: 'center',

package/src/head/MRT_TableHeadRow.tsx

@@ -37,9 +37,9 @@ export const MRT_TableHeadRow = <TData extends Record<string, any>>({
     <TableRow
       {...tableRowProps}
       sx={(theme) => ({
-        backgroundColor: lighten(theme.palette.background.default, 0.04),
+        backgroundColor: lighten(theme.palette.background.default, 0.05),
         boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`,
-        display: layoutMode === 'grid' ? 'flex' : 'table-row',
+        display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
         top: 0,
         ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as any),
       })}

package/src/hooks/useMRT_TableInstance.ts

@@ -103,12 +103,12 @@ export const useMRT_TableInstance: <TData extends Record<string, any>>(
   const [grouping, setGrouping] = useState<MRT_GroupingState>(
     initialState.grouping ?? [],
   );
-  const [hoveredColumn, setHoveredColumn] = useState<
-    { id: string } | MRT_Column<TData> | null
-  >(initialState.hoveredColumn ?? null);
-  const [hoveredRow, setHoveredRow] = useState<
-    { id: string } | MRT_Row<TData> | null
-  >(initialState.hoveredRow ?? null);
+  const [hoveredColumn, setHoveredColumn] = useState<Partial<
+    MRT_Column<TData>
+  > | null>(initialState.hoveredColumn ?? null);
+  const [hoveredRow, setHoveredRow] = useState<Partial<MRT_Row<TData>> | null>(
+    initialState.hoveredRow ?? null,
+  );
   const [isFullScreen, setIsFullScreen] = useState<boolean>(
     initialState?.isFullScreen ?? false,
   );

package/src/hooks/useMRT_TableOptions.ts

@@ -93,8 +93,13 @@ export const useMRT_TableOptions: <TData extends Record<string, any>>(
     [defaultDisplayColumn],
   );
 
-  if (rest.enableRowVirtualization || rest.enableColumnVirtualization) {
-    layoutMode = 'grid';
+  if (layoutMode === 'semantic') {
+    if (rest.enableRowVirtualization || rest.enableColumnVirtualization) {
+      layoutMode = 'grid';
+    }
+    if (enableColumnResizing) {
+      layoutMode = 'grid-no-grow';
+    }
   }
 
   if (rest.enableRowVirtualization) {

package/src/icons.ts

@@ -1,7 +1,7 @@
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import CancelIcon from '@mui/icons-material/Cancel';
-import ChevronLefIcon from '@mui/icons-material/ChevronLeft';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import ClearAllIcon from '@mui/icons-material/ClearAll';
 import CloseIcon from '@mui/icons-material/Close';
@@ -35,7 +35,7 @@ export interface MRT_Icons {
   ArrowDownwardIcon: any;
   ArrowRightIcon: any;
   CancelIcon: any;
-  ChevronLefIcon: any;
+  ChevronLeftIcon: any;
   ChevronRightIcon: any;
   ClearAllIcon: any;
   CloseIcon: any;
@@ -70,7 +70,7 @@ export const MRT_Default_Icons: MRT_Icons = {
   ArrowDownwardIcon,
   ArrowRightIcon,
   CancelIcon,
-  ChevronLefIcon,
+  ChevronLeftIcon,
   ChevronRightIcon,
   ClearAllIcon,
   CloseIcon,

package/src/inputs/MRT_FilterTextField.tsx

@@ -133,7 +133,7 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
         if (isRangeFilter) {
           column.setFilterValue((old: Array<Date | null | number | string>) => {
             const newFilterValues = old ?? ['', ''];
-            newFilterValues[rangeFilterIndex as number] = newValue;
+            newFilterValues[rangeFilterIndex as number] = newValue ?? undefined;
             return newFilterValues;
           });
         } else {
@@ -146,7 +146,7 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
   );
 
   const handleChange = (newValue: any) => {
-    setFilterValue(newValue?.toString() ?? '');
+    setFilterValue(newValue ?? '');
     handleChangeDebounced(newValue);
   };
 
@@ -246,7 +246,7 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
               sx={{
                 height: '2rem',
                 transform: 'scale(0.9)',
-                width: '2rem'
+                width: '2rem',
               }}
             >
               <CloseIcon />
@@ -364,6 +364,7 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
         />
       ) : isAutocompleteFilter ? (
         <Autocomplete
+          freeSolo
           getOptionLabel={(option) => option}
           onChange={(_e, newValue) => handleChange(newValue)}
           options={dropdownOptions ?? []}