material-react-table 2.10.0 → 2.11.1

package/dist/index.esm.js

@@ -1,5 +1,5 @@
-import { flexRender as flexRender$1, createRow as createRow$1, aggregationFns, filterFns, sortingFns, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
-import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
+import { flexRender as flexRender$1, createRow as createRow$1, sortingFns, aggregationFns, filterFns, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, useReactTable } from '@tanstack/react-table';
+import { compareItems, rankItem, rankings } from '@tanstack/match-sorter-utils';
 import { useState, useMemo, useReducer, useRef, useEffect, useCallback, memo, Fragment as Fragment$1, useLayoutEffect } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import IconButton from '@mui/material/IconButton';
@@ -160,13 +160,12 @@ const reorderColumn = (draggedColumn, targetColumn, columnOrder) => {
     return newColumnOrder;
 };
 const getDefaultColumnFilterFn = (columnDef) => {
-    var _a;
-    if (columnDef.filterVariant === 'multi-select')
+    const { filterVariant } = columnDef;
+    if (filterVariant === 'multi-select')
         return 'arrIncludesSome';
-    if ((_a = columnDef.filterVariant) === null || _a === void 0 ? void 0 : _a.includes('range'))
+    if (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.includes('range'))
         return 'betweenInclusive';
-    if (columnDef.filterVariant === 'select' ||
-        columnDef.filterVariant === 'checkbox')
+    if (filterVariant === 'select' || filterVariant === 'checkbox')
         return 'equals';
     return 'fuzzy';
 };
@@ -269,7 +268,7 @@ const showRowDragColumn = (tableOptions) => {
 const showRowExpandColumn = (tableOptions) => {
     const { enableExpanding, enableGrouping, renderDetailPanel, state: { grouping }, } = tableOptions;
     return !!(enableExpanding ||
-        (enableGrouping && (grouping === undefined || (grouping === null || grouping === void 0 ? void 0 : grouping.length))) ||
+        (enableGrouping && (grouping === null || grouping === void 0 ? void 0 : grouping.length)) ||
         renderDetailPanel);
 };
 const showRowActionsColumn = (tableOptions) => {
@@ -319,16 +318,65 @@ const getDefaultColumnOrderIds = (tableOptions, reset = false) => {
     ];
 };
 
-const getIsRowSelected = ({ row, table, }) => {
-    const { options: { enableRowSelection }, } = table;
-    return (row.getIsSelected() ||
-        (parseFromValuesOrFunc(enableRowSelection, row) &&
-            row.getCanSelectSubRows() &&
-            row.getIsAllSubRowsSelected()));
+const fuzzy$1 = (rowA, rowB, columnId) => {
+    let dir = 0;
+    if (rowA.columnFiltersMeta[columnId]) {
+        dir = compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
+    }
+    // Provide a fallback for when the item ranks are equal
+    return dir === 0
+        ? sortingFns.alphanumeric(rowA, rowB, columnId)
+        : dir;
+};
+const MRT_SortingFns = Object.assign(Object.assign({}, sortingFns), { fuzzy: fuzzy$1 });
+const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFiltersMeta).map((v) => v.rank)) -
+    Math.max(...Object.values(rowA.columnFiltersMeta).map((v) => v.rank));
+
+const getMRT_Rows = (table, pinnedRowIds = [], all) => {
+    const { getBottomRows, getCenterRows, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { createDisplayMode, enablePagination, enableRowPinning, manualPagination, positionCreatingRow, rowPinningDisplayMode, }, } = table;
+    const { creatingRow, pagination } = getState();
+    const isRankingRows = getIsRankingRows(table);
+    let rows = [];
+    if (!isRankingRows) {
+        rows =
+            !enableRowPinning || (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))
+                ? all
+                    ? getPrePaginationRowModel().rows
+                    : getRowModel().rows
+                : getCenterRows();
+    }
+    else {
+        rows = getPrePaginationRowModel().rows.sort((a, b) => rankGlobalFuzzy(a, b));
+        if (enablePagination && !manualPagination && !all) {
+            const start = pagination.pageIndex * pagination.pageSize;
+            rows = rows.slice(start, start + pagination.pageSize);
+        }
+    }
+    if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))) {
+        rows = [
+            ...getTopRows().filter((row) => !pinnedRowIds.includes(row.id)),
+            ...rows,
+            ...getBottomRows().filter((row) => !pinnedRowIds.includes(row.id)),
+        ];
+    }
+    if (positionCreatingRow !== undefined &&
+        creatingRow &&
+        createDisplayMode === 'row') {
+        const creatingRowIndex = !isNaN(+positionCreatingRow)
+            ? +positionCreatingRow
+            : positionCreatingRow === 'top'
+                ? 0
+                : rows.length;
+        rows = [
+            ...rows.slice(0, creatingRowIndex),
+            creatingRow,
+            ...rows.slice(creatingRowIndex),
+        ];
+    }
+    return rows;
 };
 const getCanRankRows = (table) => {
-    const { getState, options } = table;
-    const { enableGlobalFilterRankedResults, manualExpanding, manualFiltering, manualGrouping, manualSorting, } = options;
+    const { getState, options: { enableGlobalFilterRankedResults, manualExpanding, manualFiltering, manualGrouping, manualSorting, }, } = table;
     const { expanded, globalFilterFn } = getState();
     return (!manualExpanding &&
         !manualFiltering &&
@@ -339,17 +387,77 @@ const getCanRankRows = (table) => {
         expanded !== true &&
         !Object.values(expanded).some(Boolean));
 };
+const getIsRankingRows = (table) => {
+    const { globalFilter, sorting } = table.getState();
+    return (getCanRankRows(table) &&
+        globalFilter &&
+        !Object.values(sorting).some(Boolean));
+};
+const getIsRowSelected = ({ row, table, }) => {
+    const { options: { enableRowSelection }, } = table;
+    return (row.getIsSelected() ||
+        (parseFromValuesOrFunc(enableRowSelection, row) &&
+            row.getCanSelectSubRows() &&
+            row.getIsAllSubRowsSelected()));
+};
+const getMRT_RowSelectionHandler = () => ({ event, row, staticRowIndex = 0, table, }) => {
+    var _a;
+    const { getState, options: { enableBatchRowSelection, enableRowPinning, manualPagination, rowPinningDisplayMode, }, refs: { lastSelectedRowId: lastSelectedRowId }, } = table;
+    const { pagination: { pageIndex, pageSize }, } = getState();
+    const paginationOffset = manualPagination ? 0 : pageSize * pageIndex;
+    const isCurrentRowChecked = getIsRowSelected({ row, table });
+    const isStickySelection = enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'));
+    // toggle selection of this row
+    row.getToggleSelectedHandler()(event);
+    // if shift key is pressed, select all rows between last selected and this one
+    if (enableBatchRowSelection &&
+        event.nativeEvent.shiftKey &&
+        lastSelectedRowId.current !== null) {
+        const rows = getMRT_Rows(table, undefined, true);
+        const lastIndex = rows.findIndex((r) => r.id === lastSelectedRowId.current);
+        if (lastIndex !== -1) {
+            const isLastIndexChecked = getIsRowSelected({
+                row: rows === null || rows === void 0 ? void 0 : rows[lastIndex],
+                table,
+            });
+            const currentIndex = staticRowIndex + paginationOffset;
+            const [start, end] = lastIndex < currentIndex
+                ? [lastIndex, currentIndex]
+                : [currentIndex, lastIndex];
+            // toggle selection of all rows between last selected and this one
+            // but only if the last selected row is not the same as the current one
+            if (isCurrentRowChecked !== isLastIndexChecked) {
+                for (let i = start; i <= end; i++) {
+                    rows[i].toggleSelected(!isCurrentRowChecked);
+                }
+            }
+        }
+    }
+    // record the last selected row id
+    lastSelectedRowId.current = row.id;
+    // if all sub rows were selected, unselect them
+    if (row.getCanSelectSubRows() && row.getIsAllSubRowsSelected()) {
+        (_a = row.subRows) === null || _a === void 0 ? void 0 : _a.forEach((r) => r.toggleSelected(false));
+    }
+    if (isStickySelection) {
+        row.pin(!row.getIsPinned() && isCurrentRowChecked
+            ? (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('bottom'))
+                ? 'bottom'
+                : 'top'
+            : false);
+    }
+};
 
 const MRT_AggregationFns = Object.assign({}, aggregationFns);
 
-const fuzzy$1 = (row, columnId, filterValue, addMeta) => {
+const fuzzy = (row, columnId, filterValue, addMeta) => {
     const itemRank = rankItem(row.getValue(columnId), filterValue, {
         threshold: rankings.MATCHES,
     });
     addMeta(itemRank);
     return itemRank.passed;
 };
-fuzzy$1.autoRemove = (val) => !val;
+fuzzy.autoRemove = (val) => !val;
 const contains = (row, id, filterValue) => row
     .getValue(id)
     .toString()
@@ -417,7 +525,7 @@ const MRT_FilterFns = Object.assign(Object.assign({}, filterFns), { between,
     empty,
     endsWith,
     equals,
-    fuzzy: fuzzy$1,
+    fuzzy,
     greaterThan,
     greaterThanOrEqualTo,
     lessThan,
@@ -426,20 +534,6 @@ const MRT_FilterFns = Object.assign(Object.assign({}, filterFns), { between,
     notEquals,
     startsWith });
 
-const fuzzy = (rowA, rowB, columnId) => {
-    let dir = 0;
-    if (rowA.columnFiltersMeta[columnId]) {
-        dir = compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
-    }
-    // Provide a fallback for when the item ranks are equal
-    return dir === 0
-        ? sortingFns.alphanumeric(rowA, rowB, columnId)
-        : dir;
-};
-const MRT_SortingFns = Object.assign(Object.assign({}, sortingFns), { fuzzy });
-const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFiltersMeta).map((v) => v.rank)) -
-    Math.max(...Object.values(rowA.columnFiltersMeta).map((v) => v.rank));
-
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
 
@@ -695,19 +789,18 @@ const getMRT_RowActionsColumnDef = (tableOptions) => {
 
 const MRT_GrabHandleButton = (_a) => {
     var _b, _c;
-    var { iconButtonProps, location, onDragEnd, onDragStart, table } = _a, rest = __rest(_a, ["iconButtonProps", "location", "onDragEnd", "onDragStart", "table"]);
+    var { location, table } = _a, rest = __rest(_a, ["location", "table"]);
     const { options: { icons: { DragHandleIcon }, localization, }, } = table;
-    const _iconButtonProps = Object.assign(Object.assign({}, iconButtonProps), rest);
-    return (jsx(Tooltip, Object.assign({}, getCommonTooltipProps('top'), { title: (_b = _iconButtonProps === null || _iconButtonProps === void 0 ? void 0 : _iconButtonProps.title) !== null && _b !== void 0 ? _b : localization.move, children: jsx(IconButton, Object.assign({ "aria-label": (_c = _iconButtonProps.title) !== null && _c !== void 0 ? _c : localization.move, disableRipple: true, draggable: "true", size: "small" }, _iconButtonProps, { onClick: (e) => {
+    return (jsx(Tooltip, Object.assign({}, getCommonTooltipProps('top'), { title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.move, children: jsx(IconButton, Object.assign({ "aria-label": (_c = rest.title) !== null && _c !== void 0 ? _c : localization.move, disableRipple: true, draggable: "true", size: "small" }, rest, { onClick: (e) => {
                 var _a;
                 e.stopPropagation();
-                (_a = _iconButtonProps === null || _iconButtonProps === void 0 ? void 0 : _iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(_iconButtonProps, e);
-            }, onDragEnd: onDragEnd, onDragStart: onDragStart, sx: (theme) => (Object.assign({ '&:active': {
+                (_a = rest === null || rest === void 0 ? void 0 : rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest, e);
+            }, sx: (theme) => (Object.assign({ '&:active': {
                     cursor: 'grabbing',
                 }, '&:hover': {
                     backgroundColor: 'transparent',
                     opacity: 1,
-                }, cursor: 'grab', m: '0 -0.1rem', opacity: location === 'row' ? 1 : 0.3, p: '2px', transition: 'all 150ms ease-in-out' }, parseFromValuesOrFunc(_iconButtonProps === null || _iconButtonProps === void 0 ? void 0 : _iconButtonProps.sx, theme))), title: undefined, children: jsx(DragHandleIcon, {}) })) })));
+                }, cursor: 'grab', m: '0 -0.1rem', opacity: location === 'row' ? 1 : 0.5, p: '2px', transition: 'all 150ms ease-in-out' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), title: undefined, children: jsx(DragHandleIcon, {}) })) })));
 };
 
 const MRT_TableBodyRowGrabHandle = (_a) => {
@@ -734,7 +827,7 @@ const MRT_TableBodyRowGrabHandle = (_a) => {
         table.setDraggingRow(null);
         table.setHoveredRow(null);
     };
-    return (jsx(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, location: "row", onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table }));
+    return (jsx(MRT_GrabHandleButton, Object.assign({}, iconButtonProps, { location: "row", onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })));
 };
 
 const getMRT_RowDragColumnDef = (tableOptions) => {
@@ -898,36 +991,25 @@ const getMRT_RowPinningColumnDef = (tableOptions) => {
 const MRT_SelectCheckbox = (_a) => {
     var _b;
     var { row, staticRowIndex, table } = _a, rest = __rest(_a, ["row", "staticRowIndex", "table"]);
-    const { getState, options: { enableMultiRowSelection, enableRowPinning, localization, muiSelectAllCheckboxProps, muiSelectCheckboxProps, rowPinningDisplayMode, selectAllMode, }, } = table;
+    const { getState, options: { enableMultiRowSelection, enableRowPinning, localization, muiSelectAllCheckboxProps, muiSelectCheckboxProps, rowPinningDisplayMode, selectAllMode, }, refs: { lastSelectedRowId }, } = table;
     const { density, isLoading } = getState();
     const selectAll = !row;
-    const checkboxProps = Object.assign(Object.assign({}, (!row
-        ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
-        : parseFromValuesOrFunc(muiSelectCheckboxProps, {
-            row,
-            staticRowIndex,
-            table,
-        }))), rest);
     const isStickySelection = enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'));
     const allRowsSelected = selectAll
         ? selectAllMode === 'page'
             ? table.getIsAllPageRowsSelected()
             : table.getIsAllRowsSelected()
         : undefined;
-    const onSelectionChange = (event, row) => {
-        var _a;
-        if (row.getIsAllSubRowsSelected() && row.getCanSelectSubRows()) {
-            (_a = row.subRows) === null || _a === void 0 ? void 0 : _a.forEach((r) => r.toggleSelected(false));
-        }
-        row.getToggleSelectedHandler()(event);
-        if (isStickySelection) {
-            row.pin(!row.getIsPinned() && event.target.checked
-                ? (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('bottom'))
-                    ? 'bottom'
-                    : 'top'
-                : false);
-        }
-    };
+    const isChecked = selectAll
+        ? allRowsSelected
+        : getIsRowSelected({ row, table });
+    const checkboxProps = Object.assign(Object.assign({}, (selectAll
+        ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
+        : parseFromValuesOrFunc(muiSelectCheckboxProps, {
+            row,
+            table,
+        }))), rest);
+    const onSelectionChange = getMRT_RowSelectionHandler();
     const onSelectAllChange = (event) => {
         selectAllMode === 'all'
             ? table.getToggleAllRowsSelectedHandler()(event)
@@ -935,16 +1017,19 @@ const MRT_SelectCheckbox = (_a) => {
         if (isStickySelection) {
             table.setRowPinning({ bottom: [], top: [] });
         }
+        lastSelectedRowId.current = null;
     };
     const commonProps = Object.assign(Object.assign({ 'aria-label': selectAll
             ? localization.toggleSelectAll
-            : localization.toggleSelectRow, checked: selectAll ? allRowsSelected : getIsRowSelected({ row, table }), disabled: isLoading || (row && !row.getCanSelect()) || (row === null || row === void 0 ? void 0 : row.id) === 'mrt-row-create', inputProps: {
+            : localization.toggleSelectRow, checked: isChecked, disabled: isLoading || (row && !row.getCanSelect()) || (row === null || row === void 0 ? void 0 : row.id) === 'mrt-row-create', inputProps: {
             'aria-label': selectAll
                 ? localization.toggleSelectAll
                 : localization.toggleSelectRow,
         }, onChange: (event) => {
             event.stopPropagation();
-            row ? onSelectionChange(event, row) : onSelectAllChange(event);
+            row
+                ? onSelectionChange({ event, row, staticRowIndex, table })
+                : onSelectAllChange(event);
         }, size: (density === 'compact' ? 'small' : 'medium') }, checkboxProps), { onClick: (e) => {
             var _a;
             e.stopPropagation();
@@ -952,8 +1037,8 @@ const MRT_SelectCheckbox = (_a) => {
         }, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.5rem', m: density !== 'compact' ? '-0.4rem' : undefined, width: density === 'compact' ? '1.75rem' : '2.5rem', zIndex: 0 }, parseFromValuesOrFunc(checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx, theme))), title: undefined });
     return (jsx(Tooltip, Object.assign({}, getCommonTooltipProps(), { title: (_b = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _b !== void 0 ? _b : (selectAll
             ? localization.toggleSelectAll
-            : localization.toggleSelectRow), children: enableMultiRowSelection === false ? (jsx(Radio, Object.assign({}, commonProps))) : (jsx(Checkbox, Object.assign({ indeterminate: selectAll
-                ? table.getIsSomeRowsSelected() && !allRowsSelected
+            : localization.toggleSelectRow), children: enableMultiRowSelection === false ? (jsx(Radio, Object.assign({}, commonProps))) : (jsx(Checkbox, Object.assign({ indeterminate: !isChecked && selectAll
+                ? table.getIsSomeRowsSelected()
                 : (row === null || row === void 0 ? void 0 : row.getIsSomeSelected()) && row.getCanSelectSubRows() }, commonProps))) })));
 };
 
@@ -1014,6 +1099,7 @@ const MRT_Localization_EN = {
     changeSearchMode: 'Change search mode',
     clearFilter: 'Clear filter',
     clearSearch: 'Clear search',
+    clearSelection: 'Clear selection',
     clearSort: 'Clear sort',
     clickToCopy: 'Click to copy',
     copy: 'Copy',
@@ -1121,7 +1207,7 @@ const MRT_DefaultDisplayColumn = {
 };
 const useMRT_TableOptions = (_a) => {
     var _b;
-    var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeDirection, columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableColumnVirtualization, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFacetedValues = false, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableRowVirtualization, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionCreatingRow = 'top', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberDisplayMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeDirection", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableColumnVirtualization", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFacetedValues", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableRowVirtualization", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "paginationDisplayMode", "positionActionsColumn", "positionCreatingRow", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberDisplayMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
+    var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeDirection, columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBatchRowSelection = true, enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableColumnVirtualization, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFacetedValues = false, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableRowVirtualization, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionCreatingRow = 'top', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberDisplayMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeDirection", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBatchRowSelection", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableColumnVirtualization", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFacetedValues", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableRowVirtualization", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "paginationDisplayMode", "positionActionsColumn", "positionCreatingRow", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberDisplayMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
     const theme = useTheme();
     icons = useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
     localization = useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
@@ -1162,6 +1248,7 @@ const useMRT_TableOptions = (_a) => {
         defaultColumn,
         defaultDisplayColumn,
         editDisplayMode,
+        enableBatchRowSelection,
         enableBottomToolbar,
         enableColumnActions,
         enableColumnFilters,
@@ -1244,7 +1331,6 @@ const useMRT_Effects = (table) => {
     const totalColumnCount = table.options.columns.length;
     const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length;
     const rerender = useReducer(() => ({}), {})[1];
-    const isMounted = useRef(false);
     const initialBodyHeight = useRef();
     const previousTop = useRef();
     useEffect(() => {
@@ -1252,11 +1338,12 @@ const useMRT_Effects = (table) => {
             initialBodyHeight.current = document.body.style.height;
         }
     }, []);
+    //hide scrollbars when table is in full screen mode, preserve body scroll position after full screen exit
     useEffect(() => {
-        if (isMounted && typeof window !== 'undefined') {
+        if (typeof window !== 'undefined') {
             if (isFullScreen) {
                 previousTop.current = document.body.getBoundingClientRect().top; //save scroll position
-                document.body.style.height = '100vh'; //hide page scrollbars when table is in full screen mode
+                document.body.style.height = '100dvh'; //hide page scrollbars when table is in full screen mode
             }
             else {
                 document.body.style.height = initialBodyHeight.current;
@@ -1269,8 +1356,13 @@ const useMRT_Effects = (table) => {
                 });
             }
         }
-        isMounted.current = true;
     }, [isFullScreen]);
+    //recalculate column order when columns change or features are toggled on/off
+    useEffect(() => {
+        if (totalColumnCount !== columnOrder.length) {
+            table.setColumnOrder(getDefaultColumnOrderIds(table.options));
+        }
+    }, [totalColumnCount]);
     //if page index is out of bounds, set it to the last page
     useEffect(() => {
         if (!enablePagination || isLoading || showSkeletons)
@@ -1298,6 +1390,7 @@ const useMRT_Effects = (table) => {
             table.setSorting(() => appliedSort.current || []);
         }
     }, [globalFilter]);
+    //fix pinned row top style when density changes
     useEffect(() => {
         if (enableRowPinning && getIsSomeRowsPinned()) {
             setTimeout(() => {
@@ -1305,12 +1398,6 @@ const useMRT_Effects = (table) => {
             }, 150);
         }
     }, [density]);
-    //recalculate column order when columns change or features are toggled on/off
-    useEffect(() => {
-        if (totalColumnCount !== columnOrder.length) {
-            table.setColumnOrder(getDefaultColumnOrderIds(table.options));
-        }
-    }, [totalColumnCount]);
 };
 
 /**
@@ -1320,6 +1407,7 @@ const useMRT_Effects = (table) => {
  */
 const useMRT_TableInstance = (definedTableOptions) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10;
+    const lastSelectedRowId = useRef(null);
     const actionCellRef = useRef(null);
     const bottomToolbarRef = useRef(null);
     const editInputRefs = useRef({});
@@ -1446,6 +1534,7 @@ const useMRT_TableInstance = (definedTableOptions) => {
         bottomToolbarRef,
         editInputRefs,
         filterInputRefs,
+        lastSelectedRowId,
         searchInputRef,
         tableContainerRef,
         tableFooterRef,
@@ -1601,71 +1690,26 @@ const useMRT_RowVirtualizer = (table, rows) => {
 };
 
 const useMRT_Rows = (table, pinnedRowIds = []) => {
-    const { getBottomRows, getCenterRows, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { createDisplayMode, enableGlobalFilterRankedResults, enablePagination, enableRowPinning, manualExpanding, manualFiltering, manualGrouping, manualPagination, manualSorting, positionCreatingRow, rowPinningDisplayMode, }, } = table;
+    const { getRowModel, getState, options: { data, enableGlobalFilterRankedResults, positionCreatingRow }, } = table;
     const { creatingRow, expanded, globalFilter, pagination, rowPinning, sorting, } = getState();
-    const shouldRankRows = useMemo(() => getCanRankRows(table) &&
-        !Object.values(sorting).some(Boolean) &&
-        globalFilter, [
+    const rows = useMemo(() => getMRT_Rows(table, pinnedRowIds), [
+        creatingRow,
+        data,
         enableGlobalFilterRankedResults,
         expanded,
+        getRowModel().rows,
         globalFilter,
-        manualExpanding,
-        manualFiltering,
-        manualGrouping,
-        manualSorting,
-        sorting,
-    ]);
-    const rows = useMemo(() => {
-        let rows = [];
-        if (!shouldRankRows) {
-            rows =
-                !enableRowPinning || (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))
-                    ? getRowModel().rows
-                    : getCenterRows();
-        }
-        else {
-            rows = getPrePaginationRowModel().rows.sort((a, b) => rankGlobalFuzzy(a, b));
-            if (enablePagination && !manualPagination) {
-                const start = pagination.pageIndex * pagination.pageSize;
-                rows = rows.slice(start, start + pagination.pageSize);
-            }
-        }
-        if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))) {
-            rows = [
-                ...getTopRows().filter((row) => !pinnedRowIds.includes(row.id)),
-                ...rows,
-                ...getBottomRows().filter((row) => !pinnedRowIds.includes(row.id)),
-            ];
-        }
-        if (positionCreatingRow !== undefined &&
-            creatingRow &&
-            createDisplayMode === 'row') {
-            const creatingRowIndex = !isNaN(+positionCreatingRow)
-                ? +positionCreatingRow
-                : positionCreatingRow === 'top'
-                    ? 0
-                    : rows.length;
-            rows = [
-                ...rows.slice(0, creatingRowIndex),
-                creatingRow,
-                ...rows.slice(creatingRowIndex),
-            ];
-        }
-        return rows;
-    }, [
-        creatingRow,
         pagination.pageIndex,
         pagination.pageSize,
         positionCreatingRow,
         rowPinning,
-        shouldRankRows ? getPrePaginationRowModel().rows : getRowModel().rows,
-        shouldRankRows,
+        sorting,
     ]);
     return rows;
 };
 
 const allowedTypes = ['string', 'number'];
-const MRT_TableBodyCellValue = ({ cell, rowRef, staticRowIndex, table, }) => {
+const MRT_TableBodyCellValue = ({ cell, rowRef, staticColumnIndex, staticRowIndex, table, }) => {
     var _a, _b, _c;
     const { getState, options: { enableFilterMatchHighlighting }, } = table;
     const { column, row } = cell;
@@ -1728,6 +1772,7 @@ const MRT_TableBodyCellValue = ({ cell, rowRef, staticRowIndex, table, }) => {
             renderedCellValue,
             row,
             rowRef,
+            staticColumnIndex,
             staticRowIndex,
             table,
         });
@@ -2014,6 +2059,7 @@ const MRT_TableBodyCell = (_a) => {
                     renderedCellValue: cell.renderValue(),
                     row,
                     rowRef,
+                    staticColumnIndex,
                     staticRowIndex,
                     table,
                 })) : isCreating || isEditing ? (jsx(MRT_EditCellTextField, { cell: cell, table: table })) : showClickToCopyButton && columnDef.enableClickToCopy !== false ? (jsx(MRT_CopyButton, { cell: cell, table: table, children: jsx(MRT_TableBodyCellValue, Object.assign({}, cellValueProps)) })) : (jsx(MRT_TableBodyCellValue, Object.assign({}, cellValueProps))), cell.getIsGrouped() && !columnDef.GroupedCell && (jsxs(Fragment, { children: [" (", (_f = row.subRows) === null || _f === void 0 ? void 0 : _f.length, ")"] }))] })) })));
@@ -2054,8 +2100,9 @@ const MRT_TableDetailPanel = (_a) => {
                     : undefined, width: `100%` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: enableRowVirtualization ? (row.getIsExpanded() && DetailPanel) : (jsx(Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: DetailPanel })) })) })));
 };
 
-const MRT_TableBodyRow = ({ columnVirtualizer, numRows, pinnedRowIds, row, rowVirtualizer, staticRowIndex, table, virtualRow, }) => {
-    var _a, _b, _c, _d;
+const MRT_TableBodyRow = (_a) => {
+    var _b, _c, _d, _f;
+    var { columnVirtualizer, numRows, pinnedRowIds, row, rowVirtualizer, staticRowIndex, table, virtualRow } = _a, rest = __rest(_a, ["columnVirtualizer", "numRows", "pinnedRowIds", "row", "rowVirtualizer", "staticRowIndex", "table", "virtualRow"]);
     const theme = useTheme();
     const { getState, options: { enableRowOrdering, enableRowPinning, enableStickyFooter, enableStickyHeader, layoutMode, memoMode, muiTableBodyRowProps, renderDetailPanel, rowPinningDisplayMode, }, refs: { tableFooterRef, tableHeadRef }, setHoveredRow, } = table;
     const { density, draggingColumn, draggingRow, editingCell, editingRow, hoveredRow, isFullScreen, rowPinning, } = getState();
@@ -2065,11 +2112,11 @@ const MRT_TableBodyRow = ({ columnVirtualizer, numRows, pinnedRowIds, row, rowVi
     const isRowPinned = enableRowPinning && row.getIsPinned();
     const isDraggingRow = (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id;
     const isHoveredRow = (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id;
-    const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
+    const tableRowProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableBodyRowProps, {
         row,
         staticRowIndex,
         table,
-    });
+    })), rest);
     const [bottomPinnedIndex, topPinnedIndex] = useMemo(() => {
         if (!enableRowPinning ||
             !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) ||
@@ -2082,14 +2129,14 @@ const MRT_TableBodyRow = ({ columnVirtualizer, numRows, pinnedRowIds, row, rowVi
         ];
     }, [pinnedRowIds, rowPinning]);
     const tableHeadHeight = ((enableStickyHeader || isFullScreen) &&
-        ((_a = tableHeadRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight)) ||
+        ((_b = tableHeadRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)) ||
         0;
-    const tableFooterHeight = (enableStickyFooter && ((_b = tableFooterRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)) || 0;
+    const tableFooterHeight = (enableStickyFooter && ((_c = tableFooterRef.current) === null || _c === void 0 ? void 0 : _c.clientHeight)) || 0;
     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
-    parseInt((_d = (_c = tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.style) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : sx === null || sx === void 0 ? void 0 : sx.height, 10) || undefined;
+    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) => {
         if (enableRowOrdering && draggingRow) {
@@ -2279,8 +2326,9 @@ const MRT_TableFooterRow = (_a) => {
     // if no content in row, skip row
     if (!((_b = footerGroup.headers) === null || _b === void 0 ? void 0 : _b.some((header) => (typeof header.column.columnDef.footer === 'string' &&
         !!header.column.columnDef.footer) ||
-        header.column.columnDef.Footer)))
+        header.column.columnDef.Footer))) {
         return null;
+    }
     const tableRowProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterRowProps, {
         footerGroup,
         table,
@@ -2522,7 +2570,7 @@ const MRT_FilterOptionMenu = (_a) => {
 const MRT_ColumnActionMenu = (_a) => {
     var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     var { anchorEl, header, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "header", "setAnchorEl", "table"]);
-    const { getState, getAllLeafColumns, options: { columnFilterDisplayMode, columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnPinning, enableColumnResizing, enableGrouping, enableHiding, enableSorting, enableSortingRemoval, icons: { ClearAllIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, RestartAltIcon, SortIcon, ViewColumnIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnFilterFns, setColumnOrder, setColumnSizingInfo, setShowColumnFilters, } = table;
+    const { getAllLeafColumns, getState, options: { columnFilterDisplayMode, columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnPinning, enableColumnResizing, enableGrouping, enableHiding, enableSorting, enableSortingRemoval, icons: { ClearAllIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, RestartAltIcon, SortIcon, ViewColumnIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnFilterFns, setColumnOrder, setColumnSizingInfo, setShowColumnFilters, } = table;
     const { column } = header;
     const { columnDef } = column;
     const { columnSizing, columnVisibility, density, showColumnFilters } = getState();
@@ -2770,6 +2818,7 @@ const MRT_FilterTextField = (_a) => {
                 ? ((_a = column.getFilterValue()) === null || _a === void 0 ? void 0 : _a[rangeFilterIndex]) || ''
                 : (_b = column.getFilterValue()) !== null && _b !== void 0 ? _b : '';
     });
+    const [autocompleteValue, setAutocompleteValue] = useState(isAutocompleteFilter ? filterValue : null);
     const handleChangeDebounced = useCallback(debounce((newValue) => {
         if (isRangeFilter) {
             column.setFilterValue((old) => {
@@ -2796,6 +2845,10 @@ 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 handleAutocompleteChange = (newValue) => {
+        setAutocompleteValue(newValue);
+        handleChange(getValueAndLabel(newValue).value);
+    };
     const handleClear = () => {
         if (isMultiSelectFilter) {
             setFilterValue([]);
@@ -2916,10 +2969,10 @@ const MRT_FilterTextField = (_a) => {
                 } }))) : (filterVariant === null || filterVariant === void 0 ? void 0 : filterVariant.startsWith('date')) ? (jsx(DatePicker, Object.assign({}, commonDatePickerProps, datePickerProps, { slotProps: {
                     field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_r = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _r === void 0 ? void 0 : _r.field),
                     textField: Object.assign(Object.assign({}, commonTextFieldProps), (_s = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _s === void 0 ? void 0 : _s.textField),
-                } }))) : isAutocompleteFilter ? (jsx(Autocomplete, Object.assign({ freeSolo: true, getOptionLabel: (option) => getValueAndLabel(option).label, onChange: (_e, newValue) => handleChange(getValueAndLabel(newValue).value), options: (_t = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option) => getValueAndLabel(option))) !== null && _t !== void 0 ? _t : [] }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
+                } }))) : isAutocompleteFilter ? (jsx(Autocomplete, Object.assign({ freeSolo: true, getOptionLabel: (option) => getValueAndLabel(option).label, onChange: (_e, newValue) => handleAutocompleteChange(newValue), options: (_t = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option) => getValueAndLabel(option))) !== null && _t !== void 0 ? _t : [] }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
                     var _a;
                     return (jsx(TextField, Object.assign({}, builtinTextFieldProps, commonTextFieldProps, { InputProps: Object.assign(Object.assign({}, builtinTextFieldProps.InputProps), { startAdornment: (_a = commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.startAdornment }), inputProps: Object.assign(Object.assign({}, builtinTextFieldProps.inputProps), commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.inputProps), onChange: handleTextFieldChange, onClick: (e) => e.stopPropagation() })));
-                }, value: filterValue }))) : (jsx(TextField, Object.assign({ select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { SelectProps: Object.assign({ MenuProps: { disableScrollLock: true }, displayEmpty: true, multiple: isMultiSelectFilter, renderValue: isMultiSelectFilter
+                }, value: autocompleteValue }))) : (jsx(TextField, Object.assign({ select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { SelectProps: Object.assign({ MenuProps: { disableScrollLock: true }, displayEmpty: true, multiple: isMultiSelectFilter, renderValue: isMultiSelectFilter
                         ? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder })) : (jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' }, children: selected === null || selected === void 0 ? void 0 : selected.map((value) => {
                                 const selectedValue = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.find((option) => getValueAndLabel(option).value === value);
                                 return (jsx(Chip, { label: getValueAndLabel(selectedValue).label }, value));
@@ -3119,7 +3172,7 @@ const MRT_TableHeadCellGrabHandle = (_a) => {
         setDraggingColumn(null);
         setHoveredColumn(null);
     };
-    return (jsx(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table }));
+    return (jsx(MRT_GrabHandleButton, Object.assign({}, iconButtonProps, { onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })));
 };
 
 const MRT_TableHeadCellResizeHandle = (_a) => {
@@ -3341,7 +3394,7 @@ const MRT_TableHeadCell = (_a) => {
                                         whiteSpace: ((_h = (_g = columnDef.header) === null || _g === void 0 ? void 0 : _g.length) !== null && _h !== void 0 ? _h : 0) < 20
                                             ? 'nowrap'
                                             : 'normal',
-                                    }, title: columnDefType === 'data' ? columnDef.header : undefined, children: HeaderElement }), column.getCanFilter() && (jsx(MRT_TableHeadCellFilterLabel, { header: header, table: table })), column.getCanSort() && (jsx(MRT_TableHeadCellSortLabel, { header: header, table: table }))] }), columnDefType !== 'group' && (jsxs(Box, { className: "Mui-TableHeadCell-Content-Actions", sx: {
+                                    }, children: HeaderElement }), column.getCanFilter() && (jsx(MRT_TableHeadCellFilterLabel, { header: header, table: table })), column.getCanSort() && (jsx(MRT_TableHeadCellSortLabel, { header: header, table: table }))] }), columnDefType !== 'group' && (jsxs(Box, { className: "Mui-TableHeadCell-Content-Actions", sx: {
                                 whiteSpace: 'nowrap',
                             }, children: [showDragHandle && (jsx(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
                                         current: tableHeadCellRefs.current[column.id],
@@ -3372,7 +3425,7 @@ const MRT_TableHeadRow = (_a) => {
 const MRT_ToolbarAlertBanner = (_a) => {
     var _b, _c, _d;
     var { stackAlertBanner, table } = _a, rest = __rest(_a, ["stackAlertBanner", "table"]);
-    const { getPrePaginationRowModel, getState, options: { enableRowSelection, enableSelectAll, localization, muiToolbarAlertBannerChipProps, muiToolbarAlertBannerProps, positionToolbarAlertBanner, renderToolbarAlertBannerContent, rowCount, }, refs: { tablePaperRef }, } = table;
+    const { getFilteredSelectedRowModel, getPrePaginationRowModel, getState, options: { enableRowSelection, enableSelectAll, localization, manualPagination, muiToolbarAlertBannerChipProps, muiToolbarAlertBannerProps, positionToolbarAlertBanner, renderToolbarAlertBannerContent, rowCount, }, refs: { lastSelectedRowId, tablePaperRef }, } = table;
     const { density, grouping, rowSelection, showAlertBanner } = getState();
     const alertProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiToolbarAlertBannerProps, {
         table,
@@ -3380,10 +3433,14 @@ const MRT_ToolbarAlertBanner = (_a) => {
     const chipProps = parseFromValuesOrFunc(muiToolbarAlertBannerChipProps, {
         table,
     });
-    const selectedRowCount = useMemo(() => Object.values(rowSelection).filter(Boolean).length, [rowSelection]);
-    const selectedAlert = selectedRowCount > 0
-        ? (_c = (_b = localization.selectedCountOfRowCountRowsSelected) === null || _b === void 0 ? void 0 : _b.replace('{selectedCount}', selectedRowCount.toLocaleString())) === null || _c === void 0 ? void 0 : _c.replace('{rowCount}', (rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length).toString())
-        : null;
+    const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().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: () => {
+                    table.toggleAllRowsSelected(false);
+                    lastSelectedRowId.current = null;
+                }, 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;
@@ -3459,6 +3516,7 @@ const MRT_Table = (_a) => {
 };
 
 const MRT_TableLoadingOverlay = (_a) => {
+    var _b;
     var { table } = _a, rest = __rest(_a, ["table"]);
     const { options: { localization, muiCircularProgressProps }, } = table;
     const circularProgressProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiCircularProgressProps, { table })), rest);
@@ -3474,8 +3532,8 @@ const MRT_TableLoadingOverlay = (_a) => {
             right: 0,
             top: 0,
             width: '100%',
-            zIndex: 2,
-        }), children: jsx(CircularProgress, Object.assign({ "aria-label": localization.noRecordsToDisplay, id: "mrt-progress" }, circularProgressProps)) }));
+            zIndex: 3,
+        }), children: (_b = circularProgressProps === null || circularProgressProps === void 0 ? void 0 : circularProgressProps.Component) !== null && _b !== void 0 ? _b : (jsx(CircularProgress, Object.assign({ "aria-label": localization.noRecordsToDisplay, id: "mrt-progress" }, circularProgressProps))) }));
 };
 
 const MRT_CellActionMenu = (_a) => {
@@ -3739,7 +3797,7 @@ const MRT_ColumnPinningButtons = (_a) => {
 
 const MRT_ShowHideColumnsMenuItems = (_a) => {
     var _b;
-    var { allColumns, column, hoveredColumn, setHoveredColumn, table } = _a, rest = __rest(_a, ["allColumns", "column", "hoveredColumn", "setHoveredColumn", "table"]);
+    var { allColumns, column, hoveredColumn, isNestedColumns, setHoveredColumn, table } = _a, rest = __rest(_a, ["allColumns", "column", "hoveredColumn", "isNestedColumns", "setHoveredColumn", "table"]);
     const { getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, }, setColumnOrder, } = table;
     const { columnOrder } = getState();
     const { columnDef } = column;
@@ -3794,7 +3852,7 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
                         gap: '8px',
                     }, children: [columnDefType !== 'group' &&
                             enableColumnOrdering &&
-                            !allColumns.some((col) => col.columnDef.columnDefType === 'group') &&
+                            !isNestedColumns &&
                             (columnDef.enableColumnOrdering !== false ? (jsx(MRT_GrabHandleButton, { onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })) : (jsx(Box, { sx: { width: '28px' } }))), enableColumnPinning &&
                             (column.getCanPin() ? (jsx(MRT_ColumnPinningButtons, { column: column, table: table })) : (jsx(Box, { sx: { width: '70px' } }))), enableHiding ? (jsx(FormControlLabel, { checked: switchChecked, componentsProps: {
                                 typography: {
@@ -3803,7 +3861,7 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
                                         opacity: columnDefType !== 'display' ? 1 : 0.5,
                                     },
                                 },
-                            }, control: jsx(Tooltip, Object.assign({}, getCommonTooltipProps(), { title: localization.toggleVisibility, children: jsx(Switch, {}) })), disabled: !column.getCanHide(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (jsx(Typography, { sx: { alignSelf: 'center' }, children: columnDef.header }))] }) })), (_b = column.columns) === null || _b === void 0 ? void 0 : _b.map((c, i) => (jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, setHoveredColumn: setHoveredColumn, table: table }, `${i}-${c.id}`)))] }));
+                            }, control: jsx(Tooltip, Object.assign({}, getCommonTooltipProps(), { title: localization.toggleVisibility, children: jsx(Switch, {}) })), disabled: !column.getCanHide(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (jsx(Typography, { sx: { alignSelf: 'center' }, children: columnDef.header }))] }) })), (_b = column.columns) === null || _b === void 0 ? void 0 : _b.map((c, i) => (jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, isNestedColumns: isNestedColumns, setHoveredColumn: setHoveredColumn, table: table }, `${i}-${c.id}`)))] }));
 };
 
 const MRT_ShowHideColumnsMenu = (_a) => {
@@ -3834,6 +3892,7 @@ const MRT_ShowHideColumnsMenu = (_a) => {
         getLeftLeafColumns(),
         getRightLeafColumns(),
     ]);
+    const isNestedColumns = allColumns.some((col) => col.columnDef.columnDefType === 'group');
     const [hoveredColumn, setHoveredColumn] = useState(null);
     const theme = useTheme();
     const { menuBackgroundColor } = getMRTTheme(table, theme);
@@ -3847,7 +3906,7 @@ const MRT_ShowHideColumnsMenu = (_a) => {
                     justifyContent: 'space-between',
                     p: '0.5rem',
                     pt: 0,
-                }, children: [enableHiding && (jsx(Button, { disabled: !getIsSomeColumnsVisible(), onClick: () => handleToggleAllColumns(false), children: localization.hideAll })), enableColumnOrdering && (jsx(Button, { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options, true)), children: localization.resetOrder })), enableColumnPinning && (jsx(Button, { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true), children: localization.unpinAll })), enableHiding && (jsx(Button, { disabled: getIsAllColumnsVisible(), onClick: () => handleToggleAllColumns(true), children: localization.showAll }))] }), jsx(Divider, {}), allColumns.map((column, index) => (jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, setHoveredColumn: setHoveredColumn, table: table }, `${index}-${column.id}`)))] })));
+                }, children: [enableHiding && (jsx(Button, { disabled: !getIsSomeColumnsVisible(), onClick: () => handleToggleAllColumns(false), children: localization.hideAll })), enableColumnOrdering && (jsx(Button, { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options, true)), children: localization.resetOrder })), enableColumnPinning && (jsx(Button, { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true), children: localization.unpinAll })), enableHiding && (jsx(Button, { disabled: getIsAllColumnsVisible(), onClick: () => handleToggleAllColumns(true), children: localization.showAll }))] }), jsx(Divider, {}), allColumns.map((column, index) => (jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, isNestedColumns: isNestedColumns, setHoveredColumn: setHoveredColumn, table: table }, `${index}-${column.id}`)))] })));
 };
 
 const MRT_ShowHideColumnsButton = (_a) => {
@@ -4064,5 +4123,5 @@ const MaterialReactTable = (props) => {
     return jsx(MRT_TablePaper, { table: table });
 };
 
-export { MRT_ActionMenuItem, MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TableLoadingOverlay, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, createMRTColumnHelper, createRow, defaultDisplayColumnProps, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsFirstColumn, getIsFirstRightPinnedColumn, getIsLastColumn, getIsLastLeftPinnedColumn, getIsRowSelected, getLeadingDisplayColumnIds, getTotalRight, getTrailingDisplayColumnIds, isCellEditable, mrtFilterOptions, openEditingCell, prepareColumns, rankGlobalFuzzy, reorderColumn, showRowActionsColumn, showRowDragColumn, showRowExpandColumn, showRowNumbersColumn, showRowPinningColumn, showRowSelectionColumn, showRowSpacerColumn, useMRT_ColumnVirtualizer, useMRT_Effects, useMRT_RowVirtualizer, useMRT_Rows, useMRT_TableInstance, useMRT_TableOptions, useMaterialReactTable };
+export { MRT_ActionMenuItem, MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TableLoadingOverlay, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, createMRTColumnHelper, createRow, defaultDisplayColumnProps, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsFirstColumn, getIsFirstRightPinnedColumn, getIsLastColumn, getIsLastLeftPinnedColumn, getIsRankingRows, getIsRowSelected, getLeadingDisplayColumnIds, getMRT_RowSelectionHandler, getMRT_Rows, getTotalRight, getTrailingDisplayColumnIds, isCellEditable, mrtFilterOptions, openEditingCell, prepareColumns, rankGlobalFuzzy, reorderColumn, showRowActionsColumn, showRowDragColumn, showRowExpandColumn, showRowNumbersColumn, showRowPinningColumn, showRowSelectionColumn, showRowSpacerColumn, useMRT_ColumnVirtualizer, useMRT_Effects, useMRT_RowVirtualizer, useMRT_Rows, useMRT_TableInstance, useMRT_TableOptions, useMaterialReactTable };
 //# sourceMappingURL=index.esm.js.map