material-react-table 0.24.1 → 0.26.1

package/dist/table/MRT_TableRoot.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
-import { MaterialReactTableProps } from '../MaterialReactTable';
+import type { MaterialReactTableProps } from '..';
 export declare const MRT_TableRoot: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => JSX.Element;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.24.1",
+  "version": "0.26.1",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of TanStack React Table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
@@ -31,7 +31,7 @@
   },
   "scripts": {
     "analyze": "size-limit --why",
-    "build": "tsdx build && size-limit && rm -rf material-react-table-docs/node_modules/material-react-table/dist && cp -r dist material-react-table-docs/node_modules/material-react-table/ && cp -r src material-react-table-docs/node_modules/material-react-table/ && cp -r package.json material-react-table-docs/node_modules/material-react-table/package.json",
+    "build": "tsdx build && size-limit && rm -rf material-react-table-docs/node_modules/material-react-table/dist && cp -r dist material-react-table-docs/node_modules/material-react-table/",
     "build-storybook": "build-storybook",
     "format": "prettier -w .",
     "lint": "eslint .",
@@ -75,7 +75,7 @@
     "@types/react": "^18.0.15",
     "@types/react-dom": "^18.0.6",
     "babel-loader": "^8.2.5",
-    "eslint": "^8.19.0",
+    "eslint": "^8.20.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "husky": "^8.0.1",
     "prettier": "^2.7.1",

package/src/MaterialReactTable.tsx

@@ -49,19 +49,6 @@ import { MRT_SortingFns } from './sortingFns';
 
 type LiteralUnion<T extends U, U = string> = T | (U & Record<never, never>);
 
-export type MRT_TableOptions<TData extends Record<string, any> = {}> = Partial<
-  Omit<
-    TableOptions<TData>,
-    'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn'
-  >
-> & {
-  columns: MRT_ColumnDef<TData>[];
-  data: TData[];
-  expandRowsFn?: (dataRow: TData) => TData[];
-  initialState?: Partial<MRT_TableState<TData>>;
-  state?: Partial<MRT_TableState<TData>>;
-};
-
 export interface MRT_RowModel<TData extends Record<string, any> = {}> {
   flatRows: MRT_Row<TData>[];
   rows: MRT_Row<TData>[];
@@ -218,7 +205,7 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
    *
    * @example accessorKey: 'username'
    */
-  accessorKey?: LiteralUnion<string & keyof TData>;
+  accessorKey?: string & keyof TData;
   /**
    * Specify what type of column this is. Either `data`, `display`, or `group`. Defaults to `data`.
    * Leave this blank if you are just creating a normal data column.
@@ -411,6 +398,13 @@ export type MRT_FilterFn<TData extends Record<string, any> = {}> =
   | FilterFn<TData>
   | MRT_FilterOption;
 
+export type MRT_DisplayColumnIds =
+  | 'mrt-row-drag'
+  | 'mrt-row-actions'
+  | 'mrt-row-expand'
+  | 'mrt-row-select'
+  | 'mrt-row-numbers';
+
 /**
  * `columns` and `data` props are the only required props, but there are over 150 other optional props.
  *
@@ -421,7 +415,15 @@ export type MRT_FilterFn<TData extends Record<string, any> = {}> =
  * @link https://www.material-react-table.com/docs/api/props
  */
 export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
-  MRT_TableOptions<TData> & {
+  Omit<
+    Partial<TableOptions<TData>>,
+    'columns' | 'data' | 'initialState' | 'state' | 'expandRowsFn'
+  > & {
+    displayColumnDefOptions?: Partial<{
+      [key in MRT_DisplayColumnIds]: Partial<MRT_ColumnDef>;
+    }>;
+    columns: MRT_ColumnDef<TData>[];
+    data: TData[];
     editingMode?: 'table' | 'row' | 'cell';
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
@@ -449,7 +451,9 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     enableToolbarTop?: boolean;
     enabledColumnFilterOptions?: (MRT_FilterOption | string)[] | null;
     enabledGlobalFilterOptions?: (MRT_FilterOption | string)[] | null;
+    expandRowsFn?: (dataRow: TData) => TData[];
     icons?: Partial<MRT_Icons>;
+    initialState?: Partial<MRT_TableState<TData>>;
     localization?: Partial<MRT_Localization>;
     muiExpandAllButtonProps?:
       | IconButtonProps
@@ -522,6 +526,9 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
           table: MRT_TableInstance<TData>;
           cell: MRT_Cell<TData>;
         }) => SkeletonProps);
+    muiTableBodyProps?:
+      | TableBodyProps
+      | (({ table }: { table: MRT_TableInstance<TData> }) => TableBodyProps);
     muiTableBodyRowDragHandleProps?:
       | IconButtonProps
       | (({
@@ -531,9 +538,6 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
           table: MRT_TableInstance<TData>;
           row: MRT_Row<TData>;
         }) => IconButtonProps);
-    muiTableBodyProps?:
-      | TableBodyProps
-      | (({ table }: { table: MRT_TableInstance<TData> }) => TableBodyProps);
     muiTableBodyRowProps?:
       | TableRowProps
       | (({
@@ -685,6 +689,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     onCurrentGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
     onCurrentHoveredColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
     onCurrentHoveredRowChange?: OnChangeFn<MRT_Row<TData> | null>;
+    onDensityChange?: OnChangeFn<boolean>;
     onEditRowSubmit?: ({
       row,
       table,
@@ -692,7 +697,6 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
       row: MRT_Row<TData>;
       table: MRT_TableInstance<TData>;
     }) => Promise<void> | void;
-    onDensityChange?: OnChangeFn<boolean>;
     onIsFullScreenChange?: OnChangeFn<boolean>;
     onRowDrop?: ({
       event,
@@ -738,11 +742,6 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     }: {
       table: MRT_TableInstance<TData>;
     }) => ReactNode;
-    renderToolbarTopCustomActions?: ({
-      table,
-    }: {
-      table: MRT_TableInstance<TData>;
-    }) => ReactNode;
     renderToolbarInternalActions?: ({
       table,
       MRT_ToggleGlobalFilterButton,
@@ -768,9 +767,15 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
         IconButtonProps & { table: MRT_TableInstance<TData> }
       >;
     }) => ReactNode;
+    renderToolbarTopCustomActions?: ({
+      table,
+    }: {
+      table: MRT_TableInstance<TData>;
+    }) => ReactNode;
     rowCount?: number;
     rowNumberMode?: 'original' | 'static';
     selectAllMode?: 'all' | 'page';
+    state?: Partial<MRT_TableState<TData>>;
     tableId?: string;
     virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement>>;
   };

package/src/body/MRT_TableBodyCell.tsx

@@ -129,7 +129,9 @@ export const MRT_TableBodyCell: FC<Props> = ({
 
   const handleDragEnter = (_e: DragEvent) => {
     if (enableColumnOrdering && currentDraggingColumn) {
-      setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
+      setCurrentHoveredColumn(
+        columnDef.enableColumnOrdering !== false ? column : null,
+      );
     }
   };
 
@@ -222,7 +224,9 @@ export const MRT_TableBodyCell: FC<Props> = ({
                 : `${darken(theme.palette.background.default, 0.07)} !important`
               : undefined,
         },
-        ...(tableCellProps?.sx as any),
+        ...(tableCellProps?.sx instanceof Function
+          ? tableCellProps.sx(theme)
+          : (tableCellProps?.sx as any)),
         ...draggingBorders,
         maxWidth: `min(${column.getSize()}px, fit-content)`,
         minWidth: `max(${column.getSize()}px, ${columnDef.minSize ?? 30}px)`,

package/src/body/MRT_TableBodyRow.tsx

@@ -70,7 +70,9 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, table }) => {
                   : `${darken(theme.palette.background.default, 0.05)}`
                 : undefined,
           },
-          ...(tableRowProps?.sx as any),
+          ...(tableRowProps?.sx instanceof Function
+            ? tableRowProps.sx(theme)
+            : (tableRowProps?.sx as any)),
           ...draggingBorders,
         })}
       >

package/src/body/MRT_TableDetailPanel.tsx

@@ -32,14 +32,16 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row, table }) => {
       <TableCell
         colSpan={getVisibleLeafColumns().length}
         {...tableCellProps}
-        sx={{
+        sx={(theme) => ({
           borderBottom: !row.getIsExpanded() ? 'none' : undefined,
           pb: row.getIsExpanded() ? '1rem' : 0,
           pt: row.getIsExpanded() ? '1rem' : 0,
           transition: 'all 0.2s ease-in-out',
           width: `${table.getTotalSize()}px`,
-          ...tableCellProps?.sx,
-        }}
+          ...(tableCellProps?.sx instanceof Function
+            ? tableCellProps.sx(theme)
+            : (tableCellProps?.sx as any)),
+        })}
       >
         {renderDetailPanel && (
           <Collapse in={row.getIsExpanded()}>

package/src/buttons/MRT_CopyButton.tsx

@@ -55,7 +55,7 @@ export const MRT_CopyButton: FC<Props> = ({ cell, children, table }) => {
         type="button"
         variant="text"
         {...buttonProps}
-        sx={{
+        sx={(theme) => ({
           backgroundColor: 'transparent',
           border: 'none',
           color: 'inherit',
@@ -67,8 +67,10 @@ export const MRT_CopyButton: FC<Props> = ({ cell, children, table }) => {
           minWidth: 'unset',
           textAlign: 'inherit',
           textTransform: 'inherit',
-          ...buttonProps?.sx,
-        }}
+          ...(buttonProps?.sx instanceof Function
+            ? buttonProps.sx(theme)
+            : (buttonProps?.sx as any)),
+        })}
       >
         {children}
       </Button>

package/src/buttons/MRT_ExpandButton.tsx

@@ -41,11 +41,13 @@ export const MRT_ExpandButton: FC<Props> = ({ row, table }) => {
           disabled={!row.getCanExpand() && !renderDetailPanel}
           onClick={handleToggleExpand}
           {...iconButtonProps}
-          sx={{
+          sx={(theme) => ({
             height: density === 'compact' ? '1.75rem' : '2.25rem',
             width: density === 'compact' ? '1.75rem' : '2.25rem',
-            ...iconButtonProps?.sx,
-          }}
+            ...(iconButtonProps?.sx instanceof Function
+              ? iconButtonProps.sx(theme)
+              : (iconButtonProps?.sx as any)),
+          })}
         >
           <ExpandMoreIcon
             style={{

package/src/{utils.ts → column.utils.ts}

@@ -4,6 +4,7 @@ import {
   MRT_Column,
   MRT_ColumnDef,
   MRT_DefinedColumnDef,
+  MRT_DisplayColumnIds,
   MRT_FilterOption,
 } from '.';
 import { MRT_FilterFns } from './filtersFns';
@@ -92,7 +93,7 @@ export const getLeadingDisplayColumnIds = <
       'mrt-row-expand',
     props.enableRowSelection && 'mrt-row-select',
     props.enableRowNumbers && 'mrt-row-numbers',
-  ].filter(Boolean) as string[];
+  ].filter(Boolean) as MRT_DisplayColumnIds[];
 
 export const getTrailingDisplayColumnIds = <
   TData extends Record<string, any> = {},

package/src/filtersFns.ts

@@ -1,7 +1,7 @@
 import { rankItem, rankings, RankingInfo } from '@tanstack/match-sorter-utils';
 import { filterFns, Row } from '@tanstack/react-table';
 
-export const fuzzy = <TData extends Record<string, any> = {}>(
+const fuzzy = <TData extends Record<string, any> = {}>(
   row: Row<TData>,
   columnId: string,
   filterValue: string | number,
@@ -16,7 +16,7 @@ export const fuzzy = <TData extends Record<string, any> = {}>(
 
 fuzzy.autoRemove = (val: any) => !val;
 
-export const contains = <TData extends Record<string, any> = {}>(
+const contains = <TData extends Record<string, any> = {}>(
   row: Row<TData>,
   id: string,
   filterValue: string | number,
@@ -30,7 +30,7 @@ export const contains = <TData extends Record<string, any> = {}>(
 
 contains.autoRemove = (val: any) => !val;
 
-export const startsWith = <TData extends Record<string, any> = {}>(
+const startsWith = <TData extends Record<string, any> = {}>(
   row: Row<TData>,
   id: string,
   filterValue: string | number,
@@ -44,7 +44,7 @@ export const startsWith = <TData extends Record<string, any> = {}>(
 
 startsWith.autoRemove = (val: any) => !val;
 
-export const endsWith = <TData extends Record<string, any> = {}>(
+const endsWith = <TData extends Record<string, any> = {}>(
   row: Row<TData>,
   id: string,
   filterValue: string | number,
@@ -58,7 +58,7 @@ export const endsWith = <TData extends Record<string, any> = {}>(
 
 endsWith.autoRemove = (val: any) => !val;
 
-export const equals = <TData extends Record<string, any> = {}>(
+const equals = <TData extends Record<string, any> = {}>(
   row: Row<TData>,
   id: string,
   filterValue: string | number,
@@ -68,7 +68,7 @@ export const equals = <TData extends Record<string, any> = {}>(
 
 equals.autoRemove = (val: any) => !val;
 
-export const notEquals = <TData extends Record<string, any> = {}>(
+const notEquals = <TData extends Record<string, any> = {}>(
   row: Row<TData>,
   id: string,
   filterValue: string | number,
@@ -78,31 +78,47 @@ export const notEquals = <TData extends Record<string, any> = {}>(
 
 notEquals.autoRemove = (val: any) => !val;
 
-export const greaterThan = <TData extends Record<string, any> = {}>(
+const greaterThan = <TData extends Record<string, any> = {}>(
   row: Row<TData>,
   id: string,
   filterValue: string | number,
 ) =>
   !isNaN(+filterValue) && !isNaN(+row.getValue<string | number>(id))
-    ? +row.getValue<string | number>(id) >= +filterValue
+    ? +row.getValue<string | number>(id) > +filterValue
     : row.getValue<string | number>(id).toString().toLowerCase().trim() >
       filterValue.toString().toLowerCase().trim();
 
 greaterThan.autoRemove = (val: any) => !val;
 
-export const lessThan = <TData extends Record<string, any> = {}>(
+const greaterThanOrEqualTo = <TData extends Record<string, any> = {}>(
+  row: Row<TData>,
+  id: string,
+  filterValue: string | number,
+) => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
+
+greaterThanOrEqualTo.autoRemove = (val: any) => !val;
+
+const lessThan = <TData extends Record<string, any> = {}>(
   row: Row<TData>,
   id: string,
   filterValue: string | number,
 ) =>
   !isNaN(+filterValue) && !isNaN(+row.getValue<string | number>(id))
-    ? +row.getValue<string | number>(id) <= +filterValue
+    ? +row.getValue<string | number>(id) < +filterValue
     : row.getValue<string | number>(id).toString().toLowerCase().trim() <
       filterValue.toString().toLowerCase().trim();
 
 lessThan.autoRemove = (val: any) => !val;
 
-export const between = <TData extends Record<string, any> = {}>(
+const lessThanOrEqualTo = <TData extends Record<string, any> = {}>(
+  row: Row<TData>,
+  id: string,
+  filterValue: string | number,
+) => equals(row, id, filterValue) || lessThan(row, id, filterValue);
+
+lessThanOrEqualTo.autoRemove = (val: any) => !val;
+
+const between = <TData extends Record<string, any> = {}>(
   row: Row<TData>,
   id: string,
   filterValues: [string | number, string | number],
@@ -117,7 +133,22 @@ export const between = <TData extends Record<string, any> = {}>(
 
 between.autoRemove = (val: any) => !val;
 
-export const empty = <TData extends Record<string, any> = {}>(
+const betweenInclusive = <TData extends Record<string, any> = {}>(
+  row: Row<TData>,
+  id: string,
+  filterValues: [string | number, string | number],
+) =>
+  ((['', 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]) ||
+    lessThanOrEqualTo(row, id, filterValues[1]));
+
+betweenInclusive.autoRemove = (val: any) => !val;
+
+const empty = <TData extends Record<string, any> = {}>(
   row: Row<TData>,
   id: string,
   _filterValue: string | number,
@@ -125,7 +156,7 @@ export const empty = <TData extends Record<string, any> = {}>(
 
 empty.autoRemove = (val: any) => !val;
 
-export const notEmpty = <TData extends Record<string, any> = {}>(
+const notEmpty = <TData extends Record<string, any> = {}>(
   row: Row<TData>,
   id: string,
   _filterValue: string | number,
@@ -136,13 +167,16 @@ notEmpty.autoRemove = (val: any) => !val;
 export const MRT_FilterFns = {
   ...filterFns,
   between,
+  betweenInclusive,
   contains,
   empty,
   endsWith,
   equals,
   fuzzy,
   greaterThan,
+  greaterThanOrEqualTo,
   lessThan,
+  lessThanOrEqualTo,
   notEmpty,
   notEquals,
   startsWith,

package/src/footer/MRT_TableFooterCell.tsx

@@ -56,7 +56,9 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, table }) => {
         transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
         width: column.getSize(),
         verticalAlign: 'text-top',
-        ...(tableCellProps?.sx as any),
+        ...(tableCellProps?.sx instanceof Function
+          ? tableCellProps.sx(theme)
+          : (tableCellProps?.sx as any)),
       })}
     >
       <>

package/src/head/MRT_TableHeadCell.tsx

@@ -48,13 +48,6 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
     ...mcTableHeadCellProps,
   };
 
-  const headerElement = ((columnDef?.Header instanceof Function
-    ? columnDef?.Header?.({
-        header,
-        table,
-      })
-    : columnDef?.Header) ?? columnDef.header) as ReactNode;
-
   const getIsLastLeftPinnedColumn = () => {
     return (
       column.getIsPinned() === 'left' &&
@@ -74,12 +67,12 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
 
   const handleDragEnter = (_e: DragEvent) => {
     if (enableColumnOrdering && currentDraggingColumn) {
-      setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
+      setCurrentHoveredColumn(
+        columnDef.enableColumnOrdering !== false ? column : null,
+      );
     }
   };
 
-  const tableHeadCellRef = React.useRef<HTMLTableCellElement>(null);
-
   const draggingBorder =
     currentDraggingColumn?.id === column.id
       ? `1px dashed ${theme.palette.divider}`
@@ -95,6 +88,15 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
       }
     : undefined;
 
+  const headerElement = ((columnDef?.Header instanceof Function
+    ? columnDef?.Header?.({
+        header,
+        table,
+      })
+    : columnDef?.Header) ?? columnDef.header) as ReactNode;
+
+  const tableHeadCellRef = React.useRef<HTMLTableCellElement>(null);
+
   return (
     <TableCell
       align={columnDefType === 'group' ? 'center' : 'left'}
@@ -153,23 +155,23 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
           column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
         transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`,
         userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
-        verticalAlign: 'text-top',
+        verticalAlign: 'top',
         zIndex:
           column.getIsResizing() || currentDraggingColumn?.id === column.id
             ? 3
             : column.getIsPinned() && columnDefType !== 'group'
             ? 2
             : 1,
-        ...(tableCellProps?.sx as any),
+        ...(tableCellProps?.sx instanceof Function
+          ? tableCellProps.sx(theme)
+          : (tableCellProps?.sx as any)),
         ...draggingBorders,
         maxWidth: `min(${column.getSize()}px, fit-content)`,
         minWidth: `max(${column.getSize()}px, ${columnDef.minSize ?? 30}px)`,
         width: header.getSize(),
       })}
     >
-      {header.isPlaceholder ? null : columnDefType === 'display' ? (
-        headerElement
-      ) : (
+      {header.isPlaceholder ? null : (
         <Box
           sx={{
             alignItems: 'flex-start',
@@ -195,16 +197,16 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
             }}
           >
             {headerElement}
-            {columnDefType === 'data' && column.getCanSort() && (
+            {column.getCanSort() && (
               <MRT_TableHeadCellSortLabel header={header} table={table} />
             )}
-            {columnDefType === 'data' && column.getCanFilter() && (
+            {column.getCanFilter() && (
               <MRT_TableHeadCellFilterLabel header={header} table={table} />
             )}
           </Box>
-          <Box sx={{ whiteSpace: 'nowrap' }}>
-            {columnDefType === 'data' &&
-              ((enableColumnDragging &&
+          {columnDefType !== 'group' && (
+            <Box sx={{ whiteSpace: 'nowrap' }}>
+              {((enableColumnDragging &&
                 columnDef.enableColumnDragging !== false) ||
                 (enableColumnOrdering &&
                   columnDef.enableColumnOrdering !== false) ||
@@ -215,21 +217,21 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
                   tableHeadCellRef={tableHeadCellRef}
                 />
               )}
-            {(enableColumnActions || columnDef.enableColumnActions) &&
-              columnDef.enableColumnActions !== false &&
-              columnDefType !== 'group' && (
-                <MRT_TableHeadCellColumnActionsButton
-                  header={header}
-                  table={table}
-                />
-              )}
-          </Box>
+              {(enableColumnActions || columnDef.enableColumnActions) &&
+                columnDef.enableColumnActions !== false && (
+                  <MRT_TableHeadCellColumnActionsButton
+                    header={header}
+                    table={table}
+                  />
+                )}
+            </Box>
+          )}
           {column.getCanResize() && (
             <MRT_TableHeadCellResizeHandle header={header} table={table} />
           )}
         </Box>
       )}
-      {columnDefType === 'data' && column.getCanFilter() && (
+      {column.getCanFilter() && (
         <MRT_TableHeadCellFilterContainer header={header} table={table} />
       )}
     </TableCell>

package/src/head/MRT_TableHeadCellColumnActionsButton.tsx

@@ -62,7 +62,7 @@ export const MRT_TableHeadCellColumnActionsButton: FC<Props> = ({
           onClick={handleClick}
           size="small"
           {...iconButtonProps}
-          sx={{
+          sx={(theme) => ({
             height: '2rem',
             mt: '-0.2rem',
             opacity: 0.5,
@@ -71,8 +71,10 @@ export const MRT_TableHeadCellColumnActionsButton: FC<Props> = ({
             '&:hover': {
               opacity: 1,
             },
-            ...iconButtonProps.sx,
-          }}
+            ...(iconButtonProps?.sx instanceof Function
+              ? iconButtonProps.sx(theme)
+              : (iconButtonProps?.sx as any)),
+          })}
         >
           <MoreVertIcon />
         </IconButton>

package/src/head/MRT_TableHeadCellGrabHandle.tsx

@@ -1,6 +1,6 @@
 import React, { DragEvent, FC, RefObject } from 'react';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
-import { reorderColumn } from '../utils';
+import { reorderColumn } from '../column.utils';
 import type { MRT_Column, MRT_TableInstance } from '..';
 
 interface Props {

package/src/inputs/MRT_FilterTextField.tsx

@@ -73,14 +73,18 @@ export const MRT_FilterTextField: FC<Props> = ({
 
   const handleChangeDebounced = useCallback(
     debounce((event: ChangeEvent<HTMLInputElement>) => {
+      let value =
+        textFieldProps.type === 'date'
+          ? new Date(event.target.value)
+          : event.target.value;
       if (inputIndex !== undefined) {
-        column.setFilterValue((old: [string, string]) => {
+        column.setFilterValue((old: [string, string | Date]) => {
           const newFilterValues = old ?? ['', ''];
-          newFilterValues[inputIndex] = event.target.value;
+          newFilterValues[inputIndex] = value;
           return newFilterValues;
         });
       } else {
-        column.setFilterValue(event.target.value ?? undefined);
+        column.setFilterValue(value ?? undefined);
       }
     }, 200),
     [],
@@ -255,7 +259,7 @@ export const MRT_FilterTextField: FC<Props> = ({
           ),
         }}
         {...textFieldProps}
-        sx={{
+        sx={(theme) => ({
           m: '-0.25rem',
           p: 0,
           minWidth: !filterChipLabel ? '8rem' : 'auto',
@@ -263,8 +267,10 @@ export const MRT_FilterTextField: FC<Props> = ({
           '&	.MuiSelect-icon': {
             mr: '1.5rem',
           },
-          ...textFieldProps?.sx,
-        }}
+          ...(textFieldProps?.sx instanceof Function
+            ? textFieldProps.sx(theme)
+            : (textFieldProps?.sx as any)),
+        })}
       >
         {isSelectFilter && (
           <MenuItem divider disabled={!filterValue} value="">