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

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -33,23 +33,23 @@ export const MRT_TableHeadCellResizeHandle = <
       }}
       onMouseDown={header.getResizeHandler()}
       onTouchStart={header.getResizeHandler()}
-      sx={(theme) => ({
-        cursor: 'col-resize',
-        mr: density === 'compact' ? '-0.75rem' : '-1rem',
-        position: 'absolute',
-        right: '4px',
-        px: '4px',
-        '&:active > hr': {
-          backgroundColor: theme.palette.info.main,
-          opacity: 1,
-        },
-      })}
       style={{
         transform:
           column.getIsResizing() && columnResizeMode === 'onEnd'
             ? `translateX(${getState().columnSizingInfo.deltaOffset ?? 0}px)`
             : undefined,
       }}
+      sx={(theme) => ({
+        '&:active > hr': {
+          backgroundColor: theme.palette.info.main,
+          opacity: 1,
+        },
+        cursor: 'col-resize',
+        mr: density === 'compact' ? '-0.75rem' : '-1rem',
+        position: 'absolute',
+        px: '4px',
+        right: '4px',
+      })}
     >
       <Divider
         className="Mui-TableHeadCell-ResizeHandle-Divider"

package/src/head/MRT_TableHeadCellSortLabel.tsx

@@ -1,8 +1,8 @@
 import Badge from '@mui/material/Badge';
+import { type TableCellProps } from '@mui/material/TableCell';
 import TableSortLabel from '@mui/material/TableSortLabel';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
-import { type TableCellProps } from '@mui/material/TableCell';
 
 interface Props<TData extends Record<string, any>> {
   header: MRT_Header<TData>;
@@ -41,25 +41,25 @@ export const MRT_TableHeadCellSortLabel = <TData extends Record<string, any>>({
         overlap="circular"
       >
         <TableSortLabel
-          aria-label={sortTooltip}
+          IconComponent={ArrowDownwardIcon}
           active={!!column.getIsSorted()}
+          aria-label={sortTooltip}
           direction={
             column.getIsSorted()
               ? (column.getIsSorted() as 'asc' | 'desc')
               : undefined
           }
+          onClick={(e) => {
+            e.stopPropagation();
+            header.column.getToggleSortingHandler()?.(e);
+          }}
           sx={{
             flex: '0 0',
-            width: '2.4ch',
             transform:
               tableCellProps?.align !== 'right'
                 ? 'translateX(-0.5ch)'
                 : undefined,
-          }}
-          IconComponent={ArrowDownwardIcon}
-          onClick={(e) => {
-            e.stopPropagation();
-            header.column.getToggleSortingHandler()?.(e);
+            width: '2.4ch',
           }}
         />
       </Badge>

package/src/head/MRT_TableHeadRow.tsx

@@ -1,7 +1,8 @@
+import { type VirtualItem } from '@tanstack/react-virtual';
 import TableRow from '@mui/material/TableRow';
 import { alpha, lighten } from '@mui/material/styles';
 import { MRT_TableHeadCell } from './MRT_TableHeadCell';
-import { type VirtualItem } from '@tanstack/react-virtual';
+import { parseFromValuesOrFunc } from '../column.utils';
 import {
   type MRT_Header,
   type MRT_HeaderGroup,
@@ -27,10 +28,10 @@ export const MRT_TableHeadRow = <TData extends Record<string, any>>({
     options: { layoutMode, muiTableHeadRowProps },
   } = table;
 
-  const tableRowProps =
-    muiTableHeadRowProps instanceof Function
-      ? muiTableHeadRowProps({ headerGroup, table })
-      : muiTableHeadRowProps;
+  const tableRowProps = parseFromValuesOrFunc(muiTableHeadRowProps, {
+    headerGroup,
+    table,
+  });
 
   return (
     <TableRow
@@ -40,9 +41,7 @@ export const MRT_TableHeadRow = <TData extends Record<string, any>>({
         boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`,
         display: layoutMode === 'grid' ? 'flex' : 'table-row',
         top: 0,
-        ...(tableRowProps?.sx instanceof Function
-          ? tableRowProps?.sx(theme)
-          : (tableRowProps?.sx as any)),
+        ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as any),
       })}
     >
       {virtualPaddingLeft ? (

package/src/hooks/useMRT_DisplayColumns.tsx

@@ -1,28 +1,29 @@
 import { type RefObject, useMemo } from 'react';
-import { showExpandColumn } from '../column.utils';
 import { MRT_TableBodyRowGrabHandle } from '../body';
+import { MRT_TableBodyRowPinButton } from '../body/MRT_TableBodyRowPinButton';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
 import { MRT_ExpandButton } from '../buttons/MRT_ExpandButton';
 import { MRT_ToggleRowActionMenuButton } from '../buttons/MRT_ToggleRowActionMenuButton';
+import { showExpandColumn } from '../column.utils';
 import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
 import {
   type MRT_ColumnDef,
   type MRT_ColumnOrderState,
-  type MRT_GroupingState,
   type MRT_DefinedTableOptions,
+  type MRT_GroupingState,
   type MRT_Row,
 } from '../types';
 
 interface Params<TData extends Record<string, any>> {
-  creatingRow: MRT_Row<TData> | null;
   columnOrder: MRT_ColumnOrderState;
+  creatingRow: MRT_Row<TData> | null;
   grouping: MRT_GroupingState;
   tableOptions: MRT_DefinedTableOptions<TData>;
 }
 
 export const useMRT_DisplayColumns = <TData extends Record<string, any>>({
-  creatingRow,
   columnOrder,
+  creatingRow,
   grouping,
   tableOptions,
 }: Params<TData>) => {
@@ -30,6 +31,18 @@ export const useMRT_DisplayColumns = <TData extends Record<string, any>>({
     () =>
       (
         [
+          (tableOptions.state?.columnOrder ?? columnOrder).includes(
+            'mrt-row-pin',
+          ) && {
+            Cell: ({ row, table }) => (
+              <MRT_TableBodyRowPinButton row={row} table={table} />
+            ),
+            header: tableOptions.localization.pin,
+            size: 60,
+            ...tableOptions.defaultDisplayColumn,
+            ...tableOptions.displayColumnDefOptions?.['mrt-row-pin'],
+            id: 'mrt-row-pin',
+          },
           (tableOptions.state?.columnOrder ?? columnOrder).includes(
             'mrt-row-drag',
           ) && {

package/src/hooks/useMRT_Effects.ts

@@ -12,10 +12,10 @@ export const useMRT_Effects = <TData extends Record<string, any> = {}>(
   const {
     globalFilter,
     isFullScreen,
-    pagination,
-    sorting,
     isLoading,
+    pagination,
     showSkeletons,
+    sorting,
   } = getState();
 
   const isMounted = useRef(false);
@@ -38,8 +38,8 @@ export const useMRT_Effects = <TData extends Record<string, any> = {}>(
         if (!previousTop.current) return;
         //restore scroll position
         window.scrollTo({
-          top: -1 * (previousTop.current as number),
           behavior: 'instant',
+          top: -1 * (previousTop.current as number),
         });
       }
     }

package/src/hooks/useMRT_TableInstance.ts

@@ -19,16 +19,14 @@ import {
   getDefaultColumnOrderIds,
   prepareColumns,
 } from '../column.utils';
-import { useMRT_DisplayColumns } from './useMRT_DisplayColumns';
-import { useMRT_Effects } from './useMRT_Effects';
 import {
   type MRT_Cell,
   type MRT_Column,
   type MRT_ColumnDef,
+  type MRT_ColumnFilterFnsState,
   type MRT_ColumnOrderState,
   type MRT_DefinedTableOptions,
   type MRT_DensityState,
-  type MRT_ColumnFilterFnsState,
   type MRT_FilterOption,
   type MRT_GroupingState,
   type MRT_Row,
@@ -36,6 +34,8 @@ import {
   type MRT_TableState,
   type MRT_Updater,
 } from '../types';
+import { useMRT_DisplayColumns } from './useMRT_DisplayColumns';
+import { useMRT_Effects } from './useMRT_Effects';
 
 export const useMRT_TableInstance: <TData extends Record<string, any>>(
   tableOptions: MRT_DefinedTableOptions<TData>,
@@ -50,6 +50,8 @@ export const useMRT_TableInstance: <TData extends Record<string, any>>(
   const tableHeadCellRefs = useRef<Record<string, HTMLTableCellElement>>({});
   const tablePaperRef = useRef<HTMLDivElement>(null);
   const topToolbarRef = useRef<HTMLDivElement>(null);
+  const tableHeadRef = useRef<HTMLTableSectionElement>(null);
+  const tableFooterRef = useRef<HTMLTableSectionElement>(null);
 
   const initialState: Partial<MRT_TableState<TData>> = useMemo(() => {
     const initState = tableOptions.initialState ?? {};
@@ -102,10 +104,10 @@ export const useMRT_TableInstance: <TData extends Record<string, any>>(
     initialState.grouping ?? [],
   );
   const [hoveredColumn, setHoveredColumn] = useState<
-    MRT_Column<TData> | { id: string } | null
+    { id: string } | MRT_Column<TData> | null
   >(initialState.hoveredColumn ?? null);
   const [hoveredRow, setHoveredRow] = useState<
-    MRT_Row<TData> | { id: string } | null
+    { id: string } | MRT_Row<TData> | null
   >(initialState.hoveredRow ?? null);
   const [isFullScreen, setIsFullScreen] = useState<boolean>(
     initialState?.isFullScreen ?? false,
@@ -205,9 +207,9 @@ export const useMRT_TableInstance: <TData extends Record<string, any>>(
     getSortedRowModel: tableOptions.enableSorting
       ? getSortedRowModel()
       : undefined,
+    getSubRows: (row) => row?.subRows,
     onColumnOrderChange: setColumnOrder,
     onGroupingChange: setGrouping,
-    getSubRows: (row) => row?.subRows,
     ...tableOptions,
     //@ts-ignore
     columns: columnDefs,
@@ -215,9 +217,9 @@ export const useMRT_TableInstance: <TData extends Record<string, any>>(
     globalFilterFn: tableOptions.filterFns?.[globalFilterFn ?? 'fuzzy'],
     initialState,
     state: {
-      creatingRow,
       columnFilterFns,
       columnOrder,
+      creatingRow,
       density,
       draggingColumn,
       draggingRow,
@@ -246,19 +248,24 @@ export const useMRT_TableInstance: <TData extends Record<string, any>>(
     searchInputRef,
     // @ts-ignore
     tableContainerRef,
+    // @ts-ignore
+    tableFooterRef,
     tableHeadCellRefs,
     // @ts-ignore
+    tableHeadRef,
+    // @ts-ignore
     tablePaperRef,
     // @ts-ignore
     topToolbarRef,
   };
 
   const setCreatingRow = (row: MRT_Updater<MRT_Row<TData> | null | true>) => {
+    let _row = row;
     if (row === true) {
-      table.setCreatingRow(createRow(table));
-    } else {
-      _setCreatingRow(row as MRT_Row<TData> | null);
+      _row = createRow(table);
     }
+    tableOptions?.onCreatingRowChange?.(_row as MRT_Row<TData> | null) ??
+      _setCreatingRow(_row as MRT_Row<TData> | null);
   };
 
   table.setCreatingRow = setCreatingRow;

package/src/hooks/useMRT_TableOptions.ts

@@ -1,10 +1,10 @@
 import { useMemo } from 'react';
 import { MRT_AggregationFns } from '../aggregationFns';
-import { MRT_FilterFns } from '../filterFns';
-import { MRT_SortingFns } from '../sortingFns';
 import { MRT_DefaultColumn, MRT_DefaultDisplayColumn } from '../column.utils';
-import { MRT_Localization_EN } from '../locales/en';
+import { MRT_FilterFns } from '../filterFns';
 import { MRT_Default_Icons } from '../icons';
+import { MRT_Localization_EN } from '../locales/en';
+import { MRT_SortingFns } from '../sortingFns';
 import { type MRT_DefinedTableOptions, type MRT_TableOptions } from '../types';
 
 export const useMRT_TableOptions: <TData extends Record<string, any>>(
@@ -22,6 +22,7 @@ export const useMRT_TableOptions: <TData extends Record<string, any>>(
   enableColumnActions = true,
   enableColumnFilters = true,
   enableColumnOrdering = false,
+  enableColumnPinning = false,
   enableColumnResizing = false,
   enableDensityToggle = true,
   enableExpandAll = true,
@@ -36,7 +37,7 @@ export const useMRT_TableOptions: <TData extends Record<string, any>>(
   enableMultiRowSelection = true,
   enableMultiSort = true,
   enablePagination = true,
-  enableColumnPinning = false,
+  enableRowPinning = false,
   enableRowSelection = false,
   enableSelectAll = true,
   enableSorting = true,
@@ -61,6 +62,7 @@ export const useMRT_TableOptions: <TData extends Record<string, any>>(
   positionToolbarAlertBanner = 'top',
   positionToolbarDropZone = 'top',
   rowNumberMode = 'static',
+  rowPinningDisplayMode = 'sticky',
   selectAllMode = 'page',
   sortingFns,
   ...rest
@@ -123,6 +125,7 @@ export const useMRT_TableOptions: <TData extends Record<string, any>>(
     enableColumnActions,
     enableColumnFilters,
     enableColumnOrdering,
+    enableColumnPinning,
     enableColumnResizing,
     enableDensityToggle,
     enableExpandAll,
@@ -137,7 +140,7 @@ export const useMRT_TableOptions: <TData extends Record<string, any>>(
     enableMultiRowSelection,
     enableMultiSort,
     enablePagination,
-    enableColumnPinning,
+    enableRowPinning,
     enableRowSelection,
     enableSelectAll,
     enableSorting,
@@ -162,6 +165,7 @@ export const useMRT_TableOptions: <TData extends Record<string, any>>(
     positionToolbarAlertBanner,
     positionToolbarDropZone,
     rowNumberMode,
+    rowPinningDisplayMode,
     selectAllMode,
     sortingFns: _sortingFns,
     ...rest,

package/src/icons.ts

@@ -13,8 +13,8 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import FilterAltIcon from '@mui/icons-material/FilterAlt';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import FilterListOffIcon from '@mui/icons-material/FilterListOff';
-import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
 import FullscreenIcon from '@mui/icons-material/Fullscreen';
+import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
 import KeyboardDoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
@@ -36,7 +36,6 @@ export interface MRT_Icons {
   DensityLargeIcon: any;
   DensityMediumIcon: any;
   DensitySmallIcon: any;
-  KeyboardDoubleArrowDownIcon: any;
   DragHandleIcon: any;
   DynamicFeedIcon: any;
   EditIcon: any;
@@ -46,6 +45,7 @@ export interface MRT_Icons {
   FilterListOffIcon: any;
   FullscreenExitIcon: any;
   FullscreenIcon: any;
+  KeyboardDoubleArrowDownIcon: any;
   MoreHorizIcon: any;
   MoreVertIcon: any;
   PushPinIcon: any;

package/src/inputs/MRT_EditCellTextField.tsx

@@ -4,9 +4,10 @@ import {
   type KeyboardEvent,
   useState,
 } from 'react';
-import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
+import TextField from '@mui/material/TextField';
 import { type TextFieldProps } from '@mui/material/TextField';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Cell, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -22,9 +23,9 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
     getState,
     options: { createDisplayMode, editDisplayMode, muiEditTextFieldProps },
     refs: { editInputRefs },
+    setCreatingRow,
     setEditingCell,
     setEditingRow,
-    setCreatingRow,
   } = table;
   const { column, row } = cell;
   const { columnDef } = column;
@@ -36,24 +37,19 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
 
   const [value, setValue] = useState(() => cell.getValue<string>());
 
-  const mTableBodyCellEditTextFieldProps =
-    muiEditTextFieldProps instanceof Function
-      ? muiEditTextFieldProps({ cell, column, row, table })
-      : muiEditTextFieldProps;
-
-  const mcTableBodyCellEditTextFieldProps =
-    columnDef.muiEditTextFieldProps instanceof Function
-      ? columnDef.muiEditTextFieldProps({
-          cell,
-          column,
-          row,
-          table,
-        })
-      : columnDef.muiEditTextFieldProps;
-
   const textFieldProps: TextFieldProps = {
-    ...mTableBodyCellEditTextFieldProps,
-    ...mcTableBodyCellEditTextFieldProps,
+    ...parseFromValuesOrFunc(muiEditTextFieldProps, {
+      cell,
+      column,
+      row,
+      table,
+    }),
+    ...parseFromValuesOrFunc(columnDef.muiEditTextFieldProps, {
+      cell,
+      column,
+      row,
+      table,
+    }),
   };
 
   const saveInputValueToRowCache = (newValue: string) => {
@@ -93,11 +89,7 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
 
   return (
     <TextField
-      disabled={
-        (columnDef.enableEditing instanceof Function
-          ? columnDef.enableEditing(row)
-          : columnDef.enableEditing) === false
-      }
+      disabled={parseFromValuesOrFunc(columnDef.enableEditing, row) === false}
       fullWidth
       inputRef={(inputRef) => {
         if (inputRef) {
@@ -108,7 +100,7 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
         }
       }}
       label={
-        ['modal', 'custom'].includes(
+        ['custom', 'modal'].includes(
           (isCreating ? createDisplayMode : editDisplayMode) as string,
         )
           ? column.columnDef.header
@@ -117,7 +109,7 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
       margin="none"
       name={column.id}
       placeholder={
-        !['modal', 'custom'].includes(
+        !['custom', 'modal'].includes(
           (isCreating ? createDisplayMode : editDisplayMode) as string,
         )
           ? columnDef.header
@@ -127,17 +119,17 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
       value={value}
       variant="standard"
       {...textFieldProps}
+      onBlur={handleBlur}
+      onChange={handleChange}
       onClick={(e) => {
         e.stopPropagation();
         textFieldProps?.onClick?.(e);
       }}
-      onBlur={handleBlur}
-      onChange={handleChange}
       onKeyDown={handleEnterKeyDown}
     >
       {textFieldProps.children ??
         columnDef?.editSelectOptions?.map(
-          (option: string | { text: string; value: string }) => {
+          (option: { text: string; value: string } | string) => {
             let value: string;
             let text: string;
             if (typeof option !== 'object') {
@@ -151,10 +143,10 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
               <MenuItem
                 key={value}
                 sx={{
-                  display: 'flex',
-                  m: 0,
                   alignItems: 'center',
+                  display: 'flex',
                   gap: '0.5rem',
+                  m: 0,
                 }}
                 value={value}
               >

package/src/inputs/MRT_FilterCheckbox.tsx

@@ -1,7 +1,7 @@
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Tooltip from '@mui/material/Tooltip';
-import { type CheckboxProps } from '@mui/material/Checkbox';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Column, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -20,26 +20,16 @@ export const MRT_FilterCheckbox = <TData extends Record<string, any>>({
   const { density } = getState();
   const { columnDef } = column;
 
-  const mTableHeadCellFilterCheckboxProps =
-    muiFilterCheckboxProps instanceof Function
-      ? muiFilterCheckboxProps({
-          column,
-          table,
-        })
-      : muiFilterCheckboxProps;
-
-  const mcTableHeadCellFilterCheckboxProps =
-    columnDef.muiFilterCheckboxProps instanceof Function
-      ? columnDef.muiFilterCheckboxProps({
-          column,
-          table,
-        })
-      : columnDef.muiFilterCheckboxProps;
-
   const checkboxProps = {
-    ...mTableHeadCellFilterCheckboxProps,
-    ...mcTableHeadCellFilterCheckboxProps,
-  } as CheckboxProps;
+    ...parseFromValuesOrFunc(muiFilterCheckboxProps, {
+      column,
+      table,
+    }),
+    ...parseFromValuesOrFunc(columnDef.muiFilterCheckboxProps, {
+      column,
+      table,
+    }),
+  };
 
   const filterLabel = localization.filterByColumn?.replace(
     '{column}',
@@ -57,16 +47,12 @@ export const MRT_FilterCheckbox = <TData extends Record<string, any>>({
         control={
           <Checkbox
             checked={column.getFilterValue() === 'true'}
-            indeterminate={column.getFilterValue() === undefined}
             color={
               column.getFilterValue() === undefined ? 'default' : 'primary'
             }
+            indeterminate={column.getFilterValue() === undefined}
             size={density === 'compact' ? 'small' : 'medium'}
             {...checkboxProps}
-            onClick={(e) => {
-              e.stopPropagation();
-              checkboxProps?.onClick?.(e);
-            }}
             onChange={(e, checked) => {
               column.setFilterValue(
                 column.getFilterValue() === undefined
@@ -77,18 +63,20 @@ export const MRT_FilterCheckbox = <TData extends Record<string, any>>({
               );
               checkboxProps?.onChange?.(e, checked);
             }}
+            onClick={(e) => {
+              e.stopPropagation();
+              checkboxProps?.onClick?.(e);
+            }}
             sx={(theme) => ({
               height: '2.5rem',
               width: '2.5rem',
-              ...(checkboxProps?.sx instanceof Function
-                ? checkboxProps.sx(theme)
-                : (checkboxProps?.sx as any)),
+              ...(parseFromValuesOrFunc(checkboxProps?.sx, theme) as any),
             })}
           />
         }
         disableTypography
         label={checkboxProps.title ?? filterLabel}
-        sx={{ color: 'text.secondary', mt: '-4px', fontWeight: 'normal' }}
+        sx={{ color: 'text.secondary', fontWeight: 'normal', mt: '-4px' }}
         title={undefined}
       />
     </Tooltip>

package/src/inputs/MRT_FilterRangeFields.tsx

@@ -12,7 +12,7 @@ export const MRT_FilterRangeFields = <TData extends Record<string, any>>({
   table,
 }: Props<TData>) => {
   return (
-    <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
+    <Box sx={{ display: 'grid', gap: '1rem', gridTemplateColumns: '1fr 1fr' }}>
       <MRT_FilterTextField header={header} rangeFilterIndex={0} table={table} />
       <MRT_FilterTextField header={header} rangeFilterIndex={1} table={table} />
     </Box>

package/src/inputs/MRT_FilterRangeSlider.tsx

@@ -1,8 +1,9 @@
-import Slider, { type SliderProps } from '@mui/material/Slider';
-import Stack from '@mui/material/Stack';
-import FormHelperText from '@mui/material/FormHelperText';
-import { type MRT_TableInstance, type MRT_Header } from '../types';
 import { useEffect, useRef, useState } from 'react';
+import FormHelperText from '@mui/material/FormHelperText';
+import Slider from '@mui/material/Slider';
+import Stack from '@mui/material/Stack';
+import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_Header, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   header: MRT_Header<TData>;
@@ -14,7 +15,7 @@ export const MRT_FilterRangeSlider = <TData extends Record<string, any>>({
   table,
 }: Props<TData>) => {
   const {
-    options: { localization, muiFilterSliderProps, enableColumnFilterModes },
+    options: { enableColumnFilterModes, localization, muiFilterSliderProps },
     refs: { filterInputRefs },
   } = table;
   const { column } = header;
@@ -25,26 +26,10 @@ export const MRT_FilterRangeSlider = <TData extends Record<string, any>>({
   const showChangeModeButton =
     enableColumnFilterModes && columnDef.enableColumnFilterModes !== false;
 
-  const mFilterSliderProps =
-    muiFilterSliderProps instanceof Function
-      ? muiFilterSliderProps({
-          column,
-          table,
-        })
-      : muiFilterSliderProps;
-
-  const mcFilterSliderProps =
-    columnDef.muiFilterSliderProps instanceof Function
-      ? columnDef.muiFilterSliderProps({
-          column,
-          table,
-        })
-      : columnDef.muiFilterSliderProps;
-
   const sliderProps = {
-    ...mFilterSliderProps,
-    ...mcFilterSliderProps,
-  } as SliderProps;
+    ...parseFromValuesOrFunc(muiFilterSliderProps, { column, table }),
+    ...parseFromValuesOrFunc(columnDef.muiFilterSliderProps, { column, table }),
+  };
 
   let [min, max] =
     sliderProps.min !== undefined && sliderProps.max !== undefined
@@ -77,8 +62,8 @@ export const MRT_FilterRangeSlider = <TData extends Record<string, any>>({
     <Stack>
       <Slider
         disableSwap
-        min={min}
         max={max}
+        min={min}
         onChange={(_event, values) => {
           setFilterValues(values as [number, number]);
         }}
@@ -114,17 +99,15 @@ export const MRT_FilterRangeSlider = <TData extends Record<string, any>>({
           mt: !showChangeModeButton ? '10px' : '6px',
           px: '4px',
           width: 'calc(100% - 8px)',
-          ...(sliderProps?.sx instanceof Function
-            ? sliderProps.sx(theme)
-            : (sliderProps?.sx as any)),
+          ...(parseFromValuesOrFunc(sliderProps?.sx, theme) as any),
         })}
       />
       {showChangeModeButton ? (
         <FormHelperText
           sx={{
-            m: '-3px -6px',
             fontSize: '0.75rem',
             lineHeight: '0.8rem',
+            m: '-3px -6px',
             whiteSpace: 'nowrap',
           }}
         >