material-react-table 2.4.1 → 2.5.1

package/dist/index.js

@@ -17,12 +17,13 @@ var Box = require('@mui/material/Box');
 var reactTable = require('@tanstack/react-table');
 var reactVirtual = require('@tanstack/react-virtual');
 var highlightWords = require('highlight-words');
-var IconButton = require('@mui/material/IconButton');
-var Tooltip = require('@mui/material/Tooltip');
 var Button = require('@mui/material/Button');
+var Tooltip = require('@mui/material/Tooltip');
 var MenuItem = require('@mui/material/MenuItem');
 var TextField = require('@mui/material/TextField');
 var Collapse = require('@mui/material/Collapse');
+var Stack = require('@mui/material/Stack');
+var IconButton = require('@mui/material/IconButton');
 var CircularProgress = require('@mui/material/CircularProgress');
 var ListItemIcon = require('@mui/material/ListItemIcon');
 var Menu = require('@mui/material/Menu');
@@ -75,7 +76,6 @@ var DateTimePicker = require('@mui/x-date-pickers/DateTimePicker');
 var TimePicker = require('@mui/x-date-pickers/TimePicker');
 var FormHelperText = require('@mui/material/FormHelperText');
 var Slider = require('@mui/material/Slider');
-var Stack = require('@mui/material/Stack');
 var Grow = require('@mui/material/Grow');
 var Popover = require('@mui/material/Popover');
 var Divider = require('@mui/material/Divider');
@@ -108,12 +108,13 @@ var Skeleton__default = /*#__PURE__*/_interopDefaultLegacy(Skeleton);
 var TableCell__default = /*#__PURE__*/_interopDefaultLegacy(TableCell);
 var Box__default = /*#__PURE__*/_interopDefaultLegacy(Box);
 var highlightWords__default = /*#__PURE__*/_interopDefaultLegacy(highlightWords);
-var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
-var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
+var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
 var MenuItem__default = /*#__PURE__*/_interopDefaultLegacy(MenuItem);
 var TextField__default = /*#__PURE__*/_interopDefaultLegacy(TextField);
 var Collapse__default = /*#__PURE__*/_interopDefaultLegacy(Collapse);
+var Stack__default = /*#__PURE__*/_interopDefaultLegacy(Stack);
+var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
 var CircularProgress__default = /*#__PURE__*/_interopDefaultLegacy(CircularProgress);
 var ListItemIcon__default = /*#__PURE__*/_interopDefaultLegacy(ListItemIcon);
 var Menu__default = /*#__PURE__*/_interopDefaultLegacy(Menu);
@@ -160,7 +161,6 @@ var Chip__default = /*#__PURE__*/_interopDefaultLegacy(Chip);
 var InputAdornment__default = /*#__PURE__*/_interopDefaultLegacy(InputAdornment);
 var FormHelperText__default = /*#__PURE__*/_interopDefaultLegacy(FormHelperText);
 var Slider__default = /*#__PURE__*/_interopDefaultLegacy(Slider);
-var Stack__default = /*#__PURE__*/_interopDefaultLegacy(Stack);
 var Grow__default = /*#__PURE__*/_interopDefaultLegacy(Grow);
 var Popover__default = /*#__PURE__*/_interopDefaultLegacy(Popover);
 var Divider__default = /*#__PURE__*/_interopDefaultLegacy(Divider);
@@ -476,7 +476,7 @@ const getCommonToolbarStyles = ({ table, theme, }) => ({
 });
 
 const allowedTypes = ['string', 'number'];
-const MRT_TableBodyCellValue = ({ cell, table, }) => {
+const MRT_TableBodyCellValue = ({ cell, rowRef, staticRowIndex, table, }) => {
     var _a, _b, _c;
     const { getState, options: { enableFilterMatchHighlighting }, } = table;
     const { column, row } = cell;
@@ -538,51 +538,14 @@ const MRT_TableBodyCellValue = ({ cell, table, }) => {
             column,
             renderedCellValue,
             row,
+            rowRef,
+            staticRowIndex,
             table,
         });
     }
     return renderedCellValue;
 };
 
-const MRT_GrabHandleButton = (_a) => {
-    var _b, _c;
-    var { iconButtonProps, location, onDragEnd, onDragStart, table } = _a, rest = __rest(_a, ["iconButtonProps", "location", "onDragEnd", "onDragStart", "table"]);
-    const { options: { icons: { DragHandleIcon }, localization, }, } = table;
-    const _iconButtonProps = Object.assign(Object.assign({}, iconButtonProps), rest);
-    return (jsxRuntime.jsx(Tooltip__default["default"], { enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_b = _iconButtonProps === null || _iconButtonProps === void 0 ? void 0 : _iconButtonProps.title) !== null && _b !== void 0 ? _b : localization.move, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": (_c = _iconButtonProps.title) !== null && _c !== void 0 ? _c : localization.move, disableRipple: true, draggable: "true", size: "small" }, _iconButtonProps, { 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': {
-                    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: jsxRuntime.jsx(DragHandleIcon, {}) })) }));
-};
-
-const MRT_TableBodyRowGrabHandle = (_a) => {
-    var { row, rowRef, table } = _a, rest = __rest(_a, ["row", "rowRef", "table"]);
-    const { options: { muiRowDragHandleProps }, } = table;
-    const iconButtonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiRowDragHandleProps, {
-        row,
-        table,
-    })), rest);
-    const handleDragStart = (event) => {
-        var _a;
-        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragStart) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
-        event.dataTransfer.setDragImage(rowRef.current, 0, 0);
-        table.setDraggingRow(row);
-    };
-    const handleDragEnd = (event) => {
-        var _a;
-        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
-        table.setDraggingRow(null);
-        table.setHoveredRow(null);
-    };
-    return (jsxRuntime.jsx(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, location: "row", onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table }));
-};
-
 const MRT_CopyButton = (_a) => {
     var _b;
     var { cell, table } = _a, rest = __rest(_a, ["cell", "table"]);
@@ -701,7 +664,7 @@ const MRT_TableBodyCell = (_a) => {
     var _b, _c, _d, _e, _f;
     var { cell, measureElement, numRows, rowIndex, rowRef, table, virtualColumnIndex } = _a, rest = __rest(_a, ["cell", "measureElement", "numRows", "rowIndex", "rowRef", "table", "virtualColumnIndex"]);
     const theme = styles.useTheme();
-    const { getState, options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enableRowNumbers, layoutMode, muiSkeletonProps, muiTableBodyCellProps, rowNumberDisplayMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
+    const { getState, options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, layoutMode, muiSkeletonProps, muiTableBodyCellProps, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
     const { columnSizingInfo, creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
     const { column, row } = cell;
     const { columnDef } = column;
@@ -807,6 +770,10 @@ const MRT_TableBodyCell = (_a) => {
             setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
         }
     };
+    const cellValueProps = {
+        cell,
+        table,
+    };
     return (jsxRuntime.jsx(TableCell__default["default"], Object.assign({ "data-index": virtualColumnIndex, ref: (node) => {
             if (node) {
                 measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
@@ -842,19 +809,18 @@ const MRT_TableBodyCell = (_a) => {
             table,
             tableCellProps,
             theme,
-        })), draggingBorders)), children: (_b = tableCellProps.children) !== null && _b !== void 0 ? _b : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [cell.getIsPlaceholder() ? ((_d = (_c = columnDef.PlaceholderCell) === null || _c === void 0 ? void 0 : _c.call(columnDef, { cell, column, row, table })) !== null && _d !== void 0 ? _d : null) : showSkeletons !== false && (isLoading || showSkeletons) ? (jsxRuntime.jsx(Skeleton__default["default"], Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
-                    rowNumberDisplayMode === 'static' &&
-                    column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (jsxRuntime.jsx(MRT_TableBodyRowGrabHandle, { row: row, rowRef: rowRef, table: table })) : columnDefType === 'display' &&
-                    (column.id === 'mrt-row-select' ||
-                        column.id === 'mrt-row-expand' ||
+        })), draggingBorders)), children: (_b = tableCellProps.children) !== null && _b !== void 0 ? _b : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [cell.getIsPlaceholder() ? ((_d = (_c = columnDef.PlaceholderCell) === null || _c === void 0 ? void 0 : _c.call(columnDef, { cell, column, row, table })) !== null && _d !== void 0 ? _d : null) : showSkeletons !== false && (isLoading || showSkeletons) ? (jsxRuntime.jsx(Skeleton__default["default"], Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : columnDefType === 'display' &&
+                    (['mrt-row-expand', 'mrt-row-numbers', 'mrt-row-select'].includes(column.id) ||
                         !row.getIsGrouped()) ? ((_e = columnDef.Cell) === null || _e === void 0 ? void 0 : _e.call(columnDef, {
                     cell,
                     column,
                     renderedCellValue: cell.renderValue(),
                     row,
+                    rowRef,
+                    staticRowIndex: rowIndex,
                     table,
                 })) : isCreating || isEditing ? (jsxRuntime.jsx(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
-                    columnDef.enableClickToCopy !== false ? (jsxRuntime.jsx(MRT_CopyButton, { cell: cell, table: table, children: jsxRuntime.jsx(MRT_TableBodyCellValue, { cell: cell, table: table }) })) : (jsxRuntime.jsx(MRT_TableBodyCellValue, { cell: cell, table: table })), cell.getIsGrouped() && !columnDef.GroupedCell && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [" (", (_f = row.subRows) === null || _f === void 0 ? void 0 : _f.length, ")"] }))] })) })));
+                    columnDef.enableClickToCopy !== false ? (jsxRuntime.jsx(MRT_CopyButton, { cell: cell, table: table, children: jsxRuntime.jsx(MRT_TableBodyCellValue, Object.assign({}, cellValueProps)) })) : (jsxRuntime.jsx(MRT_TableBodyCellValue, Object.assign({}, cellValueProps))), cell.getIsGrouped() && !columnDef.GroupedCell && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [" (", (_f = row.subRows) === null || _f === void 0 ? void 0 : _f.length, ")"] }))] })) })));
 };
 const Memo_MRT_TableBodyCell = react.memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
 
@@ -891,6 +857,8 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRo
     const { density, draggingColumn, draggingRow, editingCell, editingRow, hoveredRow, isFullScreen, rowPinning, } = getState();
     const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
     const isPinned = 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, {
         row,
         staticRowIndex: rowIndex,
@@ -924,7 +892,7 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRo
     };
     const rowRef = react.useRef(null);
     const { baseBackgroundColor, pinnedRowBackgroundColor, selectedRowBackgroundColor, } = getMRTTheme(table, theme);
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(TableRow__default["default"], Object.assign({ "data-index": rowIndex, "data-pinned": !!isPinned || undefined, "data-selected": row.getIsSelected() || undefined, onDragEnter: handleDragEnter, ref: (node) => {
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(TableRow__default["default"], Object.assign({ "data-index": rowIndex, "data-pinned": !!isPinned || undefined, "data-selected": row.getIsSelected() || row.getIsAllSubRowsSelected() || undefined, onDragEnter: handleDragEnter, ref: (node) => {
                     if (node) {
                         rowRef.current = node;
                         measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
@@ -942,11 +910,7 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRo
                     }, backgroundColor: `${baseBackgroundColor} !important`, bottom: !virtualRow && bottomPinnedIndex !== undefined && isPinned
                         ? `${bottomPinnedIndex * rowHeight +
                             (enableStickyFooter ? tableFooterHeight - 1 : 0)}px`
-                        : undefined, boxSizing: 'border-box', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, opacity: isPinned
-                        ? 0.97
-                        : (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id || (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id
-                            ? 0.5
-                            : 1, position: virtualRow
+                        : undefined, boxSizing: 'border-box', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, opacity: isPinned ? 0.97 : isDraggingRow || isHoveredRow ? 0.5 : 1, position: virtualRow
                         ? 'absolute'
                         : (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) && isPinned
                             ? 'sticky'
@@ -969,7 +933,9 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRo
                             : cellOrVirtualCell;
                         const props = {
                             cell,
-                            measureElement: columnVirtualizer === null || columnVirtualizer === void 0 ? void 0 : columnVirtualizer.measureElement,
+                            measureElement: !isDraggingRow && !isHoveredRow
+                                ? columnVirtualizer === null || columnVirtualizer === void 0 ? void 0 : columnVirtualizer.measureElement
+                                : undefined,
                             numRows,
                             rowIndex,
                             rowRef,
@@ -1055,6 +1021,50 @@ const useMRT_ColumnVirtualizer = (table) => {
     return columnVirtualizer;
 };
 
+const MRT_GrabHandleButton = (_a) => {
+    var _b, _c;
+    var { iconButtonProps, location, onDragEnd, onDragStart, table } = _a, rest = __rest(_a, ["iconButtonProps", "location", "onDragEnd", "onDragStart", "table"]);
+    const { options: { icons: { DragHandleIcon }, localization, }, } = table;
+    const _iconButtonProps = Object.assign(Object.assign({}, iconButtonProps), rest);
+    return (jsxRuntime.jsx(Tooltip__default["default"], { enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_b = _iconButtonProps === null || _iconButtonProps === void 0 ? void 0 : _iconButtonProps.title) !== null && _b !== void 0 ? _b : localization.move, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": (_c = _iconButtonProps.title) !== null && _c !== void 0 ? _c : localization.move, disableRipple: true, draggable: "true", size: "small" }, _iconButtonProps, { 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': {
+                    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: jsxRuntime.jsx(DragHandleIcon, {}) })) }));
+};
+
+const MRT_TableBodyRowGrabHandle = (_a) => {
+    var { row, rowRef, table } = _a, rest = __rest(_a, ["row", "rowRef", "table"]);
+    const { options: { muiRowDragHandleProps }, } = table;
+    const iconButtonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiRowDragHandleProps, {
+        row,
+        table,
+    })), rest);
+    const handleDragStart = (event) => {
+        var _a;
+        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragStart) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
+        try {
+            event.dataTransfer.setDragImage(rowRef.current, 0, 0);
+        }
+        catch (e) {
+            console.error(e);
+        }
+        table.setDraggingRow(row);
+    };
+    const handleDragEnd = (event) => {
+        var _a;
+        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
+        table.setDraggingRow(null);
+        table.setHoveredRow(null);
+    };
+    return (jsxRuntime.jsx(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, location: "row", onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table }));
+};
+
 const MRT_RowPinButton = (_a) => {
     var { pinningPosition, row, table } = _a, rest = __rest(_a, ["pinningPosition", "row", "table"]);
     const { options: { icons: { CloseIcon, PushPinIcon }, localization, rowPinningDisplayMode, }, } = table;
@@ -1340,6 +1350,10 @@ const MRT_FilterOptionMenu = (_a) => {
                     column.setFilterValue('');
                     setFilterValue === null || setFilterValue === void 0 ? void 0 : setFilterValue('');
                 }
+                else if (currentFilterValue === ' ' &&
+                    emptyModes.includes(prevFilterMode)) {
+                    column.setFilterValue(undefined);
+                }
                 else {
                     column.setFilterValue(currentFilterValue); // perform new filter render
                 }
@@ -1564,40 +1578,55 @@ const MRT_ToggleRowActionMenuButton = (_a) => {
 
 const MRT_SelectCheckbox = (_a) => {
     var _b;
-    var { row, selectAll, table } = _a, rest = __rest(_a, ["row", "selectAll", "table"]);
+    var { row, selectAll, staticRowIndex, table } = _a, rest = __rest(_a, ["row", "selectAll", "staticRowIndex", "table"]);
     const { getState, options: { enableMultiRowSelection, enableRowPinning, localization, muiSelectAllCheckboxProps, muiSelectCheckboxProps, rowPinningDisplayMode, selectAllMode, }, } = table;
     const { density, isLoading } = getState();
     const checkboxProps = Object.assign(Object.assign({}, (!row
         ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
-        : parseFromValuesOrFunc(muiSelectCheckboxProps, { row, table }))), rest);
+        : 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 commonProps = Object.assign(Object.assign({ checked: selectAll ? allRowsSelected : row === null || row === void 0 ? void 0 : row.getIsSelected(), disabled: isLoading || (row && !row.getCanSelect()) || (row === null || row === void 0 ? void 0 : row.id) === 'mrt-row-create', inputProps: {
+    const onSelectionChange = (event, row) => {
+        var _a;
+        if (row.getIsAllSubRowsSelected()) {
+            (_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 onSelectAllChange = (event) => {
+        selectAllMode === 'all'
+            ? table.getToggleAllRowsSelectedHandler()(event)
+            : table.getToggleAllPageRowsSelectedHandler()(event);
+        if (isStickySelection) {
+            table.setRowPinning({ bottom: [], top: [] });
+        }
+    };
+    const commonProps = Object.assign(Object.assign({ 'aria-label': selectAll
+            ? localization.toggleSelectAll
+            : localization.toggleSelectRow, checked: selectAll
+            ? allRowsSelected
+            : (row === null || row === void 0 ? void 0 : row.getIsSelected()) || (row === null || row === void 0 ? void 0 : row.getIsAllSubRowsSelected()), 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
-                ? row.getToggleSelectedHandler()(event)
-                : selectAllMode === 'all'
-                    ? table.getToggleAllRowsSelectedHandler()(event)
-                    : table.getToggleAllPageRowsSelectedHandler()(event);
-            if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'))) {
-                if (row) {
-                    row.pin(!row.getIsPinned() && event.target.checked
-                        ? (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('bottom'))
-                            ? 'bottom'
-                            : 'top'
-                        : false);
-                }
-                else {
-                    table.setRowPinning({ bottom: [], top: [] });
-                }
-            }
+            row ? onSelectionChange(event, row) : onSelectAllChange(event);
         }, size: (density === 'compact' ? 'small' : 'medium') }, checkboxProps), { onClick: (e) => {
             var _a;
             e.stopPropagation();
@@ -1643,6 +1672,7 @@ const useMRT_DisplayColumns = (params) => {
         tableOptions.enableRowOrdering,
         tableOptions.enableRowSelection,
         tableOptions.enableSelectAll,
+        tableOptions.groupedColumnMode,
         tableOptions.localization,
         tableOptions.positionActionsColumn,
         tableOptions.renderDetailPanel,
@@ -1678,20 +1708,38 @@ function makeRowActionsColumn({ creatingRow, tableOptions }, order) {
     return null;
 }
 function makeRowExpandColumn({ grouping, tableOptions }, order) {
-    var _a, _b;
+    var _a, _b, _c;
     const id = 'mrt-row-expand';
     if (order.includes(id) &&
         showExpandColumn(tableOptions, (_b = (_a = tableOptions.state) === null || _a === void 0 ? void 0 : _a.grouping) !== null && _b !== void 0 ? _b : grouping)) {
-        return Object.assign({ Cell: ({ row, table }) => jsxRuntime.jsx(MRT_ExpandButton, { row: row, table: table }), Header: tableOptions.enableExpandAll
-                ? ({ table }) => jsxRuntime.jsx(MRT_ExpandAllButton, { table: table })
-                : undefined }, defaultDisplayColumnProps(tableOptions, id, 'expand'));
+        return Object.assign({ Cell: ({ cell, column, row, table }) => {
+                var _a, _b, _c;
+                const expandButtonProps = { row, table };
+                const subRowsLength = (_a = row.subRows) === null || _a === void 0 ? void 0 : _a.length;
+                if (tableOptions.groupedColumnMode === 'remove' &&
+                    row.groupingColumnId) {
+                    return (jsxRuntime.jsxs(Stack__default["default"], { alignItems: "center", flexDirection: "row", gap: "0.25rem", children: [jsxRuntime.jsx(MRT_ExpandButton, Object.assign({}, expandButtonProps)), jsxRuntime.jsx(Tooltip__default["default"], { enterDelay: 1000, enterNextDelay: 1000, placement: "right", title: table.getColumn(row.groupingColumnId).columnDef.header, children: jsxRuntime.jsx("span", { children: row.groupingValue }) }), !!subRowsLength && jsxRuntime.jsxs("span", { children: ["(", subRowsLength, ")"] })] }));
+                }
+                else {
+                    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MRT_ExpandButton, Object.assign({}, expandButtonProps)), (_c = (_b = column.columnDef).GroupedCell) === null || _c === void 0 ? void 0 : _c.call(_b, { cell, column, row, table })] }));
+                }
+            }, Header: tableOptions.enableExpandAll
+                ? ({ table }) => {
+                    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MRT_ExpandAllButton, { table: table }), tableOptions.groupedColumnMode === 'remove' &&
+                                grouping
+                                    .map((groupedColumnId) => table.getColumn(groupedColumnId).columnDef.header)
+                                    .join(', ')] }));
+                }
+                : undefined }, defaultDisplayColumnProps(tableOptions, id, 'expand', tableOptions.groupedColumnMode === 'remove'
+            ? (_c = tableOptions === null || tableOptions === void 0 ? void 0 : tableOptions.defaultColumn) === null || _c === void 0 ? void 0 : _c.size
+            : 60));
     }
     return null;
 }
 function makeRowSelectColumn({ tableOptions }, order) {
     const id = 'mrt-row-select';
     if (order.includes(id)) {
-        return Object.assign({ Cell: ({ row, table }) => jsxRuntime.jsx(MRT_SelectCheckbox, { row: row, table: table }), Header: tableOptions.enableSelectAll && tableOptions.enableMultiRowSelection
+        return Object.assign({ Cell: ({ row, staticRowIndex, table }) => (jsxRuntime.jsx(MRT_SelectCheckbox, { row: row, staticRowIndex: staticRowIndex, table: table })), Header: tableOptions.enableSelectAll && tableOptions.enableMultiRowSelection
                 ? ({ table }) => jsxRuntime.jsx(MRT_SelectCheckbox, { selectAll: true, table: table })
                 : undefined }, defaultDisplayColumnProps(tableOptions, id, 'select'));
     }
@@ -1700,7 +1748,12 @@ function makeRowSelectColumn({ tableOptions }, order) {
 function makeRowNumbersColumn({ tableOptions }, order) {
     const id = 'mrt-row-numbers';
     if (order.includes(id) || tableOptions.enableRowNumbers)
-        return Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => tableOptions.localization.rowNumber }, defaultDisplayColumnProps(tableOptions, id, 'rowNumbers'));
+        return Object.assign({ Cell: ({ row, staticRowIndex }) => {
+                var _a;
+                return ((_a = (tableOptions.rowNumberDisplayMode === 'static'
+                    ? staticRowIndex
+                    : row.index)) !== null && _a !== void 0 ? _a : 0) + 1;
+            }, Header: () => tableOptions.localization.rowNumber }, defaultDisplayColumnProps(tableOptions, id, 'rowNumbers'));
     return null;
 }
 const blankColProps = {
@@ -2769,16 +2822,12 @@ const MRT_FilterTextField = (_a) => {
                 } }))) : isAutocompleteFilter ? (jsxRuntime.jsx(Autocomplete__default["default"], 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) => {
                     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 })));
-                }, value: filterValue }))) : (jsxRuntime.jsx(TextField__default["default"], Object.assign({ SelectProps: {
-                    displayEmpty: true,
-                    multiple: isMultiSelectFilter,
-                    renderValue: isMultiSelectFilter
+                }, value: filterValue }))) : (jsxRuntime.jsx(TextField__default["default"], Object.assign({ select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { SelectProps: Object.assign({ displayEmpty: true, multiple: isMultiSelectFilter, renderValue: isMultiSelectFilter
                         ? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (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 === 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 (jsxRuntime.jsx(Chip__default["default"], { label: getValueAndLabel(selectedValue).label }, value));
                             }) }))
-                        : undefined,
-                }, onChange: handleTextFieldChange, select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { value: filterValue !== null && filterValue !== void 0 ? filterValue : '', children: (isSelectFilter || isMultiSelectFilter) && [
+                        : undefined }, commonTextFieldProps.SelectProps), onChange: handleTextFieldChange, value: filterValue !== null && filterValue !== void 0 ? 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"),
                     ...[
                         (_u = textFieldProps.children) !== null && _u !== void 0 ? _u : dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => {
@@ -2862,7 +2911,7 @@ const MRT_FilterRangeSlider = (_a) => {
                             }
                         },
                     },
-                }, sx: (theme) => (Object.assign({ m: 'auto', mt: !showChangeModeButton ? '10px' : '6px', px: '4px', width: 'calc(100% - 8px)' }, parseFromValuesOrFunc(sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.sx, theme))) })), showChangeModeButton ? (jsxRuntime.jsx(FormHelperText__default["default"], { sx: {
+                }, sx: (theme) => (Object.assign({ m: 'auto', minWidth: `${column.getSize() - 50}px`, mt: !showChangeModeButton ? '10px' : '6px', px: '4px', width: 'calc(100% - 8px)' }, parseFromValuesOrFunc(sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.sx, theme))) })), showChangeModeButton ? (jsxRuntime.jsx(FormHelperText__default["default"], { sx: {
                     fontSize: '0.75rem',
                     lineHeight: '0.8rem',
                     m: '-3px -6px',
@@ -2933,7 +2982,7 @@ const MRT_TableHeadCellFilterLabel = (_a) => {
                     //@ts-ignore
                     event.stopPropagation();
                     setAnchorEl(null);
-                }, onKeyDown: (event) => event.key === 'Enter' && setAnchorEl(null), open: !!anchorEl, transformOrigin: {
+                }, onKeyDown: (event) => event.key === 'Enter' && setAnchorEl(null), open: !!anchorEl, slotProps: { paper: { sx: { overflow: 'visible' } } }, transformOrigin: {
                     horizontal: 'center',
                     vertical: 'bottom',
                 }, children: jsxRuntime.jsx(Box__default["default"], { sx: { p: '1rem' }, children: jsxRuntime.jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }) }) })] }));
@@ -2952,7 +3001,12 @@ const MRT_TableHeadCellGrabHandle = (_a) => {
         var _a;
         (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragStart) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
         setDraggingColumn(column);
-        event.dataTransfer.setDragImage(tableHeadCellRef.current, 0, 0);
+        try {
+            event.dataTransfer.setDragImage(tableHeadCellRef.current, 0, 0);
+        }
+        catch (e) {
+            console.error(e);
+        }
     };
     const handleDragEnd = (event) => {
         var _a;
@@ -3317,16 +3371,17 @@ const MRT_GlobalFilterTextField = (_a) => {
 const MRT_ToolbarAlertBanner = (_a) => {
     var _b, _c, _d;
     var { stackAlertBanner, table } = _a, rest = __rest(_a, ["stackAlertBanner", "table"]);
-    const { getPrePaginationRowModel, getSelectedRowModel, getState, options: { enableRowSelection, enableSelectAll, localization, muiToolbarAlertBannerChipProps, muiToolbarAlertBannerProps, positionToolbarAlertBanner, renderToolbarAlertBannerContent, rowCount, }, refs: { tablePaperRef }, } = table;
-    const { density, grouping, showAlertBanner } = getState();
+    const { getPrePaginationRowModel, getState, options: { enableRowSelection, enableSelectAll, localization, muiToolbarAlertBannerChipProps, muiToolbarAlertBannerProps, positionToolbarAlertBanner, renderToolbarAlertBannerContent, rowCount, }, refs: { tablePaperRef }, } = table;
+    const { density, grouping, rowSelection, showAlertBanner } = getState();
     const alertProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiToolbarAlertBannerProps, {
         table,
     })), rest);
     const chipProps = parseFromValuesOrFunc(muiToolbarAlertBannerChipProps, {
         table,
     });
-    const selectedAlert = getSelectedRowModel().rows.length > 0
-        ? (_c = (_b = localization.selectedCountOfRowCountRowsSelected) === null || _b === void 0 ? void 0 : _b.replace('{selectedCount}', getSelectedRowModel().rows.length.toString())) === null || _c === void 0 ? void 0 : _c.replace('{rowCount}', (rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length).toString())
+    const selectedRowCount = react.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 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) => {
@@ -3446,7 +3501,12 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
     const [isDragging, setIsDragging] = react.useState(false);
     const handleDragStart = (e) => {
         setIsDragging(true);
-        e.dataTransfer.setDragImage(menuItemRef.current, 0, 0);
+        try {
+            e.dataTransfer.setDragImage(menuItemRef.current, 0, 0);
+        }
+        catch (e) {
+            console.error(e);
+        }
     };
     const handleDragEnd = (_e) => {
         setIsDragging(false);
@@ -3460,8 +3520,9 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
             setHoveredColumn(column);
         }
     };
-    if (!columnDef.header || columnDef.visibleInShowHideMenu === false)
+    if (!columnDef.header || columnDef.visibleInShowHideMenu === false) {
         return null;
+    }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuItem__default["default"], Object.assign({ disableRipple: true, onDragEnter: handleDragEnter, ref: menuItemRef }, rest, { sx: (theme) => (Object.assign({ alignItems: 'center', justifyContent: 'flex-start', my: 0, opacity: isDragging ? 0.5 : 1, outline: isDragging
                         ? `2px dashed ${theme.palette.grey[500]}`
                         : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
@@ -3604,8 +3665,19 @@ const MRT_TopToolbar = ({ table, }) => {
     const { getState, options: { enableGlobalFilter, enablePagination, enableToolbarInternalActions, muiTopToolbarProps, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderTopToolbarCustomActions, }, refs: { topToolbarRef }, } = table;
     const { isFullScreen, showGlobalFilter } = getState();
     const isMobile = useMediaQuery__default["default"]('(max-width:720px)');
+    const isTablet = useMediaQuery__default["default"]('(max-width:1024px)');
     const toolbarProps = parseFromValuesOrFunc(muiTopToolbarProps, { table });
-    const stackAlertBanner = isMobile || !!renderTopToolbarCustomActions || showGlobalFilter;
+    const stackAlertBanner = isMobile ||
+        !!renderTopToolbarCustomActions ||
+        (showGlobalFilter && isTablet);
+    const globalFilterProps = {
+        sx: !isTablet
+            ? {
+                zIndex: 2,
+            }
+            : undefined,
+        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) {
@@ -3623,14 +3695,14 @@ const MRT_TopToolbar = ({ table, }) => {
                     right: 0,
                     top: 0,
                     width: '100%',
-                }, children: [enableGlobalFilter && positionGlobalFilter === 'left' && (jsxRuntime.jsx(MRT_GlobalFilterTextField, { table: table })), (_a = renderTopToolbarCustomActions === null || renderTopToolbarCustomActions === void 0 ? void 0 : renderTopToolbarCustomActions({ table })) !== null && _a !== void 0 ? _a : jsxRuntime.jsx("span", {}), enableToolbarInternalActions ? (jsxRuntime.jsxs(Box__default["default"], { sx: {
+                }, children: [enableGlobalFilter && positionGlobalFilter === 'left' && (jsxRuntime.jsx(MRT_GlobalFilterTextField, Object.assign({}, globalFilterProps))), (_a = renderTopToolbarCustomActions === null || renderTopToolbarCustomActions === void 0 ? void 0 : renderTopToolbarCustomActions({ table })) !== null && _a !== void 0 ? _a : jsxRuntime.jsx("span", {}), enableToolbarInternalActions ? (jsxRuntime.jsxs(Box__default["default"], { sx: {
                             alignItems: 'center',
                             display: 'flex',
                             flexWrap: 'wrap-reverse',
                             gap: '0.5rem',
                             justifyContent: 'flex-end',
-                        }, children: [enableGlobalFilter && positionGlobalFilter === 'right' && (jsxRuntime.jsx(MRT_GlobalFilterTextField, { table: table })), jsxRuntime.jsx(MRT_ToolbarInternalButtons, { table: table })] })) : (enableGlobalFilter &&
-                        positionGlobalFilter === 'right' && (jsxRuntime.jsx(MRT_GlobalFilterTextField, { table: table })))] }), enablePagination &&
+                        }, children: [enableGlobalFilter && positionGlobalFilter === 'right' && (jsxRuntime.jsx(MRT_GlobalFilterTextField, Object.assign({}, globalFilterProps))), jsxRuntime.jsx(MRT_ToolbarInternalButtons, { table: table })] })) : (enableGlobalFilter &&
+                        positionGlobalFilter === 'right' && (jsxRuntime.jsx(MRT_GlobalFilterTextField, Object.assign({}, globalFilterProps))))] }), enablePagination &&
                 ['both', 'top'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (jsxRuntime.jsx(MRT_TablePagination, { position: "top", table: table })), jsxRuntime.jsx(MRT_LinearProgressBar, { isTopToolbar: true, table: table })] })));
 };