material-react-table 3.0.3 → 3.2.0

package/dist/index.js

@@ -231,7 +231,7 @@ const prepareColumns = ({ columnDefs, tableOptions, }) => {
             }
             //assign sortingFns
             if (Object.keys(sortingFns).includes(columnDef.sortingFn)) {
-                // @ts-ignore
+                // @ts-expect-error
                 columnDef.sortingFn = sortingFns[columnDef.sortingFn];
             }
         }
@@ -513,11 +513,11 @@ const openEditingCell = ({ cell, table, }) => {
     if (isCellEditable({ cell, table }) && editDisplayMode === 'cell') {
         table.setEditingCell(cell);
         queueMicrotask(() => {
-            var _a;
-            const textField = editInputRefs.current[column.id];
+            var _a, _b;
+            const textField = (_a = editInputRefs.current) === null || _a === void 0 ? void 0 : _a[column.id];
             if (textField) {
                 textField.focus();
-                (_a = textField.select) === null || _a === void 0 ? void 0 : _a.call(textField);
+                (_b = textField.select) === null || _b === void 0 ? void 0 : _b.call(textField);
             }
         });
     }
@@ -538,7 +538,7 @@ const cellKeyboardShortcuts = ({ cell, cellElements, cellValue, containerElement
             getMRT_RowSelectionHandler({
                 row: cell.row,
                 table,
-                //@ts-ignore
+                //@ts-expect-error
                 staticRowIndex: +event.target.getAttribute('data-index'),
             })(event);
         }
@@ -865,13 +865,13 @@ const MRT_EditActionButtons = (_a) => {
         row._valuesCache = {}; //reset values cache
     };
     const handleSubmitRow = () => {
-        var _a;
+        var _a, _b;
         //look for auto-filled input values
-        (_a = Object.values(editInputRefs === null || editInputRefs === void 0 ? void 0 : editInputRefs.current)
-            .filter((inputRef) => { var _a, _b; return row.id === ((_b = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.name) === null || _a === void 0 ? void 0 : _a.split('_')) === null || _b === void 0 ? void 0 : _b[0]); })) === null || _a === void 0 ? void 0 : _a.forEach((input) => {
+        (_b = Object.values((_a = editInputRefs.current) !== null && _a !== void 0 ? _a : {})
+            .filter((inputRef) => { var _a, _b; return row.id === ((_b = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.name) === null || _a === void 0 ? void 0 : _a.split('_')) === null || _b === void 0 ? void 0 : _b[0]); })) === null || _b === void 0 ? void 0 : _b.forEach((input) => {
             if (input.value !== undefined &&
                 Object.hasOwn(row === null || row === void 0 ? void 0 : row._valuesCache, input.name)) {
-                // @ts-ignore
+                // @ts-expect-error
                 row._valuesCache[input.name] = input.value;
             }
         });
@@ -1388,6 +1388,7 @@ const MRT_Default_Icons = {
 };
 
 const MRT_Localization_EN = {
+    language: 'en',
     actions: 'Actions',
     and: 'and',
     cancel: 'Cancel',
@@ -1632,8 +1633,8 @@ const useMRT_Effects = (table) => {
     const totalColumnCount = table.options.columns.length;
     const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length;
     const rerender = react.useReducer(() => ({}), {})[1];
-    const initialBodyHeight = react.useRef();
-    const previousTop = react.useRef();
+    const initialBodyHeight = react.useRef(null);
+    const previousTop = react.useRef(null);
     react.useEffect(() => {
         if (typeof window !== 'undefined') {
             initialBodyHeight.current = document.body.style.height;
@@ -1673,7 +1674,7 @@ const useMRT_Effects = (table) => {
         if (firstVisibleRowIndex >= totalRowCount) {
             table.setPageIndex(Math.ceil(totalRowCount / pageSize) - 1);
         }
-    }, [totalRowCount]);
+    }, [totalRowCount, enablePagination, isLoading, showSkeletons]);
     //turn off sort when global filter is looking for ranked results
     const appliedSort = react.useRef(sorting);
     react.useEffect(() => {
@@ -1825,7 +1826,7 @@ const useMRT_TableInstance = (definedTableOptions) => {
         statefulTableOptions.state.isLoading,
         statefulTableOptions.state.showSkeletons,
     ]);
-    //@ts-ignore
+    //@ts-expect-error
     const table = reactTable.useReactTable(Object.assign(Object.assign({ onColumnOrderChange,
         onColumnSizingInfoChange,
         onGroupingChange,
@@ -1887,6 +1888,11 @@ const useMRT_TableInstance = (definedTableOptions) => {
 
 const useMaterialReactTable = (tableOptions) => useMRT_TableInstance(useMRT_TableOptions(tableOptions));
 
+/**
+ * When scroll, the `draggingRow` or `draggingColumn` can be removed from document because of virtualization,
+ * then, the `dragEnd` event on `MRT_TableBodyRowGrabHandle` or `MRT_TableHeadCellGrabHandle` will not fire.
+ * We should keep the `draggingRow` or `draggingColumn` in `getVirtualItems()` to avoid this thing.
+ */
 const extraIndexRangeExtractor = (range, draggingIndex) => {
     const newIndexes = reactVirtual.defaultRangeExtractor(range);
     if (draggingIndex === undefined)
@@ -1955,14 +1961,13 @@ const useMRT_ColumnVirtualizer = (table) => {
                 (numPinnedRight ? totalSize - rightNonPinnedStart : 0);
     }
     if (columnVirtualizerInstanceRef) {
-        //@ts-ignore
+        //@ts-expect-error
         columnVirtualizerInstanceRef.current = columnVirtualizer;
     }
     return columnVirtualizer;
 };
 
 const useMRT_RowVirtualizer = (table, rows) => {
-    var _a;
     const { getRowModel, getState, options: { enableRowVirtualization, renderDetailPanel, rowVirtualizerInstanceRef, rowVirtualizerOptions, }, refs: { tableContainerRef }, } = table;
     const { density, draggingRow, expanded } = getState();
     if (!enableRowVirtualization)
@@ -1970,7 +1975,14 @@ const useMRT_RowVirtualizer = (table, rows) => {
     const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
         table,
     });
-    const rowCount = (_a = rows === null || rows === void 0 ? void 0 : rows.length) !== null && _a !== void 0 ? _a : getRowModel().rows.length;
+    const realRows = rows !== null && rows !== void 0 ? rows : getRowModel().rows;
+    /**
+     * when filtering, should find the correct index in filtered rows
+     */
+    const draggingRowIndex = react.useMemo(() => (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id)
+        ? realRows.findIndex((r) => r.id === (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id))
+        : undefined, [realRows, draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id]);
+    const rowCount = realRows.length;
     const normalRowHeight = density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73;
     const rowVirtualizer = reactVirtual.useVirtualizer(Object.assign({ count: renderDetailPanel ? rowCount * 2 : rowCount, estimateSize: (index) => renderDetailPanel && index % 2 === 1
             ? expanded === true
@@ -1980,12 +1992,11 @@ const useMRT_RowVirtualizer = (table, rows) => {
             navigator.userAgent.indexOf('Firefox') === -1
             ? (element) => element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height
             : undefined, overscan: 4, rangeExtractor: react.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));
+            return extraIndexRangeExtractor(range, draggingRowIndex);
+        }, [draggingRowIndex]) }, rowVirtualizerProps));
     rowVirtualizer.virtualRows = rowVirtualizer.getVirtualItems();
     if (rowVirtualizerInstanceRef) {
-        //@ts-ignore
+        //@ts-expect-error
         rowVirtualizerInstanceRef.current = rowVirtualizer;
     }
     return rowVirtualizer;
@@ -2144,7 +2155,7 @@ const MRT_EditCellTextField = (_a) => {
     });
     const isSelectEdit = editVariant === 'select' || (textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.select);
     const saveInputValueToRowCache = (newValue) => {
-        //@ts-ignore
+        //@ts-expect-error
         row._valuesCache[column.id] = newValue;
         if (isCreating) {
             setCreatingRow(row);
@@ -2168,10 +2179,10 @@ const MRT_EditCellTextField = (_a) => {
         setEditingCell(null);
     };
     const handleEnterKeyDown = (event) => {
-        var _a, _b;
+        var _a, _b, _c;
         (_a = textFieldProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
         if (event.key === 'Enter' && !event.shiftKey && completesComposition) {
-            (_b = editInputRefs.current[column.id]) === null || _b === void 0 ? void 0 : _b.blur();
+            (_c = (_b = editInputRefs.current) === null || _b === void 0 ? void 0 : _b[column.id]) === null || _c === void 0 ? void 0 : _c.blur();
         }
     };
     if (columnDef.Edit) {
@@ -2179,7 +2190,9 @@ const MRT_EditCellTextField = (_a) => {
     }
     return (jsxRuntime.jsx(TextField__default["default"], Object.assign({ disabled: parseFromValuesOrFunc(columnDef.enableEditing, row) === false, fullWidth: true, inputRef: (inputRef) => {
             if (inputRef) {
-                editInputRefs.current[column.id] = inputRef;
+                editInputRefs.current[column.id] = isSelectEdit
+                    ? inputRef.node
+                    : inputRef;
                 if (textFieldProps.inputRef) {
                     textFieldProps.inputRef = inputRef;
                 }
@@ -2296,7 +2309,7 @@ const MRT_TableBodyCell = (_a) => {
     const showClickToCopyButton = (parseFromValuesOrFunc(enableClickToCopy, cell) === true ||
         parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) === true) &&
         !['context-menu', false].includes(
-        // @ts-ignore
+        // @ts-expect-error
         parseFromValuesOrFunc(columnDef.enableClickToCopy, cell));
     const isRightClickable = parseFromValuesOrFunc(enableCellActions, cell);
     const cellValueProps = {
@@ -2452,7 +2465,7 @@ const MRT_TableBodyRow = (_a) => {
     const sx = parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme);
     const defaultRowHeight = density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69;
     const customRowHeight = 
-    // @ts-ignore
+    // @ts-expect-error
     parseInt((_f = (_d = tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.style) === null || _d === void 0 ? void 0 : _d.height) !== null && _f !== void 0 ? _f : sx === null || sx === void 0 ? void 0 : sx.height, 10) || undefined;
     const rowHeight = customRowHeight || defaultRowHeight;
     const handleDragEnter = (_e) => {
@@ -2694,7 +2707,7 @@ const MRT_TableFooter = (_a) => {
     return (jsxRuntime.jsx(TableFooter__default["default"], Object.assign({}, tableFooterProps, { ref: (ref) => {
             tableFooterRef.current = ref;
             if (tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.ref) {
-                // @ts-ignore
+                // @ts-expect-error
                 tableFooterProps.ref.current = ref;
             }
         }, sx: (theme) => (Object.assign({ bottom: stickFooter ? 0 : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, opacity: stickFooter ? 0.97 : undefined, outline: stickFooter
@@ -2955,7 +2968,7 @@ const MRT_ColumnActionMenu = (_a) => {
     };
     const handleFilterByColumn = () => {
         setShowColumnFilters(true);
-        queueMicrotask(() => { var _a; return (_a = filterInputRefs.current[`${column.id}-0`]) === null || _a === void 0 ? void 0 : _a.focus(); });
+        queueMicrotask(() => { var _a, _b; return (_b = (_a = filterInputRefs.current) === null || _a === void 0 ? void 0 : _a[`${column.id}-0`]) === null || _b === void 0 ? void 0 : _b.focus(); });
         setAnchorEl(null);
     };
     const handleShowAllColumns = () => {
@@ -2978,7 +2991,7 @@ const MRT_ColumnActionMenu = (_a) => {
     const internalColumnMenuItems = [
         ...(enableSorting && column.getCanSort()
             ? [
-                enableSortingRemoval !== false && (jsxRuntime.jsx(MRT_ActionMenuItem, { icon: jsxRuntime.jsx(ClearAllIcon, {}), label: localization.clearSort, onClick: handleClearSort, table: table }, 0)),
+                enableSortingRemoval !== false && (jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: column.getIsSorted() === false, icon: jsxRuntime.jsx(ClearAllIcon, {}), label: localization.clearSort, onClick: handleClearSort, table: table }, 0)),
                 jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: column.getIsSorted() === 'asc', icon: jsxRuntime.jsx(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } }), label: (_c = localization.sortByColumnAsc) === null || _c === void 0 ? void 0 : _c.replace('{column}', String(columnDef.header)), onClick: handleSortAsc, table: table }, 1),
                 jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: column.getIsSorted() === 'desc', divider: enableColumnFilters || enableGrouping || enableHiding, icon: jsxRuntime.jsx(SortIcon, {}), label: (_d = localization.sortByColumnDesc) === null || _d === void 0 ? void 0 : _d.replace('{column}', String(columnDef.header)), onClick: handleSortDesc, table: table }, 2),
             ]
@@ -3008,7 +3021,7 @@ const MRT_ColumnActionMenu = (_a) => {
             : []),
         ...(enableColumnResizing && column.getCanResize()
             ? [
-                jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: !columnSizing[column.id], icon: jsxRuntime.jsx(RestartAltIcon, {}), label: localization.resetColumnSize, onClick: handleResetColumnSize, table: table }, 10),
+                jsxRuntime.jsx(MRT_ActionMenuItem, { disabled: columnSizing[column.id] === undefined, icon: jsxRuntime.jsx(RestartAltIcon, {}), label: localization.resetColumnSize, onClick: handleResetColumnSize, table: table }, 10),
             ]
             : []),
         ...(enableHiding
@@ -3091,7 +3104,7 @@ const MRT_FilterCheckbox = (_a) => {
 };
 
 const MRT_FilterTextField = (_a) => {
-    var _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    var _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
     var { header, rangeFilterIndex, table } = _a, rest = __rest(_a, ["header", "rangeFilterIndex", "table"]);
     const { options: { enableColumnFilterModes, icons: { CloseIcon, FilterListIcon }, localization, manualFiltering, muiFilterAutocompleteProps, muiFilterDatePickerProps, muiFilterDateTimePickerProps, muiFilterTextFieldProps, muiFilterTimePickerProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
     const { column } = header;
@@ -3106,9 +3119,8 @@ const MRT_FilterTextField = (_a) => {
     const { allowedColumnFilterOptions, currentFilterOption, facetedUniqueValues, isAutocompleteFilter, isDateFilter, isMultiSelectFilter, isRangeFilter, isSelectFilter, isTextboxFilter, } = getColumnFilterInfo({ header, table });
     const dropdownOptions = useDropdownOptions({ header, table });
     const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
-        ? //@ts-ignore
-            localization[`filter${((_c = (_b = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt) === null || _b === void 0 ? void 0 : _b.call(currentFilterOption, 0)) === null || _c === void 0 ? void 0 : _c.toUpperCase()) +
-                (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]
+        ? localization[`filter${((_c = (_b = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt) === null || _b === void 0 ? void 0 : _b.call(currentFilterOption, 0)) === null || _c === void 0 ? void 0 : _c.toUpperCase()) +
+            (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]
         : '';
     const filterPlaceholder = !isRangeFilter
         ? ((_d = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.placeholder) !== null && _d !== void 0 ? _d : (_f = localization.filterByColumn) === null || _f === void 0 ? void 0 : _f.replace('{column}', String(columnDef.header)))
@@ -3129,9 +3141,11 @@ const MRT_FilterTextField = (_a) => {
             ? column.getFilterValue() || []
             : isRangeFilter
                 ? ((_a = column.getFilterValue()) === null || _a === void 0 ? void 0 : _a[rangeFilterIndex]) || ''
-                : ((_b = column.getFilterValue()) !== null && _b !== void 0 ? _b : '');
+                : isAutocompleteFilter
+                    ? typeof column.getFilterValue() === 'string' ? column.getFilterValue() : ''
+                    : ((_b = column.getFilterValue()) !== null && _b !== void 0 ? _b : '');
     });
-    const [autocompleteValue, setAutocompleteValue] = react.useState(isAutocompleteFilter ? filterValue : null);
+    const [autocompleteValue, setAutocompleteValue] = react.useState(() => isAutocompleteFilter ? (column.getFilterValue() || null) : null);
     const handleChangeDebounced = react.useCallback(utils.debounce((newValue) => {
         if (isRangeFilter) {
             column.setFilterValue((old) => {
@@ -3158,9 +3172,12 @@ const MRT_FilterTextField = (_a) => {
         handleChange(newValue);
         (_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.onChange) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
     };
+    const handleAutocompleteInputChange = (_event, newValue, _reason) => {
+        handleChange(newValue);
+    };
     const handleAutocompleteChange = (newValue) => {
         setAutocompleteValue(newValue);
-        handleChange(getValueAndLabel(newValue).value);
+        handleChangeDebounced(getValueAndLabel(newValue).value);
     };
     const handleClear = () => {
         if (isMultiSelectFilter) {
@@ -3175,6 +3192,13 @@ const MRT_FilterTextField = (_a) => {
                 return newFilterValues;
             });
         }
+        else if (isAutocompleteFilter) {
+            setAutocompleteValue(null);
+            setFilterValue('');
+            // when using 'autocomplete' this function is called only inside effect and only if the filterValue === undefined
+            // so the following call is excessive; should be uncommented if the handleClear becomes part of the Autocomplete component callbacks
+            // column.setFilterValue(undefined)
+        }
         else {
             setFilterValue('');
             column.setFilterValue(undefined);
@@ -3210,33 +3234,17 @@ const MRT_FilterTextField = (_a) => {
     if (columnDef.Filter) {
         return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (_g = columnDef.Filter) === null || _g === void 0 ? void 0 : _g.call(columnDef, { column, header, rangeFilterIndex, table }) }));
     }
-    const endAdornment = !isAutocompleteFilter && !isDateFilter && !filterChipLabel ? (jsxRuntime.jsx(InputAdornment__default["default"], { position: "end", sx: { mr: isSelectFilter || isMultiSelectFilter ? '20px' : undefined }, children: jsxRuntime.jsx(Tooltip__default["default"], { placement: "right", title: (_h = localization.clearFilter) !== null && _h !== void 0 ? _h : '', children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "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: {
+    const endAdornment = !isAutocompleteFilter && !isDateFilter && !filterChipLabel ? (jsxRuntime.jsx(InputAdornment__default["default"], { position: "end", sx: {
+            mr: isSelectFilter || isMultiSelectFilter ? '20px' : undefined,
+            visibility: ((_h = filterValue === null || filterValue === void 0 ? void 0 : filterValue.length) !== null && _h !== void 0 ? _h : 0) > 0 ? 'visible' : 'hidden',
+        }, children: jsxRuntime.jsx(Tooltip__default["default"], { placement: "right", title: (_j = localization.clearFilter) !== null && _j !== void 0 ? _j : '', children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.clearFilter, disabled: !((_k = filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString()) === null || _k === void 0 ? void 0 : _k.length), onClick: handleClear, size: "small", sx: {
                         height: '2rem',
                         transform: 'scale(0.9)',
                         width: '2rem',
                     }, children: jsxRuntime.jsx(CloseIcon, {}) }) }) }) })) : null;
     const startAdornment = showChangeModeButton ? (jsxRuntime.jsxs(InputAdornment__default["default"], { position: "start", children: [jsxRuntime.jsx(Tooltip__default["default"], { title: localization.changeFilterMode, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.changeFilterMode, onClick: handleFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsxRuntime.jsx(FilterListIcon, {}) }) }) }), filterChipLabel && (jsxRuntime.jsx(Chip__default["default"], { label: filterChipLabel, onDelete: handleClearEmptyFilterChip }))] })) : null;
-    const commonTextFieldProps = Object.assign(Object.assign({ FormHelperTextProps: {
-            sx: {
-                fontSize: '0.75rem',
-                lineHeight: '0.8rem',
-                whiteSpace: 'nowrap',
-            },
-        }, InputProps: endAdornment //hack because mui looks for presence of endAdornment key instead of undefined
-            ? { endAdornment, startAdornment }
-            : { startAdornment }, fullWidth: true, helperText: showChangeModeButton ? (jsxRuntime.jsx("label", { children: localization.filterMode.replace('{filterType}', 
-            // @ts-ignore
-            localization[`filter${((_k = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _k === void 0 ? void 0 : _k.toUpperCase()) +
-                (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]) })) : null, inputProps: {
-            'aria-label': filterPlaceholder,
-            autoComplete: 'off',
-            disabled: !!filterChipLabel,
-            sx: {
-                textOverflow: 'ellipsis',
-                width: filterChipLabel ? 0 : undefined,
-            },
-            title: filterPlaceholder,
-        }, inputRef: (inputRef) => {
+    const commonTextFieldProps = Object.assign(Object.assign({ fullWidth: true, helperText: showChangeModeButton ? (jsxRuntime.jsx("label", { children: localization.filterMode.replace('{filterType}', localization[`filter${((_l = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _l === void 0 ? void 0 : _l.toUpperCase()) +
+                (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]) })) : null, inputRef: (inputRef) => {
             filterInputRefs.current[`${column.id}-${rangeFilterIndex !== null && rangeFilterIndex !== void 0 ? rangeFilterIndex : 0}`] =
                 inputRef;
             if (textFieldProps.inputRef) {
@@ -3244,7 +3252,16 @@ const MRT_FilterTextField = (_a) => {
             }
         }, margin: 'none', placeholder: filterChipLabel || isSelectFilter || isMultiSelectFilter
             ? undefined
-            : filterPlaceholder, variant: 'standard' }, textFieldProps), { onKeyDown: (e) => {
+            : filterPlaceholder, variant: 'standard' }, textFieldProps), { slotProps: Object.assign(Object.assign({}, textFieldProps.slotProps), { formHelperText: Object.assign({ sx: {
+                    fontSize: '0.75rem',
+                    lineHeight: '0.8rem',
+                    whiteSpace: 'nowrap',
+                } }, (_m = textFieldProps.slotProps) === null || _m === void 0 ? void 0 : _m.formHelperText), input: endAdornment //hack because mui looks for presence of endAdornment key instead of undefined
+                ? { endAdornment, startAdornment }
+                : { startAdornment }, htmlInput: Object.assign({ 'aria-label': filterPlaceholder, autoComplete: 'off', disabled: !!filterChipLabel, sx: {
+                    textOverflow: 'ellipsis',
+                    width: filterChipLabel ? 0 : undefined,
+                }, title: filterPlaceholder }, (_o = textFieldProps.slotProps) === null || _o === void 0 ? void 0 : _o.htmlInput) }), onKeyDown: (e) => {
             var _a;
             e.stopPropagation();
             (_a = textFieldProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
@@ -3264,32 +3281,32 @@ const MRT_FilterTextField = (_a) => {
         value: filterValue || null,
     };
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [(filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('time')) ? (jsxRuntime.jsx(TimePicker.TimePicker, Object.assign({}, commonDatePickerProps, timePickerProps, { slotProps: {
-                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_l = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.slotProps) === null || _l === void 0 ? void 0 : _l.field),
-                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_m = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.slotProps) === null || _m === void 0 ? void 0 : _m.textField),
+                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_p = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.slotProps) === null || _p === void 0 ? void 0 : _p.field),
+                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_q = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.slotProps) === null || _q === void 0 ? void 0 : _q.textField),
                 } }))) : (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('datetime')) ? (jsxRuntime.jsx(DateTimePicker.DateTimePicker, Object.assign({}, commonDatePickerProps, dateTimePickerProps, { slotProps: {
-                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_o = dateTimePickerProps === null || dateTimePickerProps === void 0 ? void 0 : dateTimePickerProps.slotProps) === null || _o === void 0 ? void 0 : _o.field),
-                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_p = dateTimePickerProps === null || dateTimePickerProps === void 0 ? void 0 : dateTimePickerProps.slotProps) === null || _p === void 0 ? void 0 : _p.textField),
+                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_r = dateTimePickerProps === null || dateTimePickerProps === void 0 ? void 0 : dateTimePickerProps.slotProps) === null || _r === void 0 ? void 0 : _r.field),
+                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_s = dateTimePickerProps === null || dateTimePickerProps === void 0 ? void 0 : dateTimePickerProps.slotProps) === null || _s === void 0 ? void 0 : _s.textField),
                 } }))) : (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date')) ? (jsxRuntime.jsx(DatePicker.DatePicker, Object.assign({}, commonDatePickerProps, datePickerProps, { slotProps: {
-                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_q = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _q === void 0 ? void 0 : _q.field),
-                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_r = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _r === void 0 ? void 0 : _r.textField),
-                } }))) : isAutocompleteFilter ? (jsxRuntime.jsx(Autocomplete__default["default"], Object.assign({ freeSolo: true, getOptionLabel: (option) => getValueAndLabel(option).label, 
-                // @ts-ignore
-                onChange: (_e, newValue) => handleAutocompleteChange(newValue), options: (_s = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option) => getValueAndLabel(option))) !== null && _s !== void 0 ? _s : [] }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
-                    var _a;
-                    return (jsxRuntime.jsx(TextField__default["default"], 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, onClick: (e) => e.stopPropagation() })));
-                }, value: autocompleteValue }))) : (jsxRuntime.jsx(TextField__default["default"], Object.assign({ select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { SelectProps: Object.assign({ MenuProps: { disableScrollLock: true }, displayEmpty: true, multiple: isMultiSelectFilter, renderValue: isMultiSelectFilter
-                        ? (selected) => !Array.isArray(selected) || selected.length === 0 ? (jsxRuntime.jsx(Box__default["default"], { sx: { opacity: 0.5 }, children: filterPlaceholder })) : (jsxRuntime.jsx(Box__default["default"], { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' }, children: selected.map((value) => {
-                                const selectedValue = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.find((option) => getValueAndLabel(option).value === value);
-                                return (jsxRuntime.jsx(Chip__default["default"], { label: getValueAndLabel(selectedValue).label }, value));
-                            }) }))
-                        : undefined }, commonTextFieldProps.SelectProps), onChange: handleTextFieldChange, onClick: (e) => e.stopPropagation(), value: isMultiSelectFilter
+                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_t = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _t === void 0 ? void 0 : _t.field),
+                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_u = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _u === void 0 ? void 0 : _u.textField),
+                } }))) : isAutocompleteFilter ? (jsxRuntime.jsx(Autocomplete__default["default"], Object.assign({ freeSolo: true, getOptionLabel: (option) => getValueAndLabel(option).label, onChange: (_e, newValue) => handleAutocompleteChange(newValue), options: (_v = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option) => getValueAndLabel(option))) !== null && _v !== void 0 ? _v : [], inputValue: filterValue, onInputChange: handleAutocompleteInputChange }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
+                    var _a, _b, _c, _d, _f;
+                    return (jsxRuntime.jsx(TextField__default["default"], Object.assign({}, commonTextFieldProps, builtinTextFieldProps, { slotProps: Object.assign(Object.assign(Object.assign({}, builtinTextFieldProps.slotProps), commonTextFieldProps.slotProps), { input: Object.assign(Object.assign(Object.assign({}, builtinTextFieldProps.InputProps), (_a = builtinTextFieldProps.slotProps) === null || _a === void 0 ? void 0 : _a.input), { startAdornment: 
+                                //@ts-expect-error
+                                (_c = (_b = commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.slotProps) === null || _b === void 0 ? void 0 : _b.input) === null || _c === void 0 ? void 0 : _c.startAdornment }), htmlInput: Object.assign(Object.assign(Object.assign({}, builtinTextFieldProps.inputProps), (_d = builtinTextFieldProps.slotProps) === null || _d === void 0 ? void 0 : _d.htmlInput), (_f = commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.slotProps) === null || _f === void 0 ? void 0 : _f.htmlInput) }), onClick: (e) => e.stopPropagation() })));
+                }, value: autocompleteValue }))) : (jsxRuntime.jsx(TextField__default["default"], Object.assign({ select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { slotProps: Object.assign(Object.assign({}, commonTextFieldProps.slotProps), { inputLabel: Object.assign({ shrink: isSelectFilter || isMultiSelectFilter }, (_w = commonTextFieldProps.slotProps) === null || _w === void 0 ? void 0 : _w.inputLabel), select: Object.assign({ MenuProps: { disableScrollLock: true }, displayEmpty: true, multiple: isMultiSelectFilter, renderValue: isMultiSelectFilter
+                            ? (selected) => !Array.isArray(selected) || (selected === null || selected === void 0 ? void 0 : selected.length) === 0 ? (jsxRuntime.jsx(Box__default["default"], { sx: { opacity: 0.5 }, children: filterPlaceholder })) : (jsxRuntime.jsx(Box__default["default"], { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' }, children: selected.map((value) => {
+                                    const selectedValue = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.find((option) => getValueAndLabel(option).value === value);
+                                    return (jsxRuntime.jsx(Chip__default["default"], { label: getValueAndLabel(selectedValue).label }, value));
+                                }) }))
+                            : undefined }, (_x = commonTextFieldProps.slotProps) === null || _x === void 0 ? void 0 : _x.select) }), onChange: handleTextFieldChange, onClick: (e) => e.stopPropagation(), value: isMultiSelectFilter
                     ? Array.isArray(filterValue)
                         ? filterValue
                         : []
                     : filterValue, children: (isSelectFilter || isMultiSelectFilter) && [
                     jsxRuntime.jsx(MenuItem__default["default"], { disabled: true, divider: true, hidden: true, value: "", children: jsxRuntime.jsx(Box__default["default"], { sx: { opacity: 0.5 }, children: filterPlaceholder }) }, "p"),
                     ...[
-                        (_t = textFieldProps.children) !== null && _t !== void 0 ? _t : dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => {
+                        (_y = textFieldProps.children) !== null && _y !== void 0 ? _y : dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => {
                             var _a;
                             const { label, value } = getValueAndLabel(option);
                             return (jsxRuntime.jsxs(MenuItem__default["default"], { sx: {
@@ -3333,6 +3350,12 @@ const MRT_FilterRangeSlider = (_a) => {
     const [filterValues, setFilterValues] = react.useState([min, max]);
     const columnFilterValue = column.getFilterValue();
     const isMounted = react.useRef(false);
+    // prevent moving the focus to the next/prev cell when using the arrow keys
+    const handleKeyDown = (event) => {
+        if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
+            event.stopPropagation();
+        }
+    };
     react.useEffect(() => {
         if (isMounted.current) {
             if (columnFilterValue === undefined) {
@@ -3356,15 +3379,15 @@ const MRT_FilterRangeSlider = (_a) => {
                             column.setFilterValue(value);
                         }
                     }
-                }, value: filterValues, valueLabelDisplay: "auto" }, sliderProps, { slotProps: {
+                }, onKeyDown: handleKeyDown, value: filterValues, valueLabelDisplay: "auto" }, sliderProps, { slotProps: {
                     input: {
                         ref: (node) => {
                             var _a, _b;
                             if (node) {
                                 filterInputRefs.current[`${column.id}-0`] = node;
-                                // @ts-ignore
+                                // @ts-expect-error
                                 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
+                                    //@ts-expect-error
                                     sliderProps.slotProps.input.ref = node;
                                 }
                             }
@@ -3375,9 +3398,7 @@ const MRT_FilterRangeSlider = (_a) => {
                     lineHeight: '0.8rem',
                     m: '-3px -6px',
                     whiteSpace: 'nowrap',
-                }, children: localization.filterMode.replace('{filterType}', 
-                // @ts-ignore
-                localization[`filter${((_c = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _c === void 0 ? void 0 : _c.toUpperCase()) +
+                }, children: localization.filterMode.replace('{filterType}', localization[`filter${((_c = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _c === void 0 ? void 0 : _c.toUpperCase()) +
                     (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]) })) : null] }));
 };
 
@@ -3392,7 +3413,7 @@ const MRT_TableHeadCellFilterContainer = (_a) => {
 };
 
 const MRT_TableHeadCellFilterLabel = (_a) => {
-    var _b, _c;
+    var _b;
     var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
     const { options: { columnFilterDisplayMode, icons: { FilterAltIcon }, localization, }, refs: { filterInputRefs }, setShowColumnFilters, } = table;
     const { column } = header;
@@ -3410,9 +3431,8 @@ const MRT_TableHeadCellFilterLabel = (_a) => {
         : localization.filteringByColumn
             .replace('{column}', String(columnDef.header))
             .replace('{filterType}', currentFilterOption
-            ? // @ts-ignore
-                localization[`filter${((_c = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _c === void 0 ? void 0 : _c.toUpperCase()) +
-                    (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]
+            ? localization[`filter${currentFilterOption.charAt(0).toUpperCase() +
+                currentFilterOption.slice(1)}`]
             : '')
             .replace('{filterValue}', `"${Array.isArray(filterValue)
             ? filterValue
@@ -3424,8 +3444,7 @@ const MRT_TableHeadCellFilterLabel = (_a) => {
             .replace('" "', '');
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Grow__default["default"], { in: columnFilterDisplayMode === 'popover' ||
                     (!!filterValue && !isRangeFilter) ||
-                    (isRangeFilter && // @ts-ignore
-                        (!!(filterValue === null || filterValue === void 0 ? void 0 : filterValue[0]) || !!(filterValue === null || filterValue === void 0 ? void 0 : filterValue[1]))), unmountOnExit: true, children: jsxRuntime.jsx(Box__default["default"], { component: "span", sx: { flex: '0 0' }, children: jsxRuntime.jsx(Tooltip__default["default"], { placement: "top", title: filterTooltip, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ disableRipple: true, onClick: (event) => {
+                    (isRangeFilter && (!!(filterValue === null || filterValue === void 0 ? void 0 : filterValue[0]) || !!(filterValue === null || filterValue === void 0 ? void 0 : filterValue[1]))), unmountOnExit: true, children: jsxRuntime.jsx(Box__default["default"], { component: "span", sx: { flex: '0 0' }, children: jsxRuntime.jsx(Tooltip__default["default"], { placement: "top", title: filterTooltip, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ disableRipple: true, onClick: (event) => {
                                 if (columnFilterDisplayMode === 'popover') {
                                     setAnchorEl(event.currentTarget);
                                 }
@@ -3433,16 +3452,16 @@ const MRT_TableHeadCellFilterLabel = (_a) => {
                                     setShowColumnFilters(true);
                                 }
                                 queueMicrotask(() => {
-                                    var _a, _b, _c, _d;
-                                    (_b = (_a = filterInputRefs.current[`${column.id}-0`]) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
-                                    (_d = (_c = filterInputRefs.current[`${column.id}-0`]) === null || _c === void 0 ? void 0 : _c.select) === null || _d === void 0 ? void 0 : _d.call(_c);
+                                    var _a, _b, _c, _d, _e, _f;
+                                    (_c = (_b = (_a = filterInputRefs.current) === null || _a === void 0 ? void 0 : _a[`${column.id}-0`]) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b);
+                                    (_f = (_e = (_d = filterInputRefs.current) === null || _d === void 0 ? void 0 : _d[`${column.id}-0`]) === null || _e === void 0 ? void 0 : _e.select) === null || _f === void 0 ? void 0 : _f.call(_e);
                                 });
                                 event.stopPropagation();
                             }, size: "small" }, rest, { sx: (theme) => (Object.assign({ height: '16px', ml: '4px', opacity: isFilterActive ? 1 : 0.3, p: '8px', transform: 'scale(0.75)', transition: 'all 150ms ease-in-out', width: '16px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsxRuntime.jsx(FilterAltIcon, {}) })) }) }) }), columnFilterDisplayMode === 'popover' && (jsxRuntime.jsx(Popover__default["default"], { anchorEl: anchorEl, anchorOrigin: {
                     horizontal: 'center',
                     vertical: 'top',
                 }, disableScrollLock: true, onClick: (event) => event.stopPropagation(), onClose: (event) => {
-                    //@ts-ignore
+                    //@ts-expect-error
                     event.stopPropagation();
                     setAnchorEl(null);
                 }, onKeyDown: (event) => event.key === 'Enter' && setAnchorEl(null), open: !!anchorEl, slotProps: { paper: { sx: { overflow: 'visible' } } }, transformOrigin: {
@@ -3561,7 +3580,7 @@ const MRT_TableHeadCellSortLabel = (_a) => {
 };
 
 const MRT_TableHeadCell = (_a) => {
-    var _b, _c, _d, _f, _g, _h;
+    var _b, _c, _d, _f, _g, _h, _j;
     var { columnVirtualizer, header, staticColumnIndex, table } = _a, rest = __rest(_a, ["columnVirtualizer", "header", "staticColumnIndex", "table"]);
     const theme = styles.useTheme();
     const { getState, options: { columnFilterDisplayMode, columnResizeDirection, columnResizeMode, enableKeyboardShortcuts, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnPinning, enableGrouping, enableMultiSort, layoutMode, mrtTheme: { draggingBorderColor }, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
@@ -3728,7 +3747,7 @@ const MRT_TableHeadCell = (_a) => {
                                     }, children: HeaderElement }), column.getCanFilter() && (jsxRuntime.jsx(MRT_TableHeadCellFilterLabel, { header: header, table: table })), column.getCanSort() && (jsxRuntime.jsx(MRT_TableHeadCellSortLabel, { header: header, table: table }))] }), columnDefType !== 'group' && (jsxRuntime.jsxs(Box__default["default"], { className: "Mui-TableHeadCell-Content-Actions", sx: {
                                 whiteSpace: 'nowrap',
                             }, children: [showDragHandle && (jsxRuntime.jsx(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
-                                        current: tableHeadCellRefs.current[column.id],
+                                        current: (_j = tableHeadCellRefs.current) === null || _j === void 0 ? void 0 : _j[column.id],
                                     } })), showColumnActions && (jsxRuntime.jsx(MRT_TableHeadCellColumnActionsButton, { header: header, table: table }))] })), column.getCanResize() && (jsxRuntime.jsx(MRT_TableHeadCellResizeHandle, { header: header, table: table }))] }))), columnFilterDisplayMode === 'subheader' && column.getCanFilter() && (jsxRuntime.jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }))] })));
 };
 
@@ -3756,7 +3775,7 @@ const MRT_TableHeadRow = (_a) => {
 const MRT_ToolbarAlertBanner = (_a) => {
     var _b, _c, _d;
     var { stackAlertBanner, table } = _a, rest = __rest(_a, ["stackAlertBanner", "table"]);
-    const { getFilteredSelectedRowModel, getPrePaginationRowModel, getState, options: { enableRowSelection, enableSelectAll, localization, manualPagination, muiToolbarAlertBannerChipProps, muiToolbarAlertBannerProps, positionToolbarAlertBanner, renderToolbarAlertBannerContent, rowCount, }, refs: { tablePaperRef }, } = table;
+    const { getFilteredSelectedRowModel, getCoreRowModel, getState, options: { enableRowSelection, enableSelectAll, localization, manualPagination, muiToolbarAlertBannerChipProps, muiToolbarAlertBannerProps, positionToolbarAlertBanner, renderToolbarAlertBannerContent, rowCount, }, refs: { tablePaperRef }, } = table;
     const { density, grouping, rowSelection, showAlertBanner } = getState();
     const alertProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiToolbarAlertBannerProps, {
         table,
@@ -3764,11 +3783,11 @@ const MRT_ToolbarAlertBanner = (_a) => {
     const chipProps = parseFromValuesOrFunc(muiToolbarAlertBannerChipProps, {
         table,
     });
-    const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().flatRows.length;
+    const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getCoreRowModel().rows.length;
     const selectedRowCount = react.useMemo(() => manualPagination
         ? Object.values(rowSelection).filter(Boolean).length
         : getFilteredSelectedRowModel().rows.length, [rowSelection, totalRowCount, manualPagination]);
-    const selectedAlert = selectedRowCount > 0 ? (jsxRuntime.jsxs(Stack__default["default"], { alignItems: "center", direction: "row", gap: "16px", children: [(_c = (_b = localization.selectedCountOfRowCountRowsSelected) === null || _b === void 0 ? void 0 : _b.replace('{selectedCount}', selectedRowCount.toLocaleString())) === null || _c === void 0 ? void 0 : _c.replace('{rowCount}', totalRowCount.toString()), jsxRuntime.jsx(Button__default["default"], { onClick: (event) => getMRT_SelectAllHandler({ table })(event, false, true), size: "small", sx: { p: '2px' }, children: localization.clearSelection })] })) : null;
+    const selectedAlert = selectedRowCount > 0 ? (jsxRuntime.jsxs(Stack__default["default"], { alignItems: "center", direction: "row", gap: "16px", children: [(_c = (_b = localization.selectedCountOfRowCountRowsSelected) === null || _b === void 0 ? void 0 : _b.replace('{selectedCount}', selectedRowCount.toLocaleString(localization.language))) === null || _c === void 0 ? void 0 : _c.replace('{rowCount}', totalRowCount.toLocaleString(localization.language)), jsxRuntime.jsx(Button__default["default"], { onClick: (event) => getMRT_SelectAllHandler({ table })(event, false, true), size: "small", sx: { p: '2px' }, children: localization.clearSelection })] })) : null;
     const groupedAlert = grouping.length > 0 ? (jsxRuntime.jsxs("span", { children: [localization.groupedBy, ' ', grouping.map((columnId, index) => (jsxRuntime.jsxs(react.Fragment, { children: [index > 0 ? localization.thenBy : '', jsxRuntime.jsx(Chip__default["default"], Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))] }, `${index}-${columnId}`)))] })) : null;
     return (jsxRuntime.jsx(Collapse__default["default"], { in: showAlertBanner || !!selectedAlert || !!groupedAlert, timeout: stackAlertBanner ? 200 : 0, children: jsxRuntime.jsx(Alert__default["default"], Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => {
                 var _a, _b;
@@ -3806,7 +3825,7 @@ const MRT_TableHead = (_a) => {
     return (jsxRuntime.jsx(TableHead__default["default"], Object.assign({}, tableHeadProps, { ref: (ref) => {
             tableHeadRef.current = ref;
             if (tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.ref) {
-                // @ts-ignore
+                // @ts-expect-error
                 tableHeadProps.ref.current = ref;
             }
         }, sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, opacity: 0.97, position: stickyHeader ? 'sticky' : 'relative', top: stickyHeader && (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 0 : undefined, zIndex: stickyHeader ? 2 : undefined }, parseFromValuesOrFunc(tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx, theme))), children: positionToolbarAlertBanner === 'head-overlay' &&
@@ -3977,7 +3996,7 @@ const MRT_TableContainer = (_a) => {
             if (node) {
                 tableContainerRef.current = node;
                 if (tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.ref) {
-                    //@ts-ignore
+                    //@ts-expect-error
                     tableContainerProps.ref.current = node;
                 }
             }
@@ -4053,7 +4072,9 @@ const MRT_TablePagination = (_a) => {
                         last: LastPageIcon,
                         next: ChevronRightIcon,
                         previous: ChevronLeftIcon,
-                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, restPaginationProps))) : paginationDisplayMode === 'default' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography__default["default"], { align: "center", component: "span", sx: { m: '0 4px', minWidth: '8ch' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxRuntime.jsxs(Box__default["default"], { gap: "xs", children: [showFirstButton && (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, tooltipProps, { title: localization.goToFirstPage, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToFirstPage, disabled: disableBack, onClick: () => table.firstPage(), size: "small", children: jsxRuntime.jsx(FirstPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) }))), jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, tooltipProps, { title: localization.goToPreviousPage, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToPreviousPage, disabled: disableBack, onClick: () => table.previousPage(), size: "small", children: jsxRuntime.jsx(ChevronLeftIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, tooltipProps, { title: localization.goToNextPage, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToNextPage, disabled: disableNext, onClick: () => table.nextPage(), size: "small", children: jsxRuntime.jsx(ChevronRightIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), showLastButton && (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, tooltipProps, { title: localization.goToLastPage, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToLastPage, disabled: disableNext, onClick: () => table.lastPage(), size: "small", children: jsxRuntime.jsx(LastPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) })))] })] })) : null] }));
+                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, restPaginationProps))) : paginationDisplayMode === 'default' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography__default["default"], { align: "center", component: "span", sx: { m: '0 4px', minWidth: '8ch' }, variant: "body2", children: `${lastRowIndex === 0
+                            ? 0
+                            : (firstRowIndex + 1).toLocaleString(localization.language)}-${lastRowIndex.toLocaleString(localization.language)} ${localization.of} ${totalRowCount.toLocaleString(localization.language)}` }), jsxRuntime.jsxs(Box__default["default"], { gap: "xs", children: [showFirstButton && (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, tooltipProps, { title: localization.goToFirstPage, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToFirstPage, disabled: disableBack, onClick: () => table.firstPage(), size: "small", children: jsxRuntime.jsx(FirstPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) }))), jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, tooltipProps, { title: localization.goToPreviousPage, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToPreviousPage, disabled: disableBack, onClick: () => table.previousPage(), size: "small", children: jsxRuntime.jsx(ChevronLeftIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, tooltipProps, { title: localization.goToNextPage, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToNextPage, disabled: disableNext, onClick: () => table.nextPage(), size: "small", children: jsxRuntime.jsx(ChevronRightIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), showLastButton && (jsxRuntime.jsx(Tooltip__default["default"], Object.assign({}, tooltipProps, { title: localization.goToLastPage, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToLastPage, disabled: disableNext, onClick: () => table.lastPage(), size: "small", children: jsxRuntime.jsx(LastPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) })))] })] })) : null] }));
 };
 
 const MRT_ToolbarDropZone = (_a) => {
@@ -4090,7 +4111,7 @@ const MRT_BottomToolbar = (_a) => {
             if (node) {
                 bottomToolbarRef.current = node;
                 if (toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.ref) {
-                    // @ts-ignore
+                    // @ts-expect-error
                     toolbarProps.ref.current = node;
                 }
             }
@@ -4193,7 +4214,7 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
 
 const MRT_ShowHideColumnsMenu = (_a) => {
     var { anchorEl, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "setAnchorEl", "table"]);
-    const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, mrtTheme: { menuBackgroundColor }, }, } = table;
+    const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, getState, initialState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, mrtTheme: { menuBackgroundColor }, }, } = table;
     const { columnOrder, columnPinning, density } = getState();
     const handleToggleAllColumns = (value) => {
         getAllLeafColumns()
@@ -4220,6 +4241,8 @@ const MRT_ShowHideColumnsMenu = (_a) => {
         getRightLeafColumns(),
     ]);
     const isNestedColumns = allColumns.some((col) => col.columnDef.columnDefType === 'group');
+    const hasColumnOrderChanged = react.useMemo(() => columnOrder.length !== initialState.columnOrder.length ||
+        !columnOrder.every((column, index) => column === initialState.columnOrder[index]), [columnOrder, initialState.columnOrder]);
     const [hoveredColumn, setHoveredColumn] = react.useState(null);
     return (jsxRuntime.jsxs(Menu__default["default"], Object.assign({ MenuListProps: {
             dense: density === 'compact',
@@ -4231,7 +4254,7 @@ const MRT_ShowHideColumnsMenu = (_a) => {
                     justifyContent: 'space-between',
                     p: '0.5rem',
                     pt: 0,
-                }, children: [enableHiding && (jsxRuntime.jsx(Button__default["default"], { disabled: !getIsSomeColumnsVisible(), onClick: () => handleToggleAllColumns(false), children: localization.hideAll })), enableColumnOrdering && (jsxRuntime.jsx(Button__default["default"], { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options, true)), children: localization.resetOrder })), enableColumnPinning && (jsxRuntime.jsx(Button__default["default"], { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true), children: localization.unpinAll })), enableHiding && (jsxRuntime.jsx(Button__default["default"], { disabled: getIsAllColumnsVisible(), onClick: () => handleToggleAllColumns(true), children: localization.showAll }))] }), jsxRuntime.jsx(Divider__default["default"], {}), allColumns.map((column, index) => (jsxRuntime.jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, isNestedColumns: isNestedColumns, setHoveredColumn: setHoveredColumn, table: table }, `${index}-${column.id}`)))] })));
+                }, children: [enableHiding && (jsxRuntime.jsx(Button__default["default"], { disabled: !getIsSomeColumnsVisible(), onClick: () => handleToggleAllColumns(false), children: localization.hideAll })), enableColumnOrdering && (jsxRuntime.jsx(Button__default["default"], { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options, true)), disabled: !hasColumnOrderChanged, children: localization.resetOrder })), enableColumnPinning && (jsxRuntime.jsx(Button__default["default"], { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true), children: localization.unpinAll })), enableHiding && (jsxRuntime.jsx(Button__default["default"], { disabled: getIsAllColumnsVisible(), onClick: () => handleToggleAllColumns(true), children: localization.showAll }))] }), jsxRuntime.jsx(Divider__default["default"], {}), allColumns.map((column, index) => (jsxRuntime.jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, isNestedColumns: isNestedColumns, setHoveredColumn: setHoveredColumn, table: table }, `${index}-${column.id}`)))] })));
 };
 
 const MRT_ShowHideColumnsButton = (_a) => {
@@ -4379,7 +4402,7 @@ const MRT_TopToolbar = ({ table, }) => {
     return (jsxRuntime.jsxs(Box__default["default"], Object.assign({}, toolbarProps, { ref: (ref) => {
             topToolbarRef.current = ref;
             if (toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.ref) {
-                // @ts-ignore
+                // @ts-expect-error
                 toolbarProps.ref.current = ref;
             }
         }, sx: (theme) => (Object.assign(Object.assign(Object.assign({}, getCommonToolbarStyles({ table, theme })), { position: isFullScreen ? 'sticky' : 'relative', top: isFullScreen ? '0' : undefined }), parseFromValuesOrFunc(toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx, theme))), children: [positionToolbarAlertBanner === 'top' && (jsxRuntime.jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'top'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsxRuntime.jsx(MRT_ToolbarDropZone, { table: table })), jsxRuntime.jsxs(Box__default["default"], { sx: {
@@ -4414,7 +4437,7 @@ const MRT_TablePaper = (_a) => {
     return (jsxRuntime.jsxs(Paper__default["default"], Object.assign({ elevation: 2, onKeyDown: (e) => e.key === 'Escape' && table.setIsFullScreen(false) }, paperProps, { ref: (ref) => {
             tablePaperRef.current = ref;
             if (paperProps === null || paperProps === void 0 ? void 0 : paperProps.ref) {
-                //@ts-ignore
+                //@ts-expect-error
                 paperProps.ref.current = ref;
             }
         }, style: Object.assign(Object.assign({}, (isFullScreen