material-react-table 1.12.1 → 1.13.0

package/dist/esm/types/MaterialReactTable.d.ts

@@ -3,7 +3,7 @@ import { MRT_FilterFns } from './filterFns';
 import { MRT_SortingFns } from './sortingFns';
 import { type MaterialReactTableProps } from './types';
 export { MRT_AggregationFns, MRT_FilterFns, MRT_SortingFns };
-export declare const MaterialReactTable: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, defaultDisplayColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilterMatchHighlighting, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => import("react/jsx-runtime").JSX.Element;
+export declare const MaterialReactTable: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, defaultDisplayColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableExpanding, enableFilterMatchHighlighting, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => import("react/jsx-runtime").JSX.Element;
 /**
  * @deprecated Use named exports instead of default export (will be removed in v2)
  * @example import { MaterialReactTable } from 'material-react-table';

package/dist/esm/types/inputs/MRT_FilterRangeSlider.d.ts

@@ -0,0 +1,7 @@
+import { type MRT_TableInstance, type MRT_Header } from '../types';
+interface Props {
+    header: MRT_Header;
+    table: MRT_TableInstance;
+}
+export declare const MRT_FilterRangeSlider: ({ header, table }: Props) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/types/types.d.ts

@@ -8,13 +8,14 @@ import { type LinearProgressProps } from '@mui/material/LinearProgress';
 import { type PaperProps } from '@mui/material/Paper';
 import { type RadioProps } from '@mui/material/Radio';
 import { type SkeletonProps } from '@mui/material/Skeleton';
-import { type TableProps } from '@mui/material/Table';
+import { type SliderProps } from '@mui/material';
 import { type TableBodyProps } from '@mui/material/TableBody';
 import { type TableCellProps } from '@mui/material/TableCell';
 import { type TableContainerProps } from '@mui/material/TableContainer';
 import { type TableFooterProps } from '@mui/material/TableFooter';
 import { type TableHeadProps } from '@mui/material/TableHead';
 import { type TablePaginationProps } from '@mui/material/TablePagination';
+import { type TableProps } from '@mui/material/Table';
 import { type TableRowProps } from '@mui/material/TableRow';
 import { type TextFieldProps } from '@mui/material/TextField';
 import { type ToolbarProps } from '@mui/material/Toolbar';
@@ -295,7 +296,7 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnD
         text: string;
         value: any;
     })[];
-    filterVariant?: 'text' | 'select' | 'multi-select' | 'range' | 'checkbox';
+    filterVariant?: 'checkbox' | 'multi-select' | 'range' | 'range-slider' | 'select' | 'text';
     /**
      * footer must be a string. If you want custom JSX to render the footer, you can also specify a `Footer` option. (Capital F)
      */
@@ -353,6 +354,10 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnD
         column: MRT_Column<TData>;
         rangeFilterIndex?: number;
     }) => TextFieldProps);
+    muiTableHeadCellFilterSliderProps?: SliderProps | ((props: {
+        table: MRT_TableInstance<TData>;
+        column: MRT_Column<TData>;
+    }) => TextFieldProps);
     muiTableHeadCellProps?: TableCellProps | ((props: {
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
@@ -463,6 +468,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> = Pr
     enableDensityToggle?: boolean;
     enableEditing?: boolean | ((row: MRT_Row<TData>) => boolean);
     enableExpandAll?: boolean;
+    enableFacetedValues?: boolean;
     enableFilterMatchHighlighting?: boolean;
     enableFullScreenToggle?: boolean;
     enableGlobalFilterModes?: boolean;
@@ -601,6 +607,10 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> = Pr
         column: MRT_Column<TData>;
         rangeFilterIndex?: number;
     }) => TextFieldProps);
+    muiTableHeadCellFilterSliderProps?: SliderProps | ((props: {
+        table: MRT_TableInstance<TData>;
+        column: MRT_Column<TData>;
+    }) => TextFieldProps);
     muiTableHeadCellProps?: TableCellProps | ((props: {
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;

package/dist/index.d.ts

@@ -9,13 +9,14 @@ import { LinearProgressProps } from '@mui/material/LinearProgress';
 import { PaperProps } from '@mui/material/Paper';
 import { RadioProps } from '@mui/material/Radio';
 import { SkeletonProps } from '@mui/material/Skeleton';
-import { TableProps } from '@mui/material/Table';
+import { SliderProps } from '@mui/material';
 import { TableBodyProps } from '@mui/material/TableBody';
 import { TableCellProps } from '@mui/material/TableCell';
 import { TableContainerProps } from '@mui/material/TableContainer';
 import { TableFooterProps } from '@mui/material/TableFooter';
 import { TableHeadProps } from '@mui/material/TableHead';
 import { TablePaginationProps } from '@mui/material/TablePagination';
+import { TableProps } from '@mui/material/Table';
 import { TableRowProps } from '@mui/material/TableRow';
 import { TextFieldProps } from '@mui/material/TextField';
 import { ToolbarProps } from '@mui/material/Toolbar';
@@ -406,7 +407,7 @@ type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnDef<TDat
         text: string;
         value: any;
     })[];
-    filterVariant?: 'text' | 'select' | 'multi-select' | 'range' | 'checkbox';
+    filterVariant?: 'checkbox' | 'multi-select' | 'range' | 'range-slider' | 'select' | 'text';
     /**
      * footer must be a string. If you want custom JSX to render the footer, you can also specify a `Footer` option. (Capital F)
      */
@@ -464,6 +465,10 @@ type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<ColumnDef<TDat
         column: MRT_Column<TData>;
         rangeFilterIndex?: number;
     }) => TextFieldProps);
+    muiTableHeadCellFilterSliderProps?: SliderProps | ((props: {
+        table: MRT_TableInstance<TData>;
+        column: MRT_Column<TData>;
+    }) => TextFieldProps);
     muiTableHeadCellProps?: TableCellProps | ((props: {
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
@@ -574,6 +579,7 @@ type MaterialReactTableProps<TData extends Record<string, any> = {}> = Prettify<
     enableDensityToggle?: boolean;
     enableEditing?: boolean | ((row: MRT_Row<TData>) => boolean);
     enableExpandAll?: boolean;
+    enableFacetedValues?: boolean;
     enableFilterMatchHighlighting?: boolean;
     enableFullScreenToggle?: boolean;
     enableGlobalFilterModes?: boolean;
@@ -712,6 +718,10 @@ type MaterialReactTableProps<TData extends Record<string, any> = {}> = Prettify<
         column: MRT_Column<TData>;
         rangeFilterIndex?: number;
     }) => TextFieldProps);
+    muiTableHeadCellFilterSliderProps?: SliderProps | ((props: {
+        table: MRT_TableInstance<TData>;
+        column: MRT_Column<TData>;
+    }) => TextFieldProps);
     muiTableHeadCellProps?: TableCellProps | ((props: {
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
@@ -865,7 +875,7 @@ declare const MRT_SortingFns: {
     basic: _tanstack_react_table.SortingFn<any>;
 };
 
-declare const MaterialReactTable: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, defaultDisplayColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableFilterMatchHighlighting, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => react_jsx_runtime.JSX.Element;
+declare const MaterialReactTable: <TData extends Record<string, any> = {}>({ aggregationFns, autoResetExpanded, columnResizeMode, defaultColumn, defaultDisplayColumn, editingMode, enableBottomToolbar, enableColumnActions, enableColumnFilters, enableColumnOrdering, enableColumnResizing, enableDensityToggle, enableExpandAll, enableExpanding, enableFilterMatchHighlighting, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableGlobalFilterRankedResults, enableGrouping, enableHiding, enableMultiRowSelection, enableMultiSort, enablePagination, enablePinning, enableRowSelection, enableSelectAll, enableSorting, enableStickyHeader, enableTableFooter, enableTableHead, enableToolbarInternalActions, enableTopToolbar, filterFns, icons, layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, positionActionsColumn, positionExpandColumn, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, rowNumberMode, selectAllMode, sortingFns, ...rest }: MaterialReactTableProps<TData>) => react_jsx_runtime.JSX.Element;
 
 interface Props$i<TData extends Record<string, any> = {}> {
     table: MRT_TableInstance<TData>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.12.1",
+  "version": "1.13.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

package/src/MaterialReactTable.tsx

@@ -24,6 +24,7 @@ export const MaterialReactTable = <TData extends Record<string, any> = {}>({
   enableColumnResizing = false,
   enableDensityToggle = true,
   enableExpandAll = true,
+  enableExpanding,
   enableFilterMatchHighlighting = true,
   enableFilters = true,
   enableFullScreenToggle = true,
@@ -122,6 +123,7 @@ export const MaterialReactTable = <TData extends Record<string, any> = {}>({
       enableColumnResizing={enableColumnResizing}
       enableDensityToggle={enableDensityToggle}
       enableExpandAll={enableExpandAll}
+      enableExpanding={enableExpanding}
       enableFilterMatchHighlighting={enableFilterMatchHighlighting}
       enableFilters={enableFilters}
       enableFullScreenToggle={enableFullScreenToggle}

package/src/column.utils.ts

@@ -200,7 +200,11 @@ export const getDefaultColumnFilterFn = <
   columnDef: MRT_ColumnDef<TData>,
 ): MRT_FilterOption => {
   if (columnDef.filterVariant === 'multi-select') return 'arrIncludesSome';
-  if (columnDef.filterVariant === 'range') return 'betweenInclusive';
+  if (
+    columnDef.filterVariant === 'range' ||
+    columnDef.filterVariant === 'range-slider'
+  )
+    return 'betweenInclusive';
   if (
     columnDef.filterVariant === 'select' ||
     columnDef.filterVariant === 'checkbox'

package/src/head/MRT_TableHeadCellFilterContainer.tsx

@@ -1,8 +1,9 @@
 import Collapse from '@mui/material/Collapse';
 import { MRT_FilterRangeFields } from '../inputs/MRT_FilterRangeFields';
 import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
-import { type MRT_Header, type MRT_TableInstance } from '../types';
 import { MRT_FilterCheckbox } from '../inputs/MRT_FilterCheckbox';
+import { MRT_FilterRangeSlider } from '../inputs/MRT_FilterRangeSlider';
+import { type MRT_Header, type MRT_TableInstance } from '../types';
 
 interface Props {
   header: MRT_Header;
@@ -19,6 +20,8 @@ export const MRT_TableHeadCellFilterContainer = ({ header, table }: Props) => {
     <Collapse in={showColumnFilters} mountOnEnter unmountOnExit>
       {columnDef.filterVariant === 'checkbox' ? (
         <MRT_FilterCheckbox column={column} table={table} />
+      ) : columnDef.filterVariant === 'range-slider' ? (
+        <MRT_FilterRangeSlider header={header} table={table} />
       ) : columnDef.filterVariant === 'range' ||
         ['between', 'betweenInclusive', 'inNumberRange'].includes(
           columnDef._filterFn,

package/src/inputs/MRT_FilterRangeFields.tsx

@@ -9,7 +9,7 @@ interface Props {
 
 export const MRT_FilterRangeFields = ({ header, table }: Props) => {
   return (
-    <Box sx={{ display: 'grid', gridTemplateColumns: '6fr 6fr', gap: '1rem' }}>
+    <Box sx={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }}>
       <MRT_FilterTextField header={header} rangeFilterIndex={0} table={table} />
       <MRT_FilterTextField header={header} rangeFilterIndex={1} table={table} />
     </Box>

package/src/inputs/MRT_FilterRangeSlider.tsx

@@ -0,0 +1,134 @@
+import { FormHelperText, Slider, SliderProps, Stack } from '@mui/material';
+import { type MRT_TableInstance, type MRT_Header } from '../types';
+import { useEffect, useRef, useState } from 'react';
+
+interface Props {
+  header: MRT_Header;
+  table: MRT_TableInstance;
+}
+
+export const MRT_FilterRangeSlider = ({ header, table }: Props) => {
+  const {
+    options: {
+      localization,
+      muiTableHeadCellFilterSliderProps,
+      enableColumnFilterModes,
+    },
+    refs: { filterInputRefs },
+  } = table;
+  const { column } = header;
+  const { columnDef } = column;
+
+  const currentFilterOption = columnDef._filterFn;
+
+  const showChangeModeButton =
+    enableColumnFilterModes && columnDef.enableColumnFilterModes !== false;
+
+  const mTableHeadCellFilterTextFieldProps =
+    muiTableHeadCellFilterSliderProps instanceof Function
+      ? muiTableHeadCellFilterSliderProps({
+          column,
+          table,
+        })
+      : muiTableHeadCellFilterSliderProps;
+
+  const mcTableHeadCellFilterTextFieldProps =
+    columnDef.muiTableHeadCellFilterSliderProps instanceof Function
+      ? columnDef.muiTableHeadCellFilterSliderProps({
+          column,
+          table,
+        })
+      : columnDef.muiTableHeadCellFilterSliderProps;
+
+  const sliderProps = {
+    ...mTableHeadCellFilterTextFieldProps,
+    ...mcTableHeadCellFilterTextFieldProps,
+  } as SliderProps;
+
+  const [min, max] =
+    sliderProps.min !== undefined && sliderProps.max !== undefined
+      ? [sliderProps.min, sliderProps.max]
+      : column.getFacetedMinMaxValues() ?? [0, 0];
+  const [filterValues, setFilterValues] = useState([min, max]);
+  const columnFilterValue = column.getFilterValue();
+
+  const isMounted = useRef(false);
+
+  useEffect(() => {
+    if (isMounted.current) {
+      if (columnFilterValue === undefined) {
+        setFilterValues([min, max]);
+      } else if (Array.isArray(columnFilterValue)) {
+        if (columnFilterValue[0] <= min && columnFilterValue[1] >= max) {
+          column.setFilterValue(undefined);
+        } else {
+          setFilterValues(columnFilterValue);
+        }
+      }
+    }
+    isMounted.current = true;
+  }, [column.getFilterValue()]);
+
+  return (
+    <Stack>
+      <Slider
+        disableSwap
+        min={min}
+        max={max}
+        onChange={(_event, value) => {
+          setFilterValues(value as [number, number]);
+        }}
+        onChangeCommitted={(_event, value) => {
+          column.setFilterValue(value as [number, number]);
+        }}
+        value={filterValues}
+        valueLabelDisplay="auto"
+        {...sliderProps}
+        slotProps={{
+          input: {
+            ref: (node) => {
+              if (node) {
+                filterInputRefs.current[`${column.id}-0`] = node;
+                // @ts-ignore
+                if (sliderProps?.slotProps?.input?.ref) {
+                  //@ts-ignore
+                  sliderProps.slotProps.input.ref = node;
+                }
+              }
+            },
+          },
+        }}
+        sx={(theme) => ({
+          m: 'auto',
+          mt: !showChangeModeButton ? '10px' : '6px',
+          px: '4px',
+          width: 'calc(100% - 8px)',
+          ...(sliderProps?.sx instanceof Function
+            ? sliderProps.sx(theme)
+            : (sliderProps?.sx as any)),
+        })}
+      />
+      {showChangeModeButton ? (
+        <FormHelperText
+          sx={{
+            m: '-3px -6px',
+            fontSize: '0.75rem',
+            lineHeight: '0.8rem',
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {localization.filterMode.replace(
+            '{filterType}',
+            // @ts-ignore
+            localization[
+              `filter${
+                currentFilterOption?.charAt(0)?.toUpperCase() +
+                currentFilterOption?.slice(1)
+              }`
+            ],
+          )}
+        </FormHelperText>
+      ) : null}
+    </Stack>
+  );
+};

package/src/inputs/MRT_FilterTextField.tsx

@@ -5,6 +5,7 @@ import {
   useEffect,
   useRef,
   useState,
+  useMemo,
 } from 'react';
 import Box from '@mui/material/Box';
 import Checkbox from '@mui/material/Checkbox';
@@ -102,6 +103,24 @@ export const MRT_FilterTextField = ({
     (allowedColumnFilterOptions === undefined ||
       !!allowedColumnFilterOptions?.length);
 
+  const facetedUniqueValues = column.getFacetedUniqueValues();
+
+  const filterSelectOptions = useMemo(
+    () =>
+      columnDef.filterSelectOptions ??
+      ((isSelectFilter || isMultiSelectFilter) && facetedUniqueValues
+        ? Array.from(facetedUniqueValues.keys()).sort((a, b) =>
+            a.localeCompare(b),
+          )
+        : undefined),
+    [
+      columnDef.filterSelectOptions,
+      facetedUniqueValues,
+      isMultiSelectFilter,
+      isSelectFilter,
+    ],
+  );
+
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [filterValue, setFilterValue] = useState<string | string[]>(() =>
     isMultiSelectFilter
@@ -298,7 +317,7 @@ export const MRT_FilterTextField = ({
                 ) : (
                   <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: '2px' }}>
                     {(selected as string[])?.map((value) => {
-                      const selectedValue = columnDef.filterSelectOptions?.find(
+                      const selectedValue = filterSelectOptions?.find(
                         (option) =>
                           option instanceof Object
                             ? option.value === value
@@ -350,7 +369,7 @@ export const MRT_FilterTextField = ({
           </MenuItem>
         )}
         {textFieldProps.children ??
-          columnDef?.filterSelectOptions?.map(
+          filterSelectOptions?.map(
             (option: string | { text: string; value: string }) => {
               let value: string;
               let text: string;
@@ -380,7 +399,9 @@ export const MRT_FilterTextField = ({
                       sx={{ mr: '0.5rem' }}
                     />
                   )}
-                  {text}
+                  {text}{' '}
+                  {!columnDef.filterSelectOptions &&
+                    `(${facetedUniqueValues.get(value)})`}
                 </MenuItem>
               );
             },

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -137,9 +137,16 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
   const { columnDef } = column ?? {};
   const currentFilterValue = column?.getFilterValue();
 
-  const allowedColumnFilterOptions =
+  let allowedColumnFilterOptions =
     columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
 
+  if (columnDef?.filterVariant === 'range-slider') {
+    allowedColumnFilterOptions = [
+      ...rangeModes,
+      ...(allowedColumnFilterOptions ?? []),
+    ].filter((option) => rangeModes.includes(option));
+  }
+
   const internalFilterOptions = useMemo(
     () =>
       mrtFilterOptions(localization).filter((filterOption) =>

package/src/table/MRT_TableRoot.tsx

@@ -2,7 +2,9 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import {
   getCoreRowModel,
   getExpandedRowModel,
+  getFacetedMinMaxValues,
   getFacetedRowModel,
+  getFacetedUniqueValues,
   getFilteredRowModel,
   getGroupedRowModel,
   getPaginationRowModel,
@@ -271,12 +273,32 @@ export const MRT_TableRoot: any = <TData extends Record<string, any> = {}>(
   const table = {
     ...useReactTable({
       getCoreRowModel: getCoreRowModel(),
-      getExpandedRowModel: getExpandedRowModel(),
-      getFacetedRowModel: getFacetedRowModel(),
-      getFilteredRowModel: getFilteredRowModel(),
-      getGroupedRowModel: getGroupedRowModel(),
-      getPaginationRowModel: getPaginationRowModel(),
-      getSortedRowModel: getSortedRowModel(),
+      getExpandedRowModel:
+        props.enableExpanding || props.enableGrouping
+          ? getExpandedRowModel()
+          : undefined,
+      getFacetedMinMaxValues: props.enableFacetedValues
+        ? getFacetedMinMaxValues()
+        : undefined,
+      getFacetedRowModel: props.enableFacetedValues
+        ? getFacetedRowModel()
+        : undefined,
+      getFacetedUniqueValues: props.enableFacetedValues
+        ? getFacetedUniqueValues()
+        : undefined,
+      getFilteredRowModel:
+        props.enableColumnFilters ||
+        props.enableGlobalFilter ||
+        props.enableFilters
+          ? getFilteredRowModel()
+          : undefined,
+      getGroupedRowModel: props.enableGrouping
+        ? getGroupedRowModel()
+        : undefined,
+      getPaginationRowModel: props.enablePagination
+        ? getPaginationRowModel()
+        : undefined,
+      getSortedRowModel: props.enableSorting ? getSortedRowModel() : undefined,
       onColumnOrderChange: setColumnOrder,
       onGroupingChange: setGrouping,
       getSubRows: (row) => row?.subRows,

package/src/types.ts

@@ -13,13 +13,14 @@ import { type LinearProgressProps } from '@mui/material/LinearProgress';
 import { type PaperProps } from '@mui/material/Paper';
 import { type RadioProps } from '@mui/material/Radio';
 import { type SkeletonProps } from '@mui/material/Skeleton';
-import { type TableProps } from '@mui/material/Table';
+import { type SliderProps } from '@mui/material';
 import { type TableBodyProps } from '@mui/material/TableBody';
 import { type TableCellProps } from '@mui/material/TableCell';
 import { type TableContainerProps } from '@mui/material/TableContainer';
 import { type TableFooterProps } from '@mui/material/TableFooter';
 import { type TableHeadProps } from '@mui/material/TableHead';
 import { type TablePaginationProps } from '@mui/material/TablePagination';
+import { type TableProps } from '@mui/material/Table';
 import { type TableRowProps } from '@mui/material/TableRow';
 import { type TextFieldProps } from '@mui/material/TextField';
 import { type ToolbarProps } from '@mui/material/Toolbar';
@@ -389,7 +390,13 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> =
     enableFilterMatchHighlighting?: boolean;
     filterFn?: MRT_FilterFn<TData>;
     filterSelectOptions?: (string | { text: string; value: any })[];
-    filterVariant?: 'text' | 'select' | 'multi-select' | 'range' | 'checkbox';
+    filterVariant?:
+      | 'checkbox'
+      | 'multi-select'
+      | 'range'
+      | 'range-slider'
+      | 'select'
+      | 'text';
     /**
      * footer must be a string. If you want custom JSX to render the footer, you can also specify a `Footer` option. (Capital F)
      */
@@ -463,6 +470,12 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> =
           column: MRT_Column<TData>;
           rangeFilterIndex?: number;
         }) => TextFieldProps);
+    muiTableHeadCellFilterSliderProps?:
+      | SliderProps
+      | ((props: {
+          table: MRT_TableInstance<TData>;
+          column: MRT_Column<TData>;
+        }) => TextFieldProps);
     muiTableHeadCellProps?:
       | TableCellProps
       | ((props: {
@@ -646,6 +659,7 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
       enableDensityToggle?: boolean;
       enableEditing?: boolean | ((row: MRT_Row<TData>) => boolean);
       enableExpandAll?: boolean;
+      enableFacetedValues?: boolean;
       enableFilterMatchHighlighting?: boolean;
       enableFullScreenToggle?: boolean;
       enableGlobalFilterModes?: boolean;
@@ -820,6 +834,12 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
             column: MRT_Column<TData>;
             rangeFilterIndex?: number;
           }) => TextFieldProps);
+      muiTableHeadCellFilterSliderProps?:
+        | SliderProps
+        | ((props: {
+            table: MRT_TableInstance<TData>;
+            column: MRT_Column<TData>;
+          }) => TextFieldProps);
       muiTableHeadCellProps?:
         | TableCellProps
         | ((props: {