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

package/dist/cjs/types/column.utils.d.ts

@@ -1,5 +1,6 @@
 import { type ReactNode } from 'react';
 import { type Renderable, type Row } from '@tanstack/react-table';
+import { type Range } from '@tanstack/react-virtual';
 import { type TableCellProps } from '@mui/material/TableCell';
 import { type Theme } from '@mui/material/styles';
 import { type MRT_AggregationFns } from './aggregationFns';
@@ -144,3 +145,4 @@ export declare const parseFromValuesOrFunc: <T, U>(fn: T | ((arg: U) => T) | und
 export declare const parseCSSVarId: (id: string) => string;
 export declare const flexRender: (Comp: Renderable<any>, props: any) => JSX.Element | ReactNode;
 export declare const createRow: <TData extends Record<string, any>>(table: MRT_TableInstance<TData>, originalRow?: TData | undefined) => MRT_Row<TData>;
+export declare const extraIndexRangeExtractor: (range: Range, draggingIndex: number) => number[];

package/dist/cjs/types/types.d.ts

@@ -180,12 +180,8 @@ export type MRT_TableInstance<TData extends Record<string, any>> = Omit<Table<TD
     setEditingCell: Dispatch<SetStateAction<MRT_Cell<TData> | null>>;
     setEditingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
     setGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
-    setHoveredColumn: Dispatch<SetStateAction<{
-        id: string;
-    } | MRT_Column<TData> | null>>;
-    setHoveredRow: Dispatch<SetStateAction<{
-        id: string;
-    } | MRT_Row<TData> | null>>;
+    setHoveredColumn: Dispatch<SetStateAction<Partial<MRT_Column<TData>> | null>>;
+    setHoveredRow: Dispatch<SetStateAction<Partial<MRT_Row<TData>> | null>>;
     setIsFullScreen: Dispatch<SetStateAction<boolean>>;
     setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
     setShowColumnFilters: Dispatch<SetStateAction<boolean>>;
@@ -205,12 +201,8 @@ export type MRT_TableState<TData extends Record<string, any>> = TableState & {
     editingCell: MRT_Cell<TData> | null;
     editingRow: MRT_Row<TData> | null;
     globalFilterFn: MRT_FilterOption;
-    hoveredColumn: {
-        id: string;
-    } | MRT_Column<TData> | null;
-    hoveredRow: {
-        id: string;
-    } | MRT_Row<TData> | null;
+    hoveredColumn: Partial<MRT_Column<TData>> | null;
+    hoveredRow: Partial<MRT_Row<TData>> | null;
     isFullScreen: boolean;
     isLoading: boolean;
     isSaving: boolean;
@@ -727,12 +719,8 @@ export type MRT_TableOptions<TData extends Record<string, any>> = Omit<Partial<T
         values: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
     }) => Promise<void> | void;
     onGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
-    onHoveredColumnChange?: OnChangeFn<{
-        id: string;
-    } | MRT_Column<TData> | null>;
-    onHoveredRowChange?: OnChangeFn<{
-        id: string;
-    } | MRT_Row<TData> | null>;
+    onHoveredColumnChange?: OnChangeFn<Partial<MRT_Column<TData>> | null>;
+    onHoveredRowChange?: OnChangeFn<Partial<MRT_Row<TData>> | null>;
     onIsFullScreenChange?: OnChangeFn<boolean>;
     onShowAlertBannerChange?: OnChangeFn<boolean>;
     onShowColumnFiltersChange?: OnChangeFn<boolean>;

package/dist/esm/material-react-table.esm.js

@@ -2,7 +2,7 @@ import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import Paper from '@mui/material/Paper';
 import { useState, memo, useEffect, useMemo, useRef, useCallback, Fragment as Fragment$1, useLayoutEffect, useReducer } from 'react';
 import TableContainer from '@mui/material/TableContainer';
-import { useVirtualizer, defaultRangeExtractor } from '@tanstack/react-virtual';
+import { defaultRangeExtractor, useVirtualizer } from '@tanstack/react-virtual';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import Typography from '@mui/material/Typography';
@@ -392,6 +392,17 @@ const flexRender = flexRender$1;
 const createRow = (table, originalRow) => createRow$1(table, 'mrt-row-create', originalRow !== null && originalRow !== void 0 ? originalRow : Object.assign({}, ...getAllLeafColumnDefs(table.options.columns).map((col) => ({
     [getColumnId(col)]: '',
 }))), -1, 0);
+const extraIndexRangeExtractor = (range, draggingIndex) => {
+    const newIndexs = defaultRangeExtractor(range);
+    if (draggingIndex >= 0 &&
+        draggingIndex < Math.max(range.startIndex - range.overscan, 0)) {
+        newIndexs.unshift(draggingIndex);
+    }
+    if (draggingIndex >= 0 && draggingIndex > range.endIndex + range.overscan) {
+        newIndexs.push(draggingIndex);
+    }
+    return newIndexs;
+};
 
 const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table, }) => {
     var _a;
@@ -836,7 +847,7 @@ const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFil
 const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
     var _a, _b, _c, _d, _e, _f;
     const { getBottomRows, getCenterRows, getIsSomeRowsPinned, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { enableGlobalFilterRankedResults, enablePagination, enableRowPinning, enableRowVirtualization, enableStickyFooter, enableStickyHeader, layoutMode, localization, manualExpanding, manualFiltering, manualGrouping, manualPagination, manualSorting, memoMode, muiTableBodyProps, renderEmptyRowsFallback, rowPinningDisplayMode, rowVirtualizerInstanceRef, rowVirtualizerOptions, }, refs: { tableContainerRef, tableFooterRef, tableHeadRef, tablePaperRef }, } = table;
-    const { columnFilters, density, expanded, globalFilter, isFullScreen, pagination, rowPinning, sorting, } = getState();
+    const { columnFilters, density, draggingRow, expanded, globalFilter, isFullScreen, pagination, rowPinning, sorting, } = getState();
     const tableBodyProps = parseFromValuesOrFunc(muiTableBodyProps, { table });
     const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
         table,
@@ -894,7 +905,10 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
         ? useVirtualizer(Object.assign({ count: rows.length, estimateSize: () => density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73, getScrollElement: () => tableContainerRef.current, measureElement: typeof window !== 'undefined' &&
                 navigator.userAgent.indexOf('Firefox') === -1
                 ? (element) => element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height
-                : undefined, overscan: 4 }, rowVirtualizerProps))
+                : undefined, overscan: 4, rangeExtractor: useCallback((range) => {
+                var _a;
+                return extraIndexRangeExtractor(range, (_a = draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.index) !== null && _a !== void 0 ? _a : 0);
+            }, [draggingRow]) }, rowVirtualizerProps))
         : undefined;
     if (rowVirtualizerInstanceRef && rowVirtualizer) {
         rowVirtualizerInstanceRef.current = rowVirtualizer;
@@ -918,8 +932,12 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
                     return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
                 }) }))), jsx(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, height: rowVirtualizer
                         ? `${rowVirtualizer.getTotalSize()}px`
-                        : 'inherit', minHeight: !rows.length ? '100px' : undefined, position: 'relative' }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: (_c = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _c !== void 0 ? _c : (!rows.length ? (jsx("tr", { style: { display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined }, children: jsx("td", { colSpan: table.getVisibleLeafColumns().length, style: {
-                            display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : 'table-cell',
+                        : 'inherit', minHeight: !rows.length ? '100px' : undefined, position: 'relative' }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: (_c = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _c !== void 0 ? _c : (!rows.length ? (jsx("tr", { style: {
+                        display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
+                    }, children: jsx("td", { colSpan: table.getVisibleLeafColumns().length, style: {
+                            display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid'))
+                                ? 'grid'
+                                : 'table-cell',
                         }, children: (_d = renderEmptyRowsFallback === null || renderEmptyRowsFallback === void 0 ? void 0 : renderEmptyRowsFallback({ table })) !== null && _d !== void 0 ? _d : (jsx(Typography, { sx: {
                                 color: 'text.secondary',
                                 fontStyle: 'italic',
@@ -1470,7 +1488,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
         if (isRangeFilter) {
             column.setFilterValue((old) => {
                 const newFilterValues = old !== null && old !== void 0 ? old : ['', ''];
-                newFilterValues[rangeFilterIndex] = newValue;
+                newFilterValues[rangeFilterIndex] = newValue !== null && newValue !== void 0 ? newValue : undefined;
                 return newFilterValues;
             });
         }
@@ -1479,8 +1497,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
         }
     }, isTextboxFilter ? (manualFiltering ? 400 : 200) : 1), []);
     const handleChange = (newValue) => {
-        var _a;
-        setFilterValue((_a = newValue === null || newValue === void 0 ? void 0 : newValue.toString()) !== null && _a !== void 0 ? _a : '');
+        setFilterValue(newValue !== null && newValue !== void 0 ? newValue : '');
         handleChangeDebounced(newValue);
     };
     const handleTextFieldChange = (event) => {
@@ -1558,7 +1575,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
     const endAdornment = !isAutocompleteFilter && !isDateFilter && !filterChipLabel ? (jsx(InputAdornment, { position: "end", sx: { mr: isSelectFilter || isMultiSelectFilter ? '20px' : undefined }, children: jsx(Tooltip, { arrow: true, placement: "right", title: (_h = localization.clearFilter) !== null && _h !== void 0 ? _h : '', children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.clearFilter, disabled: !((_j = filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString()) === null || _j === void 0 ? void 0 : _j.length), onClick: handleClear, size: "small", sx: {
                         height: '2rem',
                         transform: 'scale(0.9)',
-                        width: '2rem'
+                        width: '2rem',
                     }, children: jsx(CloseIcon, {}) }) }) }) })) : null;
     const startAdornment = showChangeModeButton ? (jsxs(InputAdornment, { position: "start", children: [jsx(Tooltip, { arrow: true, title: localization.changeFilterMode, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.changeFilterMode, onClick: handleFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsx(FilterListIcon, {}) }) }) }), filterChipLabel && (jsx(Chip, { label: filterChipLabel, onDelete: handleClearEmptyFilterChip }))] })) : null;
     const commonTextFieldProps = Object.assign(Object.assign({ FormHelperTextProps: {
@@ -1600,7 +1617,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                 }, value: filterValue || null }, datePickerProps, { slotProps: {
                     field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_l = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _l === void 0 ? void 0 : _l.field),
                     textField: Object.assign(Object.assign({}, commonTextFieldProps), (_m = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _m === void 0 ? void 0 : _m.textField),
-                } }))) : isAutocompleteFilter ? (jsx(Autocomplete, Object.assign({ getOptionLabel: (option) => option, onChange: (_e, newValue) => handleChange(newValue), options: dropdownOptions !== null && dropdownOptions !== void 0 ? dropdownOptions : [] }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
+                } }))) : isAutocompleteFilter ? (jsx(Autocomplete, Object.assign({ freeSolo: true, getOptionLabel: (option) => option, onChange: (_e, newValue) => handleChange(newValue), options: dropdownOptions !== null && dropdownOptions !== void 0 ? dropdownOptions : [] }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
                     var _a;
                     return (jsx(TextField, Object.assign({}, builtinTextFieldProps, commonTextFieldProps, { InputProps: Object.assign(Object.assign({}, builtinTextFieldProps.InputProps), { startAdornment: (_a = commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.startAdornment }), inputProps: Object.assign(Object.assign({}, builtinTextFieldProps.inputProps), commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.inputProps), onChange: handleTextFieldChange })));
                 }, value: filterValue }))) : (jsx(TextField, Object.assign({ SelectProps: {
@@ -1780,11 +1797,11 @@ const MRT_TableHeadCellFilterLabel = ({ header, table, }) => {
                             }, children: jsx(FilterAltIcon, {}) }) }) }) }), jsx(Popover, { anchorEl: anchorEl, anchorOrigin: {
                     horizontal: 'center',
                     vertical: 'top',
-                }, onClose: (event) => {
+                }, onClick: (event) => event.stopPropagation(), onClose: (event) => {
                     //@ts-ignore
                     event.stopPropagation();
                     setAnchorEl(null);
-                }, open: !!anchorEl, transformOrigin: {
+                }, onKeyDown: (event) => event.key === 'Enter' && setAnchorEl(null), open: !!anchorEl, transformOrigin: {
                     horizontal: 'center',
                     vertical: 'bottom',
                 }, children: jsx(Box, { sx: { p: '1rem' }, children: jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }) }) })] }));
@@ -2072,7 +2089,7 @@ const MRT_TablePagination = ({ position = 'bottom', table, }) => {
     const showFirstLastPageButtons = numberOfPages > 2;
     const firstRowIndex = pageIndex * pageSize;
     const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
-    const _a = paginationProps !== null && paginationProps !== void 0 ? paginationProps : {}, { showRowsPerPage = true, rowsPerPageOptions = defaultRowsPerPage, showFirstButton = showFirstLastPageButtons, showLastButton = showFirstLastPageButtons } = _a, rest = __rest(_a, ["showRowsPerPage", "rowsPerPageOptions", "showFirstButton", "showLastButton"]);
+    const _a = paginationProps !== null && paginationProps !== void 0 ? paginationProps : {}, { rowsPerPageOptions = defaultRowsPerPage, showFirstButton = showFirstLastPageButtons, showLastButton = showFirstLastPageButtons, showRowsPerPage = true } = _a, rest = __rest(_a, ["rowsPerPageOptions", "showFirstButton", "showLastButton", "showRowsPerPage"]);
     return (jsxs(Box, { sx: {
             alignItems: 'center',
             display: 'flex',
@@ -2088,12 +2105,12 @@ const MRT_TablePagination = ({ position = 'bottom', table, }) => {
             px: '4px',
             py: '12px',
             zIndex: 2,
-        }, children: [showRowsPerPage && (jsxs(Box, { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsx(InputLabel, { htmlFor: "mrt-rows-per-page", sx: { mb: 0 }, children: localization.rowsPerPage }), jsx(Select, { inputProps: { 'aria-label': localization.rowsPerPage }, id: "mrt-rows-per-page", label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: { '&::before': { border: 'none' }, mb: 0 }, value: pageSize, variant: "standard", children: rowsPerPageOptions.map((value) => (jsx(MenuItem, { sx: { m: 0 }, value: value, children: value }, value))) })] })), paginationDisplayMode === 'pages' ? (jsx(Pagination, Object.assign({ count: numberOfPages, onChange: (_e, newPageIndex) => setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsx(PaginationItem, Object.assign({ slots: {
+        }, children: [showRowsPerPage && (jsxs(Box, { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsx(InputLabel, { htmlFor: "mrt-rows-per-page", sx: { mb: 0 }, children: localization.rowsPerPage }), jsx(Select, { id: "mrt-rows-per-page", inputProps: { 'aria-label': localization.rowsPerPage }, label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: { '&::before': { border: 'none' }, mb: 0 }, value: pageSize, variant: "standard", children: rowsPerPageOptions.map((value) => (jsx(MenuItem, { sx: { m: 0 }, value: value, children: value }, value))) })] })), paginationDisplayMode === 'pages' ? (jsx(Pagination, Object.assign({ count: numberOfPages, onChange: (_e, newPageIndex) => setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsx(PaginationItem, Object.assign({ slots: {
                         first: FirstPageIcon,
                         last: LastPageIcon,
                         next: ChevronRightIcon,
                         previous: ChevronLeftIcon,
-                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, rest))) : paginationDisplayMode === 'default' ? (jsxs(Fragment, { children: [jsx(Typography, { sx: { mb: 0, mx: '4px', minWidth: '10ch' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxs(Box, { gap: "xs", children: [showFirstButton && (jsx(IconButton, { "aria-label": localization.goToFirstPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(0), size: "small", children: jsx(FirstPageIcon, {}) })), jsx(IconButton, { "aria-label": localization.goToPreviousPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsx(ChevronLeftIcon, {}) }), jsx(IconButton, { "aria-label": localization.goToNextPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsx(ChevronRightIcon, {}) }), showLastButton && (jsx(IconButton, { "aria-label": localization.goToLastPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsx(LastPageIcon, {}) }))] })] })) : null] }));
+                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, rest))) : paginationDisplayMode === 'default' ? (jsxs(Fragment, { children: [jsx(Typography, { sx: { mb: 0, minWidth: '10ch', mx: '4px' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxs(Box, { gap: "xs", children: [showFirstButton && (jsx(IconButton, { "aria-label": localization.goToFirstPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(0), size: "small", children: jsx(FirstPageIcon, {}) })), jsx(IconButton, { "aria-label": localization.goToPreviousPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsx(ChevronLeftIcon, {}) }), jsx(IconButton, { "aria-label": localization.goToNextPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsx(ChevronRightIcon, {}) }), showLastButton && (jsx(IconButton, { "aria-label": localization.goToLastPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsx(LastPageIcon, {}) }))] })] })) : null] }));
 };
 
 const MRT_GlobalFilterTextField = ({ table, }) => {
@@ -2556,7 +2573,7 @@ const MRT_TableHead = ({ table, virtualColumns, virtualPaddingLeft, virtualPaddi
 const MRT_Table = ({ table, }) => {
     var _a, _b, _c, _d;
     const { getFlatHeaders, getState, options: { columnVirtualizerInstanceRef, columnVirtualizerOptions, columns, enableColumnPinning, enableColumnResizing, enableColumnVirtualization, enableStickyHeader, enableTableFooter, enableTableHead, layoutMode, memoMode, muiTableProps, }, refs: { tableContainerRef }, } = table;
-    const { columnPinning, columnSizing, columnSizingInfo, columnVisibility, isFullScreen, } = getState();
+    const { columnPinning, columnSizing, columnSizingInfo, columnVisibility, draggingColumn, isFullScreen, } = getState();
     const tableProps = parseFromValuesOrFunc(muiTableProps, { table });
     const columnVirtualizerProps = parseFromValuesOrFunc(columnVirtualizerOptions, { table });
     const columnSizeVars = useMemo(() => {
@@ -2588,14 +2605,20 @@ const MRT_Table = ({ table, }) => {
                 .map((c) => table.getVisibleLeafColumns().length - c.getPinnedIndex() - 1),
         ]
         : [[], []], [columnPinning, enableColumnVirtualization, enableColumnPinning]);
+    const draggingColumnIndex = table
+        .getVisibleLeafColumns()
+        .findIndex((c) => c.id === (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id));
     const columnVirtualizer = enableColumnVirtualization
-        ? useVirtualizer(Object.assign({ count: table.getVisibleLeafColumns().length, estimateSize: () => averageColumnWidth, getScrollElement: () => tableContainerRef.current, horizontal: true, overscan: 3, rangeExtractor: useCallback((range) => [
-                ...new Set([
-                    ...leftPinnedIndexes,
-                    ...defaultRangeExtractor(range),
-                    ...rightPinnedIndexes,
-                ]),
-            ], [leftPinnedIndexes, rightPinnedIndexes]) }, columnVirtualizerProps))
+        ? useVirtualizer(Object.assign({ count: table.getVisibleLeafColumns().length, estimateSize: () => averageColumnWidth, getScrollElement: () => tableContainerRef.current, horizontal: true, overscan: 3, rangeExtractor: useCallback((range) => {
+                const newIndexs = extraIndexRangeExtractor(range, draggingColumnIndex);
+                return [
+                    ...new Set([
+                        ...leftPinnedIndexes,
+                        ...newIndexs,
+                        ...rightPinnedIndexes,
+                    ]),
+                ];
+            }, [leftPinnedIndexes, rightPinnedIndexes, draggingColumnIndex]) }, columnVirtualizerProps))
         : undefined;
     if (columnVirtualizerInstanceRef && columnVirtualizer) {
         columnVirtualizerInstanceRef.current = columnVirtualizer;
@@ -3217,7 +3240,7 @@ const endsWith = (row, id, filterValue) => row
     .endsWith(filterValue.toString().toLowerCase().trim());
 endsWith.autoRemove = (val) => !val;
 const equals = (row, id, filterValue) => row.getValue(id).toString().toLowerCase().trim() ===
-    filterValue.toString().toLowerCase().trim();
+    (filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString().toLowerCase().trim());
 equals.autoRemove = (val) => !val;
 const notEquals = (row, id, filterValue) => row.getValue(id).toString().toLowerCase().trim() !==
     filterValue.toString().toLowerCase().trim();
@@ -3225,14 +3248,14 @@ notEquals.autoRemove = (val) => !val;
 const greaterThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id))
     ? +row.getValue(id) > +filterValue
     : row.getValue(id).toString().toLowerCase().trim() >
-        filterValue.toString().toLowerCase().trim();
+        (filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString().toLowerCase().trim());
 greaterThan.autoRemove = (val) => !val;
 const greaterThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
 greaterThanOrEqualTo.autoRemove = (val) => !val;
 const lessThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id))
     ? +row.getValue(id) < +filterValue
     : row.getValue(id).toString().toLowerCase().trim() <
-        filterValue.toString().toLowerCase().trim();
+        (filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString().toLowerCase().trim());
 lessThan.autoRemove = (val) => !val;
 const lessThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || lessThan(row, id, filterValue);
 lessThanOrEqualTo.autoRemove = (val) => !val;
@@ -3493,5 +3516,5 @@ const MaterialReactTable = (props) => {
     return jsx(MRT_TablePaper, { table: table });
 };
 
-export { MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, commonListItemStyles, commonMenuItemStyles, commonToolbarStyles, createRow, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getCommonCellStyles, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsFirstColumn, getIsFirstRightPinnedColumn, getIsLastColumn, getIsLastLeftPinnedColumn, getLeadingDisplayColumnIds, getTotalRight, getTrailingDisplayColumnIds, mrtFilterOptions, parseCSSVarId, parseFromValuesOrFunc, prepareColumns, rankGlobalFuzzy, reorderColumn, showExpandColumn, useMaterialReactTable };
+export { MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, commonListItemStyles, commonMenuItemStyles, commonToolbarStyles, createRow, extraIndexRangeExtractor, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getCommonCellStyles, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsFirstColumn, getIsFirstRightPinnedColumn, getIsLastColumn, getIsLastLeftPinnedColumn, getLeadingDisplayColumnIds, getTotalRight, getTrailingDisplayColumnIds, mrtFilterOptions, parseCSSVarId, parseFromValuesOrFunc, prepareColumns, rankGlobalFuzzy, reorderColumn, showExpandColumn, useMaterialReactTable };
 //# sourceMappingURL=material-react-table.esm.js.map