material-react-table 1.12.1 → 1.13.0

package/dist/cjs/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/cjs/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/cjs/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/esm/material-react-table.esm.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMemo, useState, useRef, useCallback, useEffect, Fragment as Fragment$1, memo, useLayoutEffect } from 'react';
-import { aggregationFns, filterFns, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
+import { aggregationFns, filterFns, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
 import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
 import { alpha, lighten, useTheme, darken } from '@mui/material/styles';
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
@@ -65,6 +65,7 @@ import Table from '@mui/material/Table';
 import TableHead from '@mui/material/TableHead';
 import TableRow from '@mui/material/TableRow';
 import TableCell from '@mui/material/TableCell';
+import { Stack, Slider, FormHelperText } from '@mui/material';
 import Badge from '@mui/material/Badge';
 import TableSortLabel from '@mui/material/TableSortLabel';
 import TableBody from '@mui/material/TableBody';
@@ -74,7 +75,7 @@ import TableFooter from '@mui/material/TableFooter';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
-import Stack from '@mui/material/Stack';
+import Stack$1 from '@mui/material/Stack';
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -314,7 +315,8 @@ const getDefaultColumnOrderIds = (props) => {
 const getDefaultColumnFilterFn = (columnDef) => {
     if (columnDef.filterVariant === 'multi-select')
         return 'arrIncludesSome';
-    if (columnDef.filterVariant === 'range')
+    if (columnDef.filterVariant === 'range' ||
+        columnDef.filterVariant === 'range-slider')
         return 'betweenInclusive';
     if (columnDef.filterVariant === 'select' ||
         columnDef.filterVariant === 'checkbox')
@@ -665,7 +667,13 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
     const { column } = header !== null && header !== void 0 ? header : {};
     const { columnDef } = column !== null && column !== void 0 ? column : {};
     const currentFilterValue = column === null || column === void 0 ? void 0 : column.getFilterValue();
-    const allowedColumnFilterOptions = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _a !== void 0 ? _a : columnFilterModeOptions;
+    let allowedColumnFilterOptions = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _a !== void 0 ? _a : columnFilterModeOptions;
+    if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'range-slider') {
+        allowedColumnFilterOptions = [
+            ...rangeModes,
+            ...(allowedColumnFilterOptions !== null && allowedColumnFilterOptions !== void 0 ? allowedColumnFilterOptions : []),
+        ].filter((option) => rangeModes.includes(option));
+    }
     const internalFilterOptions = useMemo(() => mrtFilterOptions(localization).filter((filterOption) => columnDef
         ? allowedColumnFilterOptions === undefined ||
             (allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.includes(filterOption.option))
@@ -1459,7 +1467,7 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
 };
 
 const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const { options: { enableColumnFilterModes, columnFilterModeOptions, icons: { FilterListIcon, CloseIcon }, localization, manualFiltering, muiTableHeadCellFilterTextFieldProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
     const { column } = header;
     const { columnDef } = column;
@@ -1502,6 +1510,18 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
         !rangeFilterIndex &&
         (allowedColumnFilterOptions === undefined ||
             !!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
+    const facetedUniqueValues = column.getFacetedUniqueValues();
+    const filterSelectOptions = useMemo(() => {
+        var _a;
+        return (_a = columnDef.filterSelectOptions) !== null && _a !== void 0 ? _a : ((isSelectFilter || isMultiSelectFilter) && facetedUniqueValues
+            ? Array.from(facetedUniqueValues.keys()).sort((a, b) => a.localeCompare(b))
+            : undefined);
+    }, [
+        columnDef.filterSelectOptions,
+        facetedUniqueValues,
+        isMultiSelectFilter,
+        isSelectFilter,
+    ]);
     const [anchorEl, setAnchorEl] = useState(null);
     const [filterValue, setFilterValue] = useState(() => {
         var _a, _b;
@@ -1609,8 +1629,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                     multiple: isMultiSelectFilter,
                     renderValue: isMultiSelectFilter
                         ? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder })) : (jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' }, children: selected === null || selected === void 0 ? void 0 : selected.map((value) => {
-                                var _a;
-                                const selectedValue = (_a = columnDef.filterSelectOptions) === null || _a === void 0 ? void 0 : _a.find((option) => option instanceof Object
+                                const selectedValue = filterSelectOptions === null || filterSelectOptions === void 0 ? void 0 : filterSelectOptions.find((option) => option instanceof Object
                                     ? option.value === value
                                     : option === value);
                                 return (jsx(Chip, { label: selectedValue instanceof Object
@@ -1632,7 +1651,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                         mr: '1.5rem',
                     } }, ((textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx) instanceof Function
                     ? textFieldProps.sx(theme)
-                    : textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx))), children: [(isSelectFilter || isMultiSelectFilter) && (jsx(MenuItem, { divider: true, disabled: true, hidden: true, value: "", children: jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder }) })), (_k = textFieldProps.children) !== null && _k !== void 0 ? _k : (_l = columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterSelectOptions) === null || _l === void 0 ? void 0 : _l.map((option) => {
+                    : textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx))), children: [(isSelectFilter || isMultiSelectFilter) && (jsx(MenuItem, { divider: true, disabled: true, hidden: true, value: "", children: jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder }) })), (_k = textFieldProps.children) !== null && _k !== void 0 ? _k : filterSelectOptions === null || filterSelectOptions === void 0 ? void 0 : filterSelectOptions.map((option) => {
                         var _a;
                         let value;
                         let text;
@@ -1649,12 +1668,13 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                                 m: 0,
                                 alignItems: 'center',
                                 gap: '0.5rem',
-                            }, value: value, children: [isMultiSelectFilter && (jsx(Checkbox, { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })), text] }, value));
+                            }, value: value, children: [isMultiSelectFilter && (jsx(Checkbox, { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })), text, ' ', !columnDef.filterSelectOptions &&
+                                    `(${facetedUniqueValues.get(value)})`] }, value));
                     })] })), jsx(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table, setFilterValue: setFilterValue })] }));
 };
 
 const MRT_FilterRangeFields = ({ header, table }) => {
-    return (jsxs(Box, { sx: { display: 'grid', gridTemplateColumns: '6fr 6fr', gap: '1rem' }, children: [jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: 0, table: table }), jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: 1, table: table })] }));
+    return (jsxs(Box, { sx: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }, children: [jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: 0, table: table }), jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: 1, table: table })] }));
 };
 
 const MRT_FilterCheckbox = ({ column, table }) => {
@@ -1693,12 +1713,85 @@ const MRT_FilterCheckbox = ({ column, table }) => {
                     : checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx))) })), disableTypography: true, label: (_c = checkboxProps.title) !== null && _c !== void 0 ? _c : filterLabel, sx: { color: 'text.secondary', mt: '-4px', fontWeight: 'normal' }, title: undefined }) }));
 };
 
+const MRT_FilterRangeSlider = ({ header, table }) => {
+    var _a, _b;
+    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 = Object.assign(Object.assign({}, mTableHeadCellFilterTextFieldProps), mcTableHeadCellFilterTextFieldProps);
+    const [min, max] = sliderProps.min !== undefined && sliderProps.max !== undefined
+        ? [sliderProps.min, sliderProps.max]
+        : (_a = column.getFacetedMinMaxValues()) !== null && _a !== void 0 ? _a : [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 (jsxs(Stack, { children: [jsx(Slider, Object.assign({ disableSwap: true, min: min, max: max, onChange: (_event, value) => {
+                    setFilterValues(value);
+                }, onChangeCommitted: (_event, value) => {
+                    column.setFilterValue(value);
+                }, value: filterValues, valueLabelDisplay: "auto" }, sliderProps, { slotProps: {
+                    input: {
+                        ref: (node) => {
+                            var _a, _b;
+                            if (node) {
+                                filterInputRefs.current[`${column.id}-0`] = node;
+                                // @ts-ignore
+                                if ((_b = (_a = sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.slotProps) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.ref) {
+                                    //@ts-ignore
+                                    sliderProps.slotProps.input.ref = node;
+                                }
+                            }
+                        },
+                    },
+                }, sx: (theme) => (Object.assign({ m: 'auto', mt: !showChangeModeButton ? '10px' : '6px', px: '4px', width: 'calc(100% - 8px)' }, ((sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.sx) instanceof Function
+                    ? sliderProps.sx(theme)
+                    : sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.sx))) })), showChangeModeButton ? (jsx(FormHelperText, { sx: {
+                    m: '-3px -6px',
+                    fontSize: '0.75rem',
+                    lineHeight: '0.8rem',
+                    whiteSpace: 'nowrap',
+                }, children: localization.filterMode.replace('{filterType}', 
+                // @ts-ignore
+                localization[`filter${((_b = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _b === void 0 ? void 0 : _b.toUpperCase()) +
+                    (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]) })) : null] }));
+};
+
 const MRT_TableHeadCellFilterContainer = ({ header, table }) => {
     const { getState } = table;
     const { showColumnFilters } = getState();
     const { column } = header;
     const { columnDef } = column;
-    return (jsx(Collapse, { in: showColumnFilters, mountOnEnter: true, unmountOnExit: true, children: columnDef.filterVariant === 'checkbox' ? (jsx(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range' ||
+    return (jsx(Collapse, { in: showColumnFilters, mountOnEnter: true, unmountOnExit: true, children: columnDef.filterVariant === 'checkbox' ? (jsx(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range-slider' ? (jsx(MRT_FilterRangeSlider, { header: header, table: table })) : columnDef.filterVariant === 'range' ||
             ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn) ? (jsx(MRT_FilterRangeFields, { header: header, table: table })) : (jsx(MRT_FilterTextField, { header: header, table: table })) }));
 };
 
@@ -2726,7 +2819,7 @@ const MRT_TablePaper = ({ table }) => {
 
 const MRT_EditRowModal = ({ open, row, table, }) => {
     const { options: { localization }, } = table;
-    return (jsxs(Dialog, { open: open, children: [jsx(DialogTitle, { textAlign: "center", children: localization.edit }), jsx(DialogContent, { children: jsx("form", { onSubmit: (e) => e.preventDefault(), children: jsx(Stack, { sx: {
+    return (jsxs(Dialog, { open: open, children: [jsx(DialogTitle, { textAlign: "center", children: localization.edit }), jsx(DialogContent, { children: jsx("form", { onSubmit: (e) => e.preventDefault(), children: jsx(Stack$1, { sx: {
                             gap: '1.5rem',
                             minWidth: { xs: '300px', sm: '360px', md: '400px' },
                             pt: '1rem',
@@ -2848,7 +2941,23 @@ const MRT_TableRoot = (props) => {
             : props.data;
     }, [props.data, (_v = props.state) === null || _v === void 0 ? void 0 : _v.isLoading, (_w = props.state) === null || _w === void 0 ? void 0 : _w.showSkeletons]);
     //@ts-ignore
-    const table = Object.assign(Object.assign({}, useReactTable(Object.assign(Object.assign({ getCoreRowModel: getCoreRowModel(), getExpandedRowModel: getExpandedRowModel(), getFacetedRowModel: getFacetedRowModel(), getFilteredRowModel: getFilteredRowModel(), getGroupedRowModel: getGroupedRowModel(), getPaginationRowModel: getPaginationRowModel(), getSortedRowModel: getSortedRowModel(), onColumnOrderChange: setColumnOrder, onGroupingChange: setGrouping, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows }, props), { 
+    const table = Object.assign(Object.assign({}, useReactTable(Object.assign(Object.assign({ getCoreRowModel: getCoreRowModel(), 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 === null || row === void 0 ? void 0 : row.subRows }, props), { 
         //@ts-ignore
         columns: columnDefs, data, globalFilterFn: (_y = (_x = props.filterFns) === null || _x === void 0 ? void 0 : _x[globalFilterFn]) !== null && _y !== void 0 ? _y : (_z = props.filterFns) === null || _z === void 0 ? void 0 : _z.fuzzy, initialState, state: Object.assign({ columnFilterFns,
             columnOrder,
@@ -2914,7 +3023,7 @@ const MRT_TableRoot = (props) => {
 
 const MaterialReactTable = (_a) => {
     var _b;
-    var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onChange', defaultColumn, defaultDisplayColumn, editingMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enablePinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode = 'semantic', localization, manualFiltering, manualGrouping, manualPagination, manualSorting, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["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"]);
+    var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onChange', defaultColumn, defaultDisplayColumn, editingMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enablePinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode = 'semantic', localization, manualFiltering, manualGrouping, manualPagination, manualSorting, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["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"]);
     const _icons = useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
     const _localization = useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
     const _aggregationFns = useMemo(() => (Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns)), []);
@@ -2937,7 +3046,7 @@ const MaterialReactTable = (_a) => {
         manualPagination = true;
         manualSorting = true;
     }
-    return (jsx(MRT_TableRoot, Object.assign({ aggregationFns: _aggregationFns, autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilterMatchHighlighting: enableFilterMatchHighlighting, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: _filterFns, icons: _icons, layoutMode: layoutMode, localization: _localization, manualFiltering: manualFiltering, manualGrouping: manualGrouping, manualPagination: manualPagination, manualSorting: manualSorting, positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: _sortingFns }, rest)));
+    return (jsx(MRT_TableRoot, Object.assign({ aggregationFns: _aggregationFns, autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableExpanding: enableExpanding, enableFilterMatchHighlighting: enableFilterMatchHighlighting, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: _filterFns, icons: _icons, layoutMode: layoutMode, localization: _localization, manualFiltering: manualFiltering, manualGrouping: manualGrouping, manualPagination: manualPagination, manualSorting: manualSorting, positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: _sortingFns }, rest)));
 };
 
 export { MRT_AggregationFns, MRT_BottomToolbar, MRT_CopyButton, MRT_EditActionButtons, MRT_ExpandButton, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_ShowHideColumnsButton, MRT_SortingFns, MRT_TableHeadCellFilterContainer, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, MaterialReactTable as default };