material-react-table 3.1.0 → 3.2.1

package/dist/index.d.ts

@@ -280,6 +280,7 @@ type MRT_ColumnHelper<TData extends MRT_RowData> = {
     group: (column: MRT_GroupColumnDef<TData>) => MRT_ColumnDef<TData>;
 };
 interface MRT_Localization {
+    language: string;
     actions: string;
     and: string;
     cancel: string;

package/dist/index.esm.js

@@ -1298,6 +1298,7 @@ const MRT_Default_Icons = {
 };
 
 const MRT_Localization_EN = {
+    language: 'en',
     actions: 'Actions',
     and: 'and',
     cancel: 'Cancel',
@@ -1579,11 +1580,12 @@ const useMRT_Effects = (table) => {
         if (!enablePagination || isLoading || showSkeletons)
             return;
         const { pageIndex, pageSize } = pagination;
-        const firstVisibleRowIndex = pageIndex * pageSize;
-        if (firstVisibleRowIndex >= totalRowCount) {
-            table.setPageIndex(Math.ceil(totalRowCount / pageSize) - 1);
+        const totalPages = totalRowCount > 0 ? Math.ceil(totalRowCount / pageSize) : 1;
+        const isOutOfBounds = pageIndex < 0 || pageIndex >= totalPages;
+        if (isOutOfBounds) {
+            table.setPageIndex(totalPages - 1);
         }
-    }, [totalRowCount]);
+    }, [totalRowCount, enablePagination, isLoading, showSkeletons]);
     //turn off sort when global filter is looking for ranked results
     const appliedSort = useRef(sorting);
     useEffect(() => {
@@ -1797,6 +1799,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 = defaultRangeExtractor(range);
     if (draggingIndex === undefined)
@@ -1872,7 +1879,6 @@ const useMRT_ColumnVirtualizer = (table) => {
 };
 
 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)
@@ -1880,7 +1886,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 = 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 = useVirtualizer(Object.assign({ count: renderDetailPanel ? rowCount * 2 : rowCount, estimateSize: (index) => renderDetailPanel && index % 2 === 1
             ? expanded === true
@@ -1890,9 +1903,8 @@ 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: 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-expect-error
@@ -3003,7 +3015,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, _u, _v, _w, _x, _y;
+    var _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0;
     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;
@@ -3040,9 +3052,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] = useState(isAutocompleteFilter ? filterValue : null);
+    const [autocompleteValue, setAutocompleteValue] = useState(() => isAutocompleteFilter ? (column.getFilterValue() || null) : null);
     const handleChangeDebounced = useCallback(debounce((newValue) => {
         if (isRangeFilter) {
             column.setFilterValue((old) => {
@@ -3069,9 +3083,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) {
@@ -3086,6 +3103,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);
@@ -3144,11 +3168,10 @@ const MRT_FilterTextField = (_a) => {
                     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: {
+                ? Object.assign({ endAdornment, startAdornment }, (_o = textFieldProps.slotProps) === null || _o === void 0 ? void 0 : _o.input) : Object.assign({ startAdornment }, (_p = textFieldProps.slotProps) === null || _p === void 0 ? void 0 : _p.input), 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) => {
+                }, title: filterPlaceholder }, (_q = textFieldProps.slotProps) === null || _q === void 0 ? void 0 : _q.htmlInput) }), onKeyDown: (e) => {
             var _a;
             e.stopPropagation();
             (_a = textFieldProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
@@ -3168,32 +3191,32 @@ const MRT_FilterTextField = (_a) => {
         value: filterValue || null,
     };
     return (jsxs(Fragment, { children: [(filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('time')) ? (jsx(TimePicker, Object.assign({}, commonDatePickerProps, timePickerProps, { slotProps: {
-                    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),
+                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_r = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.slotProps) === null || _r === void 0 ? void 0 : _r.field),
+                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_s = timePickerProps === null || timePickerProps === void 0 ? void 0 : timePickerProps.slotProps) === null || _s === void 0 ? void 0 : _s.textField),
                 } }))) : (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('datetime')) ? (jsx(DateTimePicker, Object.assign({}, commonDatePickerProps, dateTimePickerProps, { slotProps: {
-                    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),
+                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_t = dateTimePickerProps === null || dateTimePickerProps === void 0 ? void 0 : dateTimePickerProps.slotProps) === null || _t === void 0 ? void 0 : _t.field),
+                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_u = dateTimePickerProps === null || dateTimePickerProps === void 0 ? void 0 : dateTimePickerProps.slotProps) === null || _u === void 0 ? void 0 : _u.textField),
                 } }))) : (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date')) ? (jsx(DatePicker, Object.assign({}, commonDatePickerProps, datePickerProps, { slotProps: {
-                    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 ? (jsx(Autocomplete, 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 : [] }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
+                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_v = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _v === void 0 ? void 0 : _v.field),
+                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_w = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _w === void 0 ? void 0 : _w.textField),
+                } }))) : isAutocompleteFilter ? (jsx(Autocomplete, Object.assign({ freeSolo: true, getOptionLabel: (option) => getValueAndLabel(option).label, onChange: (_e, newValue) => handleAutocompleteChange(newValue), options: (_x = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option) => getValueAndLabel(option))) !== null && _x !== void 0 ? _x : [], inputValue: filterValue, onInputChange: handleAutocompleteInputChange }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
                     var _a, _b, _c, _d, _f;
                     return (jsx(TextField, 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) }), onChange: handleTextFieldChange, onClick: (e) => e.stopPropagation() })));
-                }, value: autocompleteValue }))) : (jsx(TextField, 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
+                                (_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 }))) : (jsx(TextField, Object.assign({ select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { slotProps: Object.assign(Object.assign({}, commonTextFieldProps.slotProps), { inputLabel: Object.assign({ shrink: isSelectFilter || isMultiSelectFilter }, (_y = commonTextFieldProps.slotProps) === null || _y === void 0 ? void 0 : _y.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 ? (jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder })) : (jsx(Box, { 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 (jsx(Chip, { 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
+                            : undefined }, (_z = commonTextFieldProps.slotProps) === null || _z === void 0 ? void 0 : _z.select) }), onChange: handleTextFieldChange, onClick: (e) => e.stopPropagation(), value: isMultiSelectFilter
                     ? Array.isArray(filterValue)
                         ? filterValue
                         : []
                     : filterValue, children: (isSelectFilter || isMultiSelectFilter) && [
                     jsx(MenuItem, { disabled: true, divider: true, hidden: true, value: "", children: jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder }) }, "p"),
                     ...[
-                        (_y = textFieldProps.children) !== null && _y !== void 0 ? _y : dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => {
+                        (_0 = textFieldProps.children) !== null && _0 !== void 0 ? _0 : dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => {
                             var _a;
                             const { label, value } = getValueAndLabel(option);
                             return (jsxs(MenuItem, { sx: {
@@ -3359,7 +3382,7 @@ const MRT_TableHeadCellFilterLabel = (_a) => {
 
 const MRT_TableHeadCellGrabHandle = (_a) => {
     var { column, table, tableHeadCellRef } = _a, rest = __rest(_a, ["column", "table", "tableHeadCellRef"]);
-    const { getState, options: { enableColumnOrdering, muiColumnDragHandleProps }, setColumnOrder, setDraggingColumn, setHoveredColumn, } = table;
+    const { getState, options: { enableColumnOrdering, muiColumnDragHandleProps }, setColumnOrder, setColumnPinning, setDraggingColumn, setHoveredColumn, } = table;
     const { columnDef } = column;
     const { columnOrder, draggingColumn, hoveredColumn } = getState();
     const iconButtonProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiColumnDragHandleProps, { column, table })), parseFromValuesOrFunc(columnDef.muiColumnDragHandleProps, {
@@ -3386,7 +3409,12 @@ const MRT_TableHeadCellGrabHandle = (_a) => {
         else if (enableColumnOrdering &&
             hoveredColumn &&
             (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) !== (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id)) {
-            setColumnOrder(reorderColumn(column, hoveredColumn, columnOrder));
+            const reorderedColumns = reorderColumn(column, hoveredColumn, columnOrder);
+            setColumnOrder(reorderedColumns);
+            setColumnPinning(({ left = [], right = [] }) => ({
+                left: reorderedColumns.filter(header => left.includes(header)),
+                right: reorderedColumns.filter(header => right.includes(header)),
+            }));
         }
         setDraggingColumn(null);
         setHoveredColumn(null);
@@ -3671,10 +3699,11 @@ const MRT_ToolbarAlertBanner = (_a) => {
         table,
     });
     const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getCoreRowModel().rows.length;
+    const filteredRowCount = getFilteredSelectedRowModel().rows.length;
     const selectedRowCount = useMemo(() => manualPagination
         ? Object.values(rowSelection).filter(Boolean).length
-        : getFilteredSelectedRowModel().rows.length, [rowSelection, totalRowCount, manualPagination]);
-    const selectedAlert = selectedRowCount > 0 ? (jsxs(Stack, { 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()), jsx(Button, { onClick: (event) => getMRT_SelectAllHandler({ table })(event, false, true), size: "small", sx: { p: '2px' }, children: localization.clearSelection })] })) : null;
+        : filteredRowCount, [rowSelection, totalRowCount, manualPagination, filteredRowCount]);
+    const selectedAlert = selectedRowCount > 0 ? (jsxs(Stack, { 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)), jsx(Button, { onClick: (event) => getMRT_SelectAllHandler({ table })(event, false, true), size: "small", sx: { p: '2px' }, children: localization.clearSelection })] })) : null;
     const groupedAlert = grouping.length > 0 ? (jsxs("span", { children: [localization.groupedBy, ' ', grouping.map((columnId, index) => (jsxs(Fragment$1, { children: [index > 0 ? localization.thenBy : '', jsx(Chip, Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))] }, `${index}-${columnId}`)))] })) : null;
     return (jsx(Collapse, { in: showAlertBanner || !!selectedAlert || !!groupedAlert, timeout: stackAlertBanner ? 200 : 0, children: jsx(Alert, Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => {
                 var _a, _b;
@@ -3959,7 +3988,9 @@ const MRT_TablePagination = (_a) => {
                         last: LastPageIcon,
                         next: ChevronRightIcon,
                         previous: ChevronLeftIcon,
-                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, restPaginationProps))) : paginationDisplayMode === 'default' ? (jsxs(Fragment, { children: [jsx(Typography, { 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()}` }), jsxs(Box, { gap: "xs", children: [showFirstButton && (jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToFirstPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToFirstPage, disabled: disableBack, onClick: () => table.firstPage(), size: "small", children: jsx(FirstPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) }))), jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToPreviousPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToPreviousPage, disabled: disableBack, onClick: () => table.previousPage(), size: "small", children: jsx(ChevronLeftIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToNextPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToNextPage, disabled: disableNext, onClick: () => table.nextPage(), size: "small", children: jsx(ChevronRightIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), showLastButton && (jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToLastPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToLastPage, disabled: disableNext, onClick: () => table.lastPage(), size: "small", children: jsx(LastPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) })))] })] })) : null] }));
+                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, restPaginationProps))) : paginationDisplayMode === 'default' ? (jsxs(Fragment, { children: [jsx(Typography, { 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)}` }), jsxs(Box, { gap: "xs", children: [showFirstButton && (jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToFirstPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToFirstPage, disabled: disableBack, onClick: () => table.firstPage(), size: "small", children: jsx(FirstPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) }))), jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToPreviousPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToPreviousPage, disabled: disableBack, onClick: () => table.previousPage(), size: "small", children: jsx(ChevronLeftIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToNextPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToNextPage, disabled: disableNext, onClick: () => table.nextPage(), size: "small", children: jsx(ChevronRightIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), showLastButton && (jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToLastPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToLastPage, disabled: disableNext, onClick: () => table.lastPage(), size: "small", children: jsx(LastPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) })))] })] })) : null] }));
 };
 
 const MRT_ToolbarDropZone = (_a) => {
@@ -4033,7 +4064,7 @@ const MRT_ColumnPinningButtons = (_a) => {
 const MRT_ShowHideColumnsMenuItems = (_a) => {
     var _b;
     var { allColumns, column, hoveredColumn, isNestedColumns, setHoveredColumn, table } = _a, rest = __rest(_a, ["allColumns", "column", "hoveredColumn", "isNestedColumns", "setHoveredColumn", "table"]);
-    const { getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, mrtTheme: { draggingBorderColor }, }, setColumnOrder, } = table;
+    const { getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, mrtTheme: { draggingBorderColor }, }, setColumnOrder, setColumnPinning, } = table;
     const { columnOrder } = getState();
     const { columnDef } = column;
     const { columnDefType } = columnDef;
@@ -4064,7 +4095,12 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
         setIsDragging(false);
         setHoveredColumn(null);
         if (hoveredColumn) {
-            setColumnOrder(reorderColumn(column, hoveredColumn, columnOrder));
+            const reorderedColumns = reorderColumn(column, hoveredColumn, columnOrder);
+            setColumnOrder(reorderedColumns);
+            setColumnPinning(({ left = [], right = [] }) => ({
+                left: reorderedColumns.filter(header => left.includes(header)),
+                right: reorderedColumns.filter(header => right.includes(header)),
+            }));
         }
     };
     const handleDragEnter = (_e) => {
@@ -4202,7 +4238,7 @@ const MRT_ToggleGlobalFilterButton = (_a) => {
         setShowGlobalFilter(!showGlobalFilter);
         queueMicrotask(() => { var _a; return (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
     };
-    return (jsx(Tooltip, { title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideSearch, children: jsx(IconButton, Object.assign({ "aria-label": (_c = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _c !== void 0 ? _c : localization.showHideSearch, disabled: !!globalFilter, onClick: handleToggleSearch }, rest, { title: undefined, children: showGlobalFilter ? jsx(SearchOffIcon, {}) : jsx(SearchIcon, {}) })) }));
+    return (jsx(Tooltip, { title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideSearch, children: jsx(IconButton, Object.assign({ "aria-label": (_c = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _c !== void 0 ? _c : localization.showHideSearch, disabled: !!globalFilter && showGlobalFilter, onClick: handleToggleSearch }, rest, { title: undefined, children: showGlobalFilter ? jsx(SearchOffIcon, {}) : jsx(SearchIcon, {}) })) }));
 };
 
 const MRT_ToolbarInternalButtons = (_a) => {