material-react-table 2.0.0-alpha.6 → 2.0.0-beta.1

package/dist/cjs/index.js

@@ -5,16 +5,17 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var jsxRuntime = require('react/jsx-runtime');
 var Paper = require('@mui/material/Paper');
 var react = require('react');
+var Box = require('@mui/material/Box');
+var CircularProgress = require('@mui/material/CircularProgress');
 var TableContainer = require('@mui/material/TableContainer');
+var styles = require('@mui/material/styles');
 var reactVirtual = require('@tanstack/react-virtual');
 var Table = require('@mui/material/Table');
 var TableBody = require('@mui/material/TableBody');
 var Typography = require('@mui/material/Typography');
 var TableRow = require('@mui/material/TableRow');
-var styles = require('@mui/material/styles');
 var Skeleton = require('@mui/material/Skeleton');
 var TableCell = require('@mui/material/TableCell');
-var Box = require('@mui/material/Box');
 var highlightWords = require('highlight-words');
 var IconButton = require('@mui/material/IconButton');
 var Tooltip = require('@mui/material/Tooltip');
@@ -59,7 +60,6 @@ var Dialog = require('@mui/material/Dialog');
 var DialogActions = require('@mui/material/DialogActions');
 var DialogContent = require('@mui/material/DialogContent');
 var DialogTitle = require('@mui/material/DialogTitle');
-var CircularProgress = require('@mui/material/CircularProgress');
 var ArrowDownwardIcon = require('@mui/icons-material/ArrowDownward');
 var ArrowRightIcon = require('@mui/icons-material/ArrowRight');
 var CancelIcon = require('@mui/icons-material/Cancel');
@@ -90,12 +90,15 @@ var SaveIcon = require('@mui/icons-material/Save');
 var SearchIcon = require('@mui/icons-material/Search');
 var SearchOffIcon = require('@mui/icons-material/SearchOff');
 var SortIcon = require('@mui/icons-material/Sort');
+var SyncAltIcon = require('@mui/icons-material/SyncAlt');
 var ViewColumnIcon = require('@mui/icons-material/ViewColumn');
 var VisibilityOffIcon = require('@mui/icons-material/VisibilityOff');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var Paper__default = /*#__PURE__*/_interopDefaultLegacy(Paper);
+var Box__default = /*#__PURE__*/_interopDefaultLegacy(Box);
+var CircularProgress__default = /*#__PURE__*/_interopDefaultLegacy(CircularProgress);
 var TableContainer__default = /*#__PURE__*/_interopDefaultLegacy(TableContainer);
 var Table__default = /*#__PURE__*/_interopDefaultLegacy(Table);
 var TableBody__default = /*#__PURE__*/_interopDefaultLegacy(TableBody);
@@ -103,7 +106,6 @@ var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
 var TableRow__default = /*#__PURE__*/_interopDefaultLegacy(TableRow);
 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);
@@ -144,7 +146,6 @@ var Dialog__default = /*#__PURE__*/_interopDefaultLegacy(Dialog);
 var DialogActions__default = /*#__PURE__*/_interopDefaultLegacy(DialogActions);
 var DialogContent__default = /*#__PURE__*/_interopDefaultLegacy(DialogContent);
 var DialogTitle__default = /*#__PURE__*/_interopDefaultLegacy(DialogTitle);
-var CircularProgress__default = /*#__PURE__*/_interopDefaultLegacy(CircularProgress);
 var ArrowDownwardIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDownwardIcon);
 var ArrowRightIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowRightIcon);
 var CancelIcon__default = /*#__PURE__*/_interopDefaultLegacy(CancelIcon);
@@ -175,6 +176,7 @@ var SaveIcon__default = /*#__PURE__*/_interopDefaultLegacy(SaveIcon);
 var SearchIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchIcon);
 var SearchOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchOffIcon);
 var SortIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortIcon);
+var SyncAltIcon__default = /*#__PURE__*/_interopDefaultLegacy(SyncAltIcon);
 var ViewColumnIcon__default = /*#__PURE__*/_interopDefaultLegacy(ViewColumnIcon);
 var VisibilityOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffIcon);
 
@@ -338,6 +340,7 @@ const getLeadingDisplayColumnIds = (props) => {
             'mrt-row-expand',
         props.enableRowSelection && 'mrt-row-select',
         props.enableRowNumbers && 'mrt-row-numbers',
+        props.layoutMode === 'grid-no-grow' && 'mrt-row-spacer',
     ].filter(Boolean);
 };
 const getTrailingDisplayColumnIds = (props) => {
@@ -425,7 +428,7 @@ const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, })
     else if (layoutMode === 'grid-no-grow') {
         widthStyles.flex = '0 0 auto';
     }
-    return Object.assign(Object.assign(Object.assign({ backgroundColor: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
+    return Object.assign(Object.assign({ backgroundColor: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
             ? styles.alpha(styles.lighten(theme.palette.background.default, 0.04), 0.97)
             : 'inherit', backgroundImage: 'inherit', boxShadow: getIsLastLeftPinnedColumn(table, column)
             ? `-4px 0 8px -6px ${styles.alpha(theme.palette.common.black, 0.2)} inset`
@@ -453,7 +456,7 @@ const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, })
             ? `${getTotalRight(table, column)}px`
             : undefined, transition: table.options.enableColumnVirtualization
             ? 'none'
-            : `padding 150ms ease-in-out` }, (!table.options.enableColumnResizing && widthStyles)), parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme)), (table.options.enableColumnResizing && widthStyles));
+            : `padding 150ms ease-in-out` }, widthStyles), parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme));
 };
 const MRT_DefaultColumn = {
     filterVariant: 'text',
@@ -493,7 +496,7 @@ const extraIndexRangeExtractor = (range, draggingIndex) => {
     return newIndexs;
 };
 
-const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table, }) => {
+const MRT_GrabHandleButton = ({ iconButtonProps, location, onDragEnd, onDragStart, table, }) => {
     var _a;
     const { options: { icons: { DragHandleIcon }, localization, }, } = table;
     return (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.move, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ disableRipple: true, draggable: "true", size: "small" }, iconButtonProps, { onClick: (e) => {
@@ -505,7 +508,7 @@ const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table,
                 }, '&:hover': {
                     backgroundColor: 'transparent',
                     opacity: 1,
-                }, cursor: 'grab', m: '0 -0.1rem', opacity: 0.5, 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, {}) })) }));
+                }, 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 = ({ row, rowRef, table, }) => {
@@ -526,7 +529,7 @@ const MRT_TableBodyRowGrabHandle = ({ row, rowRef, table, }) => {
         table.setDraggingRow(null);
         table.setHoveredRow(null);
     };
-    return (jsxRuntime.jsx(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table }));
+    return (jsxRuntime.jsx(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, location: "row", onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table }));
 };
 
 const MRT_CopyButton = ({ cell, children, table, }) => {
@@ -617,11 +620,11 @@ const MRT_EditCellTextField = ({ cell, table, }) => {
                     textFieldProps.inputRef = inputRef;
                 }
             }
-        }, label: ['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode))
-            ? column.columnDef.header
+        }, label: !['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode))
+            ? columnDef.header
             : undefined, margin: "none", name: column.id, placeholder: !['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode))
             ? columnDef.header
-            : undefined, select: isSelectEdit, value: value, variant: "standard" }, textFieldProps, { onBlur: handleBlur, onChange: handleChange, onClick: (e) => {
+            : undefined, select: isSelectEdit, value: value, variant: "standard" }, textFieldProps, { InputProps: Object.assign({ disableUnderline: editDisplayMode === 'table' }, textFieldProps.InputProps), inputProps: Object.assign({ autoComplete: 'new-password' }, textFieldProps.inputProps), onBlur: handleBlur, onChange: handleChange, onClick: (e) => {
             var _a;
             e.stopPropagation();
             (_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.onClick) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
@@ -649,7 +652,7 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
     var _a, _b, _c, _d;
     const theme = styles.useTheme();
     const { getState, options: { createDisplayMode, editDisplayMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enableRowNumbers, layoutMode, muiSkeletonProps, muiTableBodyCellProps, rowNumberMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
-    const { creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
+    const { columnSizingInfo, creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
     const { column, row } = cell;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
@@ -686,12 +689,17 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
         const isHoveredRow = (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id;
         const isFirstColumn = getIsFirstColumn(column, table);
         const isLastColumn = getIsLastColumn(column, table);
-        const isLastRow = rowIndex === numRows - 1;
+        const isLastRow = numRows && rowIndex === numRows - 1;
         const borderStyle = isDraggingColumn || isDraggingRow
             ? `1px dashed ${theme.palette.text.secondary} !important`
-            : isHoveredColumn || isHoveredRow
+            : isHoveredColumn ||
+                isHoveredRow ||
+                columnSizingInfo.isResizingColumn === column.id
                 ? `2px dashed ${theme.palette.primary.main} !important`
                 : undefined;
+        if (columnSizingInfo.isResizingColumn === column.id) {
+            return { borderRight: borderStyle };
+        }
         return borderStyle
             ? {
                 borderBottom: isDraggingRow || isHoveredRow || isLastRow
@@ -710,7 +718,14 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
                 borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
             }
             : undefined;
-    }, [draggingColumn, draggingRow, hoveredColumn, hoveredRow, rowIndex]);
+    }, [
+        columnSizingInfo.isResizingColumn,
+        draggingColumn,
+        draggingRow,
+        hoveredColumn,
+        hoveredRow,
+        rowIndex,
+    ]);
     const isEditable = parseFromValuesOrFunc(enableEditing, row) &&
         parseFromValuesOrFunc(columnDef.enableEditing, row) !== false;
     const isEditing = isEditable &&
@@ -755,7 +770,9 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
                     : undefined,
                 outlineOffset: '-1px',
                 textOverflow: 'clip',
-            }, alignItems: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'center' : undefined, cursor: isEditable && editDisplayMode === 'cell' ? 'pointer' : 'inherit', justifyContent: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? tableCellProps.align : undefined, overflow: 'hidden', p: density === 'compact'
+            }, alignItems: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'center' : undefined, cursor: isEditable && editDisplayMode === 'cell' ? 'pointer' : 'inherit', justifyContent: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid'))
+                ? tableCellProps.align
+                : undefined, overflow: 'hidden', p: density === 'compact'
                 ? columnDefType === 'display'
                     ? '0 0.5rem'
                     : '0.5rem'
@@ -777,7 +794,7 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
             table,
             tableCellProps,
             theme,
-        })), draggingBorders)), children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [cell.getIsPlaceholder() ? ((_b = (_a = columnDef.PlaceholderCell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) !== null && _b !== void 0 ? _b : null) : (isLoading || showSkeletons) && cell.getValue() === null ? (jsxRuntime.jsx(Skeleton__default["default"], Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
+        })), draggingBorders)), children: jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [cell.getIsPlaceholder() ? ((_b = (_a = columnDef.PlaceholderCell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) !== null && _b !== void 0 ? _b : null) : isLoading || showSkeletons ? (jsxRuntime.jsx(Skeleton__default["default"], Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
                     rowNumberMode === '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' ||
@@ -815,7 +832,7 @@ const MRT_TableDetailPanel = ({ parentRowRef, row, rowIndex, table, virtualRow,
                     : undefined, width: '100%', zIndex: virtualRow ? 2 : undefined }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme)));
         }, children: jsxRuntime.jsx(TableCell__default["default"], Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow
                     ? styles.lighten(theme.palette.background.default, 0.05)
-                    : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : 'table-cell', pb: row.getIsExpanded() ? '1rem' : 0, pt: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: renderDetailPanel && (jsxRuntime.jsx(Collapse__default["default"], { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: !isLoading && renderDetailPanel({ row, table }) })) })) })));
+                    : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : 'table-cell', py: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: renderDetailPanel && (jsxRuntime.jsx(Collapse__default["default"], { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: !isLoading && renderDetailPanel({ row, table }) })) })) })));
 };
 
 const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRowIds, row, rowIndex, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, virtualRow, }) => {
@@ -909,12 +926,12 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRo
                                 ? cellOrVirtualCell
                                 : undefined,
                         };
-                        return memoMode === 'cells' &&
+                        return cell ? (memoMode === 'cells' &&
                             cell.column.columnDef.columnDefType === 'data' &&
                             !draggingColumn &&
                             !draggingRow &&
                             (editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) !== cell.id &&
-                            (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) !== row.id ? (jsxRuntime.jsx(Memo_MRT_TableBodyCell, Object.assign({}, props), cell.id)) : (jsxRuntime.jsx(MRT_TableBodyCell, Object.assign({}, props), cell.id));
+                            (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) !== row.id ? (jsxRuntime.jsx(Memo_MRT_TableBodyCell, Object.assign({}, props), cell.id)) : (jsxRuntime.jsx(MRT_TableBodyCell, Object.assign({}, props), cell.id))) : null;
                     }), virtualPaddingRight ? (jsxRuntime.jsx("td", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })), renderDetailPanel && !row.getIsGrouped() && (jsxRuntime.jsx(MRT_TableDetailPanel, { parentRowRef: rowRef, row: row, rowIndex: rowIndex, table: table, virtualRow: virtualRow }))] }));
 };
 const Memo_MRT_TableBodyRow = react.memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row && prev.rowIndex === next.rowIndex);
@@ -935,8 +952,8 @@ const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFil
 
 const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
     var _a, _b, _c, _d, _e, _f;
-    const { getBottomRows, getCenterRows, getIsSomeRowsPinned, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { enableGlobalFilterRankedResults, enablePagination, enableRowPinning, enableRowVirtualization, enableStickyFooter, enableStickyHeader, layoutMode, localization, manualExpanding, manualFiltering, manualGrouping, manualPagination, manualSorting, memoMode, muiTableBodyProps, renderEmptyRowsFallback, rowPinningDisplayMode, rowVirtualizerInstanceRef, rowVirtualizerOptions, }, refs: { tableContainerRef, tableFooterRef, tableHeadRef, tablePaperRef }, } = table;
-    const { columnFilters, density, draggingRow, expanded, globalFilter, isFullScreen, pagination, rowPinning, sorting, } = getState();
+    const { getBottomRows, getCenterRows, getIsSomeRowsPinned, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { createDisplayMode, enableGlobalFilterRankedResults, enablePagination, enableRowPinning, enableRowVirtualization, enableStickyFooter, enableStickyHeader, layoutMode, localization, manualExpanding, manualFiltering, manualGrouping, manualPagination, manualSorting, memoMode, muiTableBodyProps, renderEmptyRowsFallback, rowPinningDisplayMode, rowVirtualizerInstanceRef, rowVirtualizerOptions, }, refs: { tableContainerRef, tableFooterRef, tableHeadRef, tablePaperRef }, } = table;
+    const { columnFilters, creatingRow, density, draggingRow, expanded, globalFilter, isFullScreen, pagination, rowPinning, sorting, } = getState();
     const tableBodyProps = parseFromValuesOrFunc(muiTableBodyProps, { table });
     const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
         table,
@@ -1019,44 +1036,44 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
                         virtualPaddingRight,
                     };
                     return memoMode === 'rows' ? (jsxRuntime.jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsxRuntime.jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
-                }) }))), jsxRuntime.jsx(TableBody__default["default"], Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, height: rowVirtualizer
+                }) }))), jsxRuntime.jsxs(TableBody__default["default"], Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, height: rowVirtualizer
                         ? `${rowVirtualizer.getTotalSize()}px`
-                        : 'inherit', minHeight: !rows.length ? '100px' : undefined, position: 'relative' }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: (_c = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _c !== void 0 ? _c : (!rows.length ? (jsxRuntime.jsx("tr", { style: {
-                        display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
-                    }, children: jsxRuntime.jsx("td", { colSpan: table.getVisibleLeafColumns().length, style: {
-                            display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid'))
-                                ? 'grid'
-                                : 'table-cell',
-                        }, children: (_d = renderEmptyRowsFallback === null || renderEmptyRowsFallback === void 0 ? void 0 : renderEmptyRowsFallback({ table })) !== null && _d !== void 0 ? _d : (jsxRuntime.jsx(Typography__default["default"], { sx: {
-                                color: 'text.secondary',
-                                fontStyle: 'italic',
-                                maxWidth: `min(100vw, ${(_f = (_e = tablePaperRef.current) === null || _e === void 0 ? void 0 : _e.clientWidth) !== null && _f !== void 0 ? _f : 360}px)`,
-                                py: '2rem',
-                                textAlign: 'center',
-                                width: '100%',
-                            }, children: globalFilter || columnFilters.length
-                                ? localization.noResultsFound
-                                : localization.noRecordsToDisplay })) }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (virtualRows !== null && virtualRows !== void 0 ? virtualRows : rows).map((rowOrVirtualRow, rowIndex) => {
-                        const row = rowVirtualizer
-                            ? rows[rowOrVirtualRow.index]
-                            : rowOrVirtualRow;
-                        const props = {
-                            columnVirtualizer,
-                            measureElement: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement,
-                            numRows: rows.length,
-                            pinnedRowIds,
-                            row,
-                            rowIndex: rowVirtualizer ? rowOrVirtualRow.index : rowIndex,
-                            table,
-                            virtualColumns,
-                            virtualPaddingLeft,
-                            virtualPaddingRight,
-                            virtualRow: rowVirtualizer
-                                ? rowOrVirtualRow
-                                : undefined,
-                        };
-                        return memoMode === 'rows' ? (jsxRuntime.jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsxRuntime.jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
-                    }) }))) })), !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
+                        : 'inherit', minHeight: !rows.length ? '100px' : undefined, position: 'relative' }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: [creatingRow && createDisplayMode === 'row' && (jsxRuntime.jsx(MRT_TableBodyRow, { row: creatingRow, rowIndex: -1, table: table })), (_c = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _c !== void 0 ? _c : (!rows.length ? (jsxRuntime.jsx("tr", { style: {
+                            display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
+                        }, children: jsxRuntime.jsx("td", { colSpan: table.getVisibleLeafColumns().length, style: {
+                                display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid'))
+                                    ? 'grid'
+                                    : 'table-cell',
+                            }, children: (_d = renderEmptyRowsFallback === null || renderEmptyRowsFallback === void 0 ? void 0 : renderEmptyRowsFallback({ table })) !== null && _d !== void 0 ? _d : (jsxRuntime.jsx(Typography__default["default"], { sx: {
+                                    color: 'text.secondary',
+                                    fontStyle: 'italic',
+                                    maxWidth: `min(100vw, ${(_f = (_e = tablePaperRef.current) === null || _e === void 0 ? void 0 : _e.clientWidth) !== null && _f !== void 0 ? _f : 360}px)`,
+                                    py: '2rem',
+                                    textAlign: 'center',
+                                    width: '100%',
+                                }, children: globalFilter || columnFilters.length
+                                    ? localization.noResultsFound
+                                    : localization.noRecordsToDisplay })) }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (virtualRows !== null && virtualRows !== void 0 ? virtualRows : rows).map((rowOrVirtualRow, rowIndex) => {
+                            const row = rowVirtualizer
+                                ? rows[rowOrVirtualRow.index]
+                                : rowOrVirtualRow;
+                            const props = {
+                                columnVirtualizer,
+                                measureElement: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement,
+                                numRows: rows.length,
+                                pinnedRowIds,
+                                row,
+                                rowIndex: rowVirtualizer ? rowOrVirtualRow.index : rowIndex,
+                                table,
+                                virtualColumns,
+                                virtualPaddingLeft,
+                                virtualPaddingRight,
+                                virtualRow: rowVirtualizer
+                                    ? rowOrVirtualRow
+                                    : undefined,
+                            };
+                            return memoMode === 'rows' ? (jsxRuntime.jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsxRuntime.jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
+                        }) })))] })), !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
                 getIsSomeRowsPinned('bottom') && (jsxRuntime.jsx(TableBody__default["default"], Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ bottom: tableFooterHeight - 1, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, position: 'sticky', zIndex: 1 }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: getBottomRows().map((row, rowIndex) => {
                     const props = {
                         columnVirtualizer,
@@ -1096,7 +1113,11 @@ const MRT_TableFooterCell = ({ footer, table, }) => {
             theme,
         }))), children: jsxRuntime.jsx(jsxRuntime.Fragment, { children: footer.isPlaceholder
                 ? null
-                : (_b = (_a = parseFromValuesOrFunc(columnDef.Footer, { column, footer, table })) !== null && _a !== void 0 ? _a : columnDef.footer) !== null && _b !== void 0 ? _b : null }) })));
+                : (_b = (_a = parseFromValuesOrFunc(columnDef.Footer, {
+                    column,
+                    footer,
+                    table,
+                })) !== null && _a !== void 0 ? _a : columnDef.footer) !== null && _b !== void 0 ? _b : null }) })));
 };
 
 const MRT_TableFooterRow = ({ footerGroup, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
@@ -1115,7 +1136,7 @@ const MRT_TableFooterRow = ({ footerGroup, table, virtualColumns, virtualPadding
                 const footer = virtualColumns
                     ? footerGroup.headers[footerOrVirtualFooter.index]
                     : footerOrVirtualFooter;
-                return (jsxRuntime.jsx(MRT_TableFooterCell, { footer: footer, table: table }, footer.id));
+                return footer ? (jsxRuntime.jsx(MRT_TableFooterCell, { footer: footer, table: table }, footer.id)) : null;
             }), virtualPaddingRight ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
 };
 
@@ -1488,7 +1509,7 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
     }));
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.columnActions, children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ '&:hover': {
                             opacity: 1,
-                        }, height: '2rem', m: '-8px -4px', opacity: 0.5, transform: `scale(0.85) ${columnFilterDisplayMode !== 'popover' ? 'translateX(-4px)' : ''}`, transition: 'opacity 150ms', width: '2rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: jsxRuntime.jsx(MoreVertIcon, {}) })) }), anchorEl && (jsxRuntime.jsx(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))] }));
+                        }, height: '2rem', m: '-4px', opacity: 0.3, transform: `scale(0.85) ${columnFilterDisplayMode !== 'popover' ? 'translateX(-4px)' : ''}`, transition: 'opacity 150ms', width: '2rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: jsxRuntime.jsx(MoreVertIcon, {}) })) }), anchorEl && (jsxRuntime.jsx(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))] }));
 };
 
 const MRT_FilterCheckbox = ({ column, table, }) => {
@@ -1877,11 +1898,13 @@ const MRT_TableHeadCellFilterLabel = ({ header, table, }) => {
                                     (_b = filterInputRefs.current[`${column.id}-0`]) === null || _b === void 0 ? void 0 : _b.select();
                                 });
                                 event.stopPropagation();
-                            }, sx: {
+                            }, size: "small", sx: {
                                 height: '16px',
-                                opacity: 0.8,
+                                ml: '4px',
+                                opacity: isFilterActive ? 1 : 0.3,
                                 p: '8px',
                                 transform: 'scale(0.75)',
+                                transition: 'all 150ms ease-in-out',
                                 width: '16px',
                             }, children: jsxRuntime.jsx(FilterAltIcon, {}) }) }) }) }), jsxRuntime.jsx(Popover__default["default"], { anchorEl: anchorEl, anchorOrigin: {
                     horizontal: 'center',
@@ -1942,13 +1965,17 @@ const MRT_TableHeadCellResizeHandle = ({ header, table, }) => {
         }, sx: (theme) => ({
             '&:active > hr': {
                 backgroundColor: theme.palette.info.main,
-                opacity: 1,
+                opacity: header.subHeaders.length ? 1 : 0,
             },
             cursor: 'col-resize',
-            mr: density === 'compact' ? '-0.75rem' : '-1rem',
+            mr: density === 'compact'
+                ? '-12px'
+                : density === 'comfortable'
+                    ? '-20px'
+                    : '-28px',
             position: 'absolute',
             px: '4px',
-            right: '4px',
+            right: '0',
         }), children: jsxRuntime.jsx(Divider__default["default"], { className: "Mui-TableHeadCell-ResizeHandle-Divider", flexItem: true, orientation: "vertical", sx: {
                 borderRadius: '2px',
                 borderWidth: '2px',
@@ -1962,11 +1989,12 @@ const MRT_TableHeadCellResizeHandle = ({ header, table, }) => {
             } }) }));
 };
 
-const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
-    const { getState, options: { icons: { ArrowDownwardIcon }, localization, }, } = table;
+const MRT_TableHeadCellSortLabel = ({ header, table, }) => {
+    const { getState, options: { icons: { ArrowDownwardIcon, SyncAltIcon }, localization, }, } = table;
     const { column } = header;
     const { columnDef } = column;
     const { sorting } = getState();
+    const isSorted = !!column.getIsSorted();
     const sortTooltip = column.getIsSorted()
         ? column.getIsSorted() === 'desc'
             ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
@@ -1974,18 +2002,17 @@ const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
         : column.getNextSortingOrder() === 'desc'
             ? localization.sortByColumnDesc.replace('{column}', columnDef.header)
             : localization.sortByColumnAsc.replace('{column}', columnDef.header);
-    return (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, placement: "top", title: sortTooltip, children: jsxRuntime.jsx(Badge__default["default"], { badgeContent: sorting.length > 1 ? column.getSortIndex() + 1 : 0, overlap: "circular", children: jsxRuntime.jsx(TableSortLabel__default["default"], { IconComponent: ArrowDownwardIcon, active: !!column.getIsSorted(), "aria-label": sortTooltip, direction: column.getIsSorted()
-                    ? column.getIsSorted()
-                    : undefined, onClick: (e) => {
+    return (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, placement: "top", title: sortTooltip, children: jsxRuntime.jsx(Badge__default["default"], { badgeContent: sorting.length > 1 ? column.getSortIndex() + 1 : 0, overlap: "circular", children: jsxRuntime.jsx(TableSortLabel__default["default"], { IconComponent: !isSorted
+                    ? (props) => (jsxRuntime.jsx(SyncAltIcon, Object.assign({}, props, { style: { transform: 'rotate(-90deg) scaleX(0.8)' } })))
+                    : ArrowDownwardIcon, active: true, "aria-label": sortTooltip, direction: isSorted ? column.getIsSorted() : undefined, onClick: (e) => {
                     var _a;
                     e.stopPropagation();
                     (_a = header.column.getToggleSortingHandler()) === null || _a === void 0 ? void 0 : _a(e);
                 }, sx: {
                     flex: '0 0',
-                    transform: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) !== 'right'
-                        ? 'translateX(-0.5ch)'
-                        : undefined,
-                    width: '2.4ch',
+                    opacity: isSorted ? 1 : 0.3,
+                    transition: 'all 150ms ease-in-out',
+                    width: '3ch',
                 } }) }) }));
 };
 
@@ -1993,7 +2020,7 @@ const MRT_TableHeadCell = ({ header, table, }) => {
     var _a, _b, _c, _d, _f;
     const theme = styles.useTheme();
     const { getState, options: { columnFilterDisplayMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableGrouping, enableMultiSort, layoutMode, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
-    const { density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
+    const { columnSizingInfo, density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
     const { column } = header;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
@@ -2013,25 +2040,34 @@ const MRT_TableHeadCell = ({ header, table, }) => {
     const headerPL = react.useMemo(() => {
         let pl = 0;
         if (column.getCanSort())
-            pl++;
+            pl += 1;
         if (showColumnActions)
             pl += 1.75;
         if (showDragHandle)
-            pl += 1.25;
+            pl += 1.5;
         return pl;
     }, [showColumnActions, showDragHandle]);
-    const draggingBorder = react.useMemo(() => (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
-        ? `1px dashed ${theme.palette.text.secondary}`
-        : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
-            ? `2px dashed ${theme.palette.primary.main}`
-            : undefined, [draggingColumn, hoveredColumn]);
-    const draggingBorders = draggingBorder
-        ? {
-            borderLeft: draggingBorder,
-            borderRight: draggingBorder,
-            borderTop: draggingBorder,
+    const draggingBorders = react.useMemo(() => {
+        const borderStyle = columnSizingInfo.isResizingColumn === column.id &&
+            !header.subHeaders.length
+            ? `2px solid ${theme.palette.primary.main} !important`
+            : (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
+                ? `1px dashed ${theme.palette.text.secondary}`
+                : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
+                    ? `2px dashed ${theme.palette.primary.main}`
+                    : undefined;
+        if (columnSizingInfo.isResizingColumn === column.id) {
+            return { borderRight: borderStyle };
         }
-        : undefined;
+        const draggingBorders = borderStyle
+            ? {
+                borderLeft: borderStyle,
+                borderRight: borderStyle,
+                borderTop: borderStyle,
+            }
+            : undefined;
+        return draggingBorders;
+    }, [draggingColumn, hoveredColumn, columnSizingInfo.isResizingColumn]);
     const handleDragEnter = (_e) => {
         if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
             setHoveredColumn(null);
@@ -2049,7 +2085,11 @@ const MRT_TableHeadCell = ({ header, table, }) => {
             if (node) {
                 tableHeadCellRefs.current[column.id] = node;
             }
-        } }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ flexDirection: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'column' : undefined, fontWeight: 'bold', overflow: 'visible', p: density === 'compact'
+        } }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ '& :hover': {
+                '.MuiButtonBase-root': {
+                    opacity: 1,
+                },
+            }, flexDirection: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'column' : undefined, fontWeight: 'bold', overflow: 'visible', p: density === 'compact'
                 ? '0.5rem'
                 : density === 'comfortable'
                     ? columnDefType === 'display'
@@ -2101,11 +2141,11 @@ const MRT_TableHeadCell = ({ header, table, }) => {
                                     '&:hover': {
                                         textOverflow: 'clip',
                                     },
-                                    minWidth: `${Math.min((_c = (_b = columnDef.header) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0, 5)}ch`,
+                                    minWidth: `${Math.min((_c = (_b = columnDef.header) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0, 4)}ch`,
                                     overflow: columnDefType === 'data' ? 'hidden' : undefined,
                                     textOverflow: 'ellipsis',
                                     whiteSpace: ((_f = (_d = columnDef.header) === null || _d === void 0 ? void 0 : _d.length) !== null && _f !== void 0 ? _f : 0) < 20 ? 'nowrap' : 'normal',
-                                }, title: columnDefType === 'data' ? columnDef.header : undefined, children: headerElement }), column.getCanSort() && (jsxRuntime.jsx(MRT_TableHeadCellSortLabel, { header: header, table: table, tableCellProps: tableCellProps })), column.getCanFilter() && (jsxRuntime.jsx(MRT_TableHeadCellFilterLabel, { header: header, table: table }))] }), columnDefType !== 'group' && (jsxRuntime.jsxs(Box__default["default"], { className: "Mui-TableHeadCell-Content-Actions", sx: { whiteSpace: 'nowrap' }, children: [showDragHandle && (jsxRuntime.jsx(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
+                                }, title: columnDefType === 'data' ? columnDef.header : undefined, children: headerElement }), column.getCanFilter() && (jsxRuntime.jsx(MRT_TableHeadCellFilterLabel, { header: header, table: table })), column.getCanSort() && (jsxRuntime.jsx(MRT_TableHeadCellSortLabel, { header: header, table: table, tableCellProps: tableCellProps }))] }), columnDefType !== 'group' && (jsxRuntime.jsxs(Box__default["default"], { className: "Mui-TableHeadCell-Content-Actions", sx: { whiteSpace: 'nowrap' }, children: [showDragHandle && (jsxRuntime.jsx(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
                                     current: tableHeadCellRefs.current[column.id],
                                 } })), showColumnActions && (jsxRuntime.jsx(MRT_TableHeadCellColumnActionsButton, { header: header, table: table }))] })), column.getCanResize() && (jsxRuntime.jsx(MRT_TableHeadCellResizeHandle, { header: header, table: table }))] })), columnFilterDisplayMode === 'subheader' && column.getCanFilter() && (jsxRuntime.jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }))] })));
 };
@@ -2120,18 +2160,18 @@ const MRT_TableHeadRow = ({ headerGroup, table, virtualColumns, virtualPaddingLe
                 const header = virtualColumns
                     ? headerGroup.headers[headerOrVirtualHeader.index]
                     : headerOrVirtualHeader;
-                return (jsxRuntime.jsx(MRT_TableHeadCell, { header: header, table: table }, header.id));
+                return header ? (jsxRuntime.jsx(MRT_TableHeadCell, { header: header, table: table }, header.id)) : null;
             }), virtualPaddingRight ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
 };
 
 const MRT_LinearProgressBar = ({ isTopToolbar, table, }) => {
     const { getState, options: { muiLinearProgressProps }, } = table;
-    const { isLoading, showProgressBars } = getState();
+    const { showProgressBars } = getState();
     const linearProgressProps = parseFromValuesOrFunc(muiLinearProgressProps, {
         isTopToolbar,
         table,
     });
-    return (jsxRuntime.jsx(Collapse__default["default"], { in: isLoading || showProgressBars, mountOnEnter: true, sx: {
+    return (jsxRuntime.jsx(Collapse__default["default"], { in: showProgressBars, mountOnEnter: true, sx: {
             bottom: isTopToolbar ? 0 : undefined,
             position: 'absolute',
             top: !isTopToolbar ? 0 : undefined,
@@ -2182,8 +2222,9 @@ const MRT_TablePagination = ({ position = 'bottom', table, }) => {
     return (jsxRuntime.jsxs(Box__default["default"], { sx: {
             alignItems: 'center',
             display: 'flex',
+            flexWrap: 'wrap',
             gap: '8px',
-            justifyContent: 'space-between',
+            justifyContent: { md: 'space-between', sm: 'center' },
             justifySelf: 'flex-end',
             mt: position === 'top' &&
                 enableToolbarInternalActions &&
@@ -2194,12 +2235,12 @@ const MRT_TablePagination = ({ position = 'bottom', table, }) => {
             px: '4px',
             py: '12px',
             zIndex: 2,
-        }, children: [showRowsPerPage && (jsxRuntime.jsxs(Box__default["default"], { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsxRuntime.jsx(InputLabel__default["default"], { htmlFor: "mrt-rows-per-page", sx: { mb: 0 }, children: localization.rowsPerPage }), jsxRuntime.jsx(Select__default["default"], { id: "mrt-rows-per-page", inputProps: { 'aria-label': localization.rowsPerPage }, label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: { '&::before': { border: 'none' }, mb: 0 }, value: pageSize, variant: "standard", children: rowsPerPageOptions.map((value) => (jsxRuntime.jsx(MenuItem__default["default"], { sx: { m: 0 }, value: value, children: value }, value))) })] })), paginationDisplayMode === 'pages' ? (jsxRuntime.jsx(Pagination__default["default"], Object.assign({ count: numberOfPages, onChange: (_e, newPageIndex) => setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsxRuntime.jsx(PaginationItem__default["default"], Object.assign({ slots: {
+        }, children: [showRowsPerPage && (jsxRuntime.jsxs(Box__default["default"], { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsxRuntime.jsx(InputLabel__default["default"], { htmlFor: "mrt-rows-per-page", sx: { mb: 0 }, children: localization.rowsPerPage }), jsxRuntime.jsx(Select__default["default"], { disableUnderline: true, id: "mrt-rows-per-page", inputProps: { 'aria-label': localization.rowsPerPage }, label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: { mb: 0 }, value: pageSize, variant: "standard", children: rowsPerPageOptions.map((value) => (jsxRuntime.jsx(MenuItem__default["default"], { sx: { m: 0 }, value: value, children: value }, value))) })] })), paginationDisplayMode === 'pages' ? (jsxRuntime.jsx(Pagination__default["default"], Object.assign({ count: numberOfPages, onChange: (_e, newPageIndex) => setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsxRuntime.jsx(PaginationItem__default["default"], Object.assign({ slots: {
                         first: FirstPageIcon,
                         last: LastPageIcon,
                         next: ChevronRightIcon,
                         previous: ChevronLeftIcon,
-                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, rest))) : paginationDisplayMode === 'default' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography__default["default"], { sx: { mb: 0, minWidth: '10ch', mx: '4px' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxRuntime.jsxs(Box__default["default"], { gap: "xs", children: [showFirstButton && (jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToFirstPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(0), size: "small", children: jsxRuntime.jsx(FirstPageIcon, {}) })), jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToPreviousPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsxRuntime.jsx(ChevronLeftIcon, {}) }), jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToNextPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsxRuntime.jsx(ChevronRightIcon, {}) }), showLastButton && (jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToLastPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsxRuntime.jsx(LastPageIcon, {}) }))] })] })) : null] }));
+                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, rest))) : paginationDisplayMode === 'default' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography__default["default"], { align: "center", sx: { mb: 0, minWidth: '10ch', mx: '4px' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxRuntime.jsxs(Box__default["default"], { gap: "xs", children: [showFirstButton && (jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToFirstPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(0), size: "small", children: jsxRuntime.jsx(FirstPageIcon, {}) })), jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToPreviousPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsxRuntime.jsx(ChevronLeftIcon, {}) }), jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToNextPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsxRuntime.jsx(ChevronRightIcon, {}) }), showLastButton && (jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToLastPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsxRuntime.jsx(LastPageIcon, {}) }))] })] })) : null] }));
 };
 
 const MRT_GlobalFilterTextField = ({ table, }) => {
@@ -2653,7 +2694,9 @@ const MRT_TableHead = ({ table, virtualColumns, virtualPaddingLeft, virtualPaddi
                 tableHeadProps.ref.current = ref;
             }
         }, sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, opacity: 0.97, position: stickyHeader ? 'sticky' : 'relative', top: stickyHeader && (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 0 : undefined, zIndex: stickyHeader ? 2 : undefined }, parseFromValuesOrFunc(tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx, theme))), children: positionToolbarAlertBanner === 'head-overlay' &&
-            (showAlertBanner || getSelectedRowModel().rows.length > 0) ? (jsxRuntime.jsx("tr", { style: { display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined }, children: jsxRuntime.jsx("th", { colSpan: table.getVisibleLeafColumns().length, style: {
+            (showAlertBanner || getSelectedRowModel().rows.length > 0) ? (jsxRuntime.jsx("tr", { style: {
+                display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
+            }, children: jsxRuntime.jsx("th", { colSpan: table.getVisibleLeafColumns().length, style: {
                     display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : 'table-cell',
                     padding: 0,
                 }, children: jsxRuntime.jsx(MRT_ToolbarAlertBanner, { table: table }) }) })) : (getHeaderGroups().map((headerGroup) => (jsxRuntime.jsx(MRT_TableHeadRow, { headerGroup: headerGroup, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight }, headerGroup.id)))) })));
@@ -2822,12 +2865,14 @@ const MRT_EditRowModal = ({ open, table, }) => {
 
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react.useLayoutEffect : react.useEffect;
 const MRT_TableContainer = ({ table, }) => {
-    const { getState, options: { createDisplayMode, editDisplayMode, enableStickyHeader, muiTableContainerProps, }, refs: { bottomToolbarRef, tableContainerRef, topToolbarRef }, } = table;
-    const { creatingRow, editingRow, isFullScreen } = getState();
+    const { getState, options: { createDisplayMode, editDisplayMode, enableStickyHeader, localization, muiCircularProgressProps, muiTableContainerProps, }, refs: { bottomToolbarRef, tableContainerRef, topToolbarRef }, } = table;
+    const { creatingRow, editingRow, isFullScreen, isLoading, showLoadingOverlay, } = getState();
+    const loading = (isLoading || showLoadingOverlay) && showLoadingOverlay !== false;
     const [totalToolbarHeight, setTotalToolbarHeight] = react.useState(0);
     const tableContainerProps = parseFromValuesOrFunc(muiTableContainerProps, {
         table,
     });
+    const circularProgressProps = parseFromValuesOrFunc(muiCircularProgressProps, { table });
     useIsomorphicLayoutEffect(() => {
         var _a, _b, _c, _d;
         const topToolbarHeight = typeof document !== 'undefined'
@@ -2840,7 +2885,7 @@ const MRT_TableContainer = ({ table, }) => {
     });
     const createModalOpen = createDisplayMode === 'modal' && creatingRow;
     const editModalOpen = editDisplayMode === 'modal' && editingRow;
-    return (jsxRuntime.jsxs(TableContainer__default["default"], Object.assign({}, tableContainerProps, { ref: (node) => {
+    return (jsxRuntime.jsxs(TableContainer__default["default"], Object.assign({ "aria-busy": loading, "aria-describedby": "mrt-progress" }, tableContainerProps, { ref: (node) => {
             if (node) {
                 tableContainerRef.current = node;
                 if (tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.ref) {
@@ -2852,7 +2897,20 @@ const MRT_TableContainer = ({ table, }) => {
                 ? `calc(100vh - ${totalToolbarHeight}px)`
                 : undefined }, tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.style), sx: (theme) => (Object.assign({ maxHeight: enableStickyHeader
                 ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
-                : undefined, maxWidth: '100%', overflow: 'auto' }, parseFromValuesOrFunc(tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx, theme))), children: [jsxRuntime.jsx(MRT_Table, { table: table }), (createModalOpen || editModalOpen) && (jsxRuntime.jsx(MRT_EditRowModal, { open: true, table: table }))] })));
+                : undefined, maxWidth: '100%', overflow: 'auto', position: 'relative' }, parseFromValuesOrFunc(tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx, theme))), children: [loading ? (jsxRuntime.jsx(Box__default["default"], { sx: (theme) => ({
+                    alignItems: 'center',
+                    backgroundColor: styles.alpha(styles.lighten(theme.palette.background.paper, 0.05), 0.5),
+                    bottom: 0,
+                    display: 'flex',
+                    justifyContent: 'center',
+                    left: 0,
+                    maxHeight: '100vh',
+                    position: 'absolute',
+                    right: 0,
+                    top: 0,
+                    width: '100%',
+                    zIndex: 2,
+                }), children: jsxRuntime.jsx(CircularProgress__default["default"], Object.assign({ "aria-label": localization.noRecordsToDisplay, id: "mrt-progress" }, circularProgressProps)) })) : null, jsxRuntime.jsx(MRT_Table, { table: table }), (createModalOpen || editModalOpen) && (jsxRuntime.jsx(MRT_EditRowModal, { open: true, table: table }))] })));
 };
 
 const MRT_TablePaper = ({ table, }) => {
@@ -2879,7 +2937,7 @@ const MRT_TablePaper = ({ table, }) => {
                 right: 0,
                 top: 0,
                 width: '100vw',
-                zIndex: 10,
+                zIndex: 9999,
             }
             : {})), tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.style), sx: (theme) => (Object.assign({ overflow: 'hidden', transition: 'all 100ms ease-in-out' }, parseFromValuesOrFunc(tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx, theme))), children: [enableTopToolbar &&
                 ((_a = parseFromValuesOrFunc(renderTopToolbar, { table })) !== null && _a !== void 0 ? _a : (jsxRuntime.jsx(MRT_TopToolbar, { table: table }))), jsxRuntime.jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
@@ -2956,7 +3014,7 @@ const MRT_ExpandButton = ({ row, table, }) => {
     };
     return (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, disableHoverListener: !canExpand && !renderDetailPanel, enterDelay: 1000, enterNextDelay: 1000, title: ((_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : isExpanded)
             ? localization.collapse
-            : localization.expand, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.expand, disabled: !canExpand && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsxRuntime.jsx(ExpandMoreIcon, { style: {
+            : localization.expand, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], Object.assign({ "aria-label": localization.expand, disabled: !canExpand && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', opacity: !canExpand && !renderDetailPanel ? 0.3 : 1, width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsxRuntime.jsx(ExpandMoreIcon, { style: {
                         transform: `rotate(${!canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0}deg)`,
                         transition: 'transform 150ms',
                     } })) })) }) }));
@@ -3006,10 +3064,18 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, table, }) => {
             parseFromValuesOrFunc(enableEditing, row) ? (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, placement: "right", title: localization.edit, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.edit, onClick: handleStartEditMode, sx: commonIconButtonStyles, children: jsxRuntime.jsx(EditIcon, {}) }) })) : renderRowActionMenuItems ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles, children: jsxRuntime.jsx(MoreHorizIcon, {}) }) }), jsxRuntime.jsx(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, table: table })] })) : null }));
 };
 
+const blankColProps = {
+    sx: {
+        flex: '1 0 auto',
+        minWidth: 0,
+        p: 0,
+        width: 0,
+    },
+};
 const useMRT_DisplayColumns = ({ columnOrder, creatingRow, grouping, tableOptions, }) => {
     var _a, _b;
     return react.useMemo(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
         return [
             ((_b = (_a = tableOptions.state) === null || _a === void 0 ? void 0 : _a.columnOrder) !== null && _b !== void 0 ? _b : columnOrder).includes('mrt-row-pin') && Object.assign(Object.assign(Object.assign({ Cell: ({ row, table }) => (jsxRuntime.jsx(MRT_TableBodyRowPinButton, { row: row, table: table })), header: tableOptions.localization.pin, size: 60 }, tableOptions.defaultDisplayColumn), (_c = tableOptions.displayColumnDefOptions) === null || _c === void 0 ? void 0 : _c['mrt-row-pin']), { id: 'mrt-row-pin' }),
             ((_e = (_d = tableOptions.state) === null || _d === void 0 ? void 0 : _d.columnOrder) !== null && _e !== void 0 ? _e : columnOrder).includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ Cell: ({ row, rowRef, table }) => (jsxRuntime.jsx(MRT_TableBodyRowGrabHandle, { row: row, rowRef: rowRef, table: table })), header: tableOptions.localization.move, size: 60 }, tableOptions.defaultDisplayColumn), (_f = tableOptions.displayColumnDefOptions) === null || _f === void 0 ? void 0 : _f['mrt-row-drag']), { id: 'mrt-row-drag' }),
@@ -3024,6 +3090,14 @@ const useMRT_DisplayColumns = ({ columnOrder, creatingRow, grouping, tableOption
                     ? ({ table }) => jsxRuntime.jsx(MRT_SelectCheckbox, { selectAll: true, table: table })
                     : null, header: tableOptions.localization.select, size: 60 }, tableOptions.defaultDisplayColumn), (_s = tableOptions.displayColumnDefOptions) === null || _s === void 0 ? void 0 : _s['mrt-row-select']), { id: 'mrt-row-select' }),
             ((_u = (_t = tableOptions.state) === null || _t === void 0 ? void 0 : _t.columnOrder) !== null && _u !== void 0 ? _u : columnOrder).includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => tableOptions.localization.rowNumber, header: tableOptions.localization.rowNumbers, size: 60 }, tableOptions.defaultDisplayColumn), (_v = tableOptions.displayColumnDefOptions) === null || _v === void 0 ? void 0 : _v['mrt-row-numbers']), { id: 'mrt-row-numbers' }),
+            ((_x = (_w = tableOptions.state) === null || _w === void 0 ? void 0 : _w.columnOrder) !== null && _x !== void 0 ? _x : columnOrder).includes('mrt-row-spacer') && {
+                columnDefType: 'display',
+                header: '',
+                id: 'spacer',
+                muiTableBodyCellProps: blankColProps,
+                muiTableFooterCellProps: blankColProps,
+                muiTableHeadCellProps: blankColProps,
+            },
         ].filter(Boolean);
     }, [
         columnOrder,
@@ -3414,6 +3488,7 @@ const MRT_Default_Icons = {
     SearchIcon: SearchIcon__default["default"],
     SearchOffIcon: SearchOffIcon__default["default"],
     SortIcon: SortIcon__default["default"],
+    SyncAltIcon: SyncAltIcon__default["default"],
     ViewColumnIcon: ViewColumnIcon__default["default"],
     VisibilityOffIcon: VisibilityOffIcon__default["default"],
 };