material-react-table 2.4.1 → 2.5.1

package/dist/index.d.ts

@@ -400,6 +400,7 @@ type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<ColumnDef
         renderedCellValue: ReactNode;
         row: MRT_Row<TData>;
         rowRef?: RefObject<HTMLTableRowElement>;
+        staticRowIndex?: number;
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
     Edit?: (props: {
@@ -611,9 +612,12 @@ type MRT_Header<TData extends MRT_RowData> = Omit<Header<TData, unknown>, 'colum
 type MRT_HeaderGroup<TData extends MRT_RowData> = Omit<HeaderGroup<TData>, 'headers'> & {
     headers: MRT_Header<TData>[];
 };
-type MRT_Row<TData extends MRT_RowData> = Omit<Row<TData>, '_valuesCache' | 'getAllCells' | 'getVisibleCells' | 'subRows'> & {
+type MRT_Row<TData extends MRT_RowData> = Omit<Row<TData>, '_valuesCache' | 'getAllCells' | 'getParentRow' | 'getParentRows' | 'getRow' | 'getVisibleCells' | 'subRows'> & {
     _valuesCache: Record<LiteralUnion<string & DeepKeys<TData>>, any>;
     getAllCells: () => MRT_Cell<TData>[];
+    getParentRow: () => MRT_Row<TData> | null;
+    getParentRows: () => MRT_Row<TData>[];
+    getRow: () => MRT_Row<TData>;
     getVisibleCells: () => MRT_Cell<TData>[];
     subRows?: MRT_Row<TData>[];
 };
@@ -847,6 +851,7 @@ type MRT_TableOptions<TData extends MRT_RowData> = Omit<Partial<TableOptions<TDa
     }) => CheckboxProps) | CheckboxProps;
     muiSelectCheckboxProps?: ((props: {
         row: MRT_Row<TData>;
+        staticRowIndex?: number;
         table: MRT_TableInstance<TData>;
     }) => CheckboxProps | RadioProps) | (CheckboxProps | RadioProps);
     muiSkeletonProps?: ((props: {
@@ -1059,9 +1064,11 @@ declare const Memo_MRT_TableBodyCell: <TData extends MRT_RowData>({ cell, measur
 
 interface Props$R<TData extends MRT_RowData> {
     cell: MRT_Cell<TData>;
+    rowRef?: RefObject<HTMLTableRowElement>;
+    staticRowIndex?: number;
     table: MRT_TableInstance<TData>;
 }
-declare const MRT_TableBodyCellValue: <TData extends MRT_RowData>({ cell, table, }: Props$R<TData>) => ReactNode;
+declare const MRT_TableBodyCellValue: <TData extends MRT_RowData>({ cell, rowRef, staticRowIndex, table, }: Props$R<TData>) => ReactNode;
 
 interface Props$Q<TData extends MRT_RowData> {
     columnVirtualizer?: MRT_ColumnVirtualizer;
@@ -1451,9 +1458,10 @@ declare const MRT_GlobalFilterTextField: <TData extends MRT_RowData>({ table, ..
 interface Props$h<TData extends MRT_RowData> extends CheckboxProps {
     row?: MRT_Row<TData>;
     selectAll?: boolean;
+    staticRowIndex?: number;
     table: MRT_TableInstance<TData>;
 }
-declare const MRT_SelectCheckbox: <TData extends MRT_RowData>({ row, selectAll, table, ...rest }: Props$h<TData>) => react_jsx_runtime.JSX.Element;
+declare const MRT_SelectCheckbox: <TData extends MRT_RowData>({ row, selectAll, staticRowIndex, table, ...rest }: Props$h<TData>) => react_jsx_runtime.JSX.Element;
 
 declare const commonMenuItemStyles: {
     alignItems: string;

package/dist/index.esm.js

@@ -13,12 +13,13 @@ import Box from '@mui/material/Box';
 import { flexRender as flexRender$1, createRow as createRow$1, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, aggregationFns, filterFns } from '@tanstack/react-table';
 import { defaultRangeExtractor, useVirtualizer } from '@tanstack/react-virtual';
 import highlightWords from 'highlight-words';
-import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
 import Button from '@mui/material/Button';
+import Tooltip from '@mui/material/Tooltip';
 import MenuItem from '@mui/material/MenuItem';
 import TextField from '@mui/material/TextField';
 import Collapse from '@mui/material/Collapse';
+import Stack from '@mui/material/Stack';
+import IconButton from '@mui/material/IconButton';
 import CircularProgress from '@mui/material/CircularProgress';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import Menu from '@mui/material/Menu';
@@ -71,7 +72,6 @@ import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import { TimePicker } from '@mui/x-date-pickers/TimePicker';
 import FormHelperText from '@mui/material/FormHelperText';
 import Slider from '@mui/material/Slider';
-import Stack from '@mui/material/Stack';
 import Grow from '@mui/material/Grow';
 import Popover from '@mui/material/Popover';
 import Divider from '@mui/material/Divider';
@@ -387,7 +387,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;
@@ -449,51 +449,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 (jsx(Tooltip, { 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: 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) => {
-                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: 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 (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"]);
@@ -612,7 +575,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 = 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;
@@ -718,6 +681,10 @@ const MRT_TableBodyCell = (_a) => {
             setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
         }
     };
+    const cellValueProps = {
+        cell,
+        table,
+    };
     return (jsx(TableCell, Object.assign({ "data-index": virtualColumnIndex, ref: (node) => {
             if (node) {
                 measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
@@ -753,19 +720,18 @@ const MRT_TableBodyCell = (_a) => {
             table,
             tableCellProps,
             theme,
-        })), draggingBorders)), children: (_b = tableCellProps.children) !== null && _b !== void 0 ? _b : (jsxs(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) ? (jsx(Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
-                    rowNumberDisplayMode === 'static' &&
-                    column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (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 : (jsxs(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) ? (jsx(Skeleton, 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 ? (jsx(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
-                    columnDef.enableClickToCopy !== false ? (jsx(MRT_CopyButton, { cell: cell, table: table, children: jsx(MRT_TableBodyCellValue, { cell: cell, table: table }) })) : (jsx(MRT_TableBodyCellValue, { cell: cell, table: table })), cell.getIsGrouped() && !columnDef.GroupedCell && (jsxs(Fragment, { children: [" (", (_f = row.subRows) === null || _f === void 0 ? void 0 : _f.length, ")"] }))] })) })));
+                    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, ")"] }))] })) })));
 };
 const Memo_MRT_TableBodyCell = memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
 
@@ -802,6 +768,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,
@@ -835,7 +803,7 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRo
     };
     const rowRef = useRef(null);
     const { baseBackgroundColor, pinnedRowBackgroundColor, selectedRowBackgroundColor, } = getMRTTheme(table, theme);
-    return (jsxs(Fragment, { children: [jsxs(TableRow, Object.assign({ "data-index": rowIndex, "data-pinned": !!isPinned || undefined, "data-selected": row.getIsSelected() || undefined, onDragEnter: handleDragEnter, ref: (node) => {
+    return (jsxs(Fragment, { children: [jsxs(TableRow, 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);
@@ -853,11 +821,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'
@@ -880,7 +844,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,
@@ -966,6 +932,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 (jsx(Tooltip, { 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: 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) => {
+                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: 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 (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;
@@ -1251,6 +1261,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
                 }
@@ -1475,40 +1489,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();
@@ -1554,6 +1583,7 @@ const useMRT_DisplayColumns = (params) => {
         tableOptions.enableRowOrdering,
         tableOptions.enableRowSelection,
         tableOptions.enableSelectAll,
+        tableOptions.groupedColumnMode,
         tableOptions.localization,
         tableOptions.positionActionsColumn,
         tableOptions.renderDetailPanel,
@@ -1589,20 +1619,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 }) => jsx(MRT_ExpandButton, { row: row, table: table }), Header: tableOptions.enableExpandAll
-                ? ({ table }) => 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 (jsxs(Stack, { alignItems: "center", flexDirection: "row", gap: "0.25rem", children: [jsx(MRT_ExpandButton, Object.assign({}, expandButtonProps)), jsx(Tooltip, { enterDelay: 1000, enterNextDelay: 1000, placement: "right", title: table.getColumn(row.groupingColumnId).columnDef.header, children: jsx("span", { children: row.groupingValue }) }), !!subRowsLength && jsxs("span", { children: ["(", subRowsLength, ")"] })] }));
+                }
+                else {
+                    return (jsxs(Fragment, { children: [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 (jsxs(Fragment, { children: [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 }) => jsx(MRT_SelectCheckbox, { row: row, table: table }), Header: tableOptions.enableSelectAll && tableOptions.enableMultiRowSelection
+        return Object.assign({ Cell: ({ row, staticRowIndex, table }) => (jsx(MRT_SelectCheckbox, { row: row, staticRowIndex: staticRowIndex, table: table })), Header: tableOptions.enableSelectAll && tableOptions.enableMultiRowSelection
                 ? ({ table }) => jsx(MRT_SelectCheckbox, { selectAll: true, table: table })
                 : undefined }, defaultDisplayColumnProps(tableOptions, id, 'select'));
     }
@@ -1611,7 +1659,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 = {
@@ -2680,16 +2733,12 @@ const MRT_FilterTextField = (_a) => {
                 } }))) : 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) => {
                     var _a;
                     return (jsx(TextField, Object.assign({}, builtinTextFieldProps, commonTextFieldProps, { InputProps: Object.assign(Object.assign({}, builtinTextFieldProps.InputProps), { startAdornment: (_a = commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.startAdornment }), inputProps: Object.assign(Object.assign({}, builtinTextFieldProps.inputProps), commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.inputProps), onChange: handleTextFieldChange })));
-                }, value: filterValue }))) : (jsx(TextField, Object.assign({ SelectProps: {
-                    displayEmpty: true,
-                    multiple: isMultiSelectFilter,
-                    renderValue: isMultiSelectFilter
+                }, value: filterValue }))) : (jsx(TextField, 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) ? (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));
                             }) }))
-                        : 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) && [
                     jsx(MenuItem, { disabled: true, divider: true, hidden: true, value: "", children: jsx(Box, { 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) => {
@@ -2773,7 +2822,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 ? (jsx(FormHelperText, { 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 ? (jsx(FormHelperText, { sx: {
                     fontSize: '0.75rem',
                     lineHeight: '0.8rem',
                     m: '-3px -6px',
@@ -2844,7 +2893,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: jsx(Box, { sx: { p: '1rem' }, children: jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }) }) })] }));
@@ -2863,7 +2912,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;
@@ -3228,16 +3282,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 = 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 ? (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) => {
@@ -3357,7 +3412,12 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
     const [isDragging, setIsDragging] = 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);
@@ -3371,8 +3431,9 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
             setHoveredColumn(column);
         }
     };
-    if (!columnDef.header || columnDef.visibleInShowHideMenu === false)
+    if (!columnDef.header || columnDef.visibleInShowHideMenu === false) {
         return null;
+    }
     return (jsxs(Fragment, { children: [jsx(MenuItem, 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
@@ -3515,8 +3576,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('(max-width:720px)');
+    const isTablet = useMediaQuery('(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 (jsxs(Box, Object.assign({}, toolbarProps, { ref: (ref) => {
             topToolbarRef.current = ref;
             if (toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.ref) {
@@ -3534,14 +3606,14 @@ const MRT_TopToolbar = ({ table, }) => {
                     right: 0,
                     top: 0,
                     width: '100%',
-                }, children: [enableGlobalFilter && positionGlobalFilter === 'left' && (jsx(MRT_GlobalFilterTextField, { table: table })), (_a = renderTopToolbarCustomActions === null || renderTopToolbarCustomActions === void 0 ? void 0 : renderTopToolbarCustomActions({ table })) !== null && _a !== void 0 ? _a : jsx("span", {}), enableToolbarInternalActions ? (jsxs(Box, { sx: {
+                }, children: [enableGlobalFilter && positionGlobalFilter === 'left' && (jsx(MRT_GlobalFilterTextField, Object.assign({}, globalFilterProps))), (_a = renderTopToolbarCustomActions === null || renderTopToolbarCustomActions === void 0 ? void 0 : renderTopToolbarCustomActions({ table })) !== null && _a !== void 0 ? _a : jsx("span", {}), enableToolbarInternalActions ? (jsxs(Box, { sx: {
                             alignItems: 'center',
                             display: 'flex',
                             flexWrap: 'wrap-reverse',
                             gap: '0.5rem',
                             justifyContent: 'flex-end',
-                        }, children: [enableGlobalFilter && positionGlobalFilter === 'right' && (jsx(MRT_GlobalFilterTextField, { table: table })), jsx(MRT_ToolbarInternalButtons, { table: table })] })) : (enableGlobalFilter &&
-                        positionGlobalFilter === 'right' && (jsx(MRT_GlobalFilterTextField, { table: table })))] }), enablePagination &&
+                        }, children: [enableGlobalFilter && positionGlobalFilter === 'right' && (jsx(MRT_GlobalFilterTextField, Object.assign({}, globalFilterProps))), jsx(MRT_ToolbarInternalButtons, { table: table })] })) : (enableGlobalFilter &&
+                        positionGlobalFilter === 'right' && (jsx(MRT_GlobalFilterTextField, Object.assign({}, globalFilterProps))))] }), enablePagination &&
                 ['both', 'top'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (jsx(MRT_TablePagination, { position: "top", table: table })), jsx(MRT_LinearProgressBar, { isTopToolbar: true, table: table })] })));
 };