material-react-table 2.0.0-alpha.4 → 2.0.0-alpha.5

package/dist/esm/material-react-table.esm.js

@@ -1,6 +1,6 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import Paper from '@mui/material/Paper';
-import { useState, memo, useEffect, useMemo, useRef, useCallback, useLayoutEffect, Fragment as Fragment$1, useReducer } from 'react';
+import { useState, memo, useEffect, useMemo, useRef, useCallback, Fragment as Fragment$1, useLayoutEffect, useReducer } from 'react';
 import TableContainer from '@mui/material/TableContainer';
 import { useVirtualizer, defaultRangeExtractor } from '@tanstack/react-virtual';
 import Table from '@mui/material/Table';
@@ -39,11 +39,6 @@ import Popover from '@mui/material/Popover';
 import Divider from '@mui/material/Divider';
 import Badge from '@mui/material/Badge';
 import TableSortLabel from '@mui/material/TableSortLabel';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-import CircularProgress from '@mui/material/CircularProgress';
 import Toolbar from '@mui/material/Toolbar';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import LinearProgress from '@mui/material/LinearProgress';
@@ -53,13 +48,18 @@ import PaginationItem from '@mui/material/PaginationItem';
 import Select from '@mui/material/Select';
 import Alert from '@mui/material/Alert';
 import AlertTitle from '@mui/material/AlertTitle';
+import Radio from '@mui/material/Radio';
 import Fade from '@mui/material/Fade';
 import Switch from '@mui/material/Switch';
-import Radio from '@mui/material/Radio';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
+import CircularProgress from '@mui/material/CircularProgress';
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import CancelIcon from '@mui/icons-material/Cancel';
-import ChevronLefIcon from '@mui/icons-material/ChevronLeft';
+import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import ClearAllIcon from '@mui/icons-material/ClearAll';
 import CloseIcon from '@mui/icons-material/Close';
@@ -325,19 +325,24 @@ const getCanRankRows = (table) => {
 };
 const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const { options: { layoutMode }, } = table;
     const widthStyles = {
         minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId((_a = header === null || header === void 0 ? void 0 : header.id) !== null && _a !== void 0 ? _a : column.id)}-size) * 1px), ${(_b = column.columnDef.minSize) !== null && _b !== void 0 ? _b : 30}px)`,
         width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId((_c = header === null || header === void 0 ? void 0 : header.id) !== null && _c !== void 0 ? _c : column.id)}-size) * 1px)`,
     };
+    if (layoutMode === 'grid') {
+        widthStyles.flex = `var(--${header ? 'header' : 'col'}-${parseCSSVarId((_d = header === null || header === void 0 ? void 0 : header.id) !== null && _d !== void 0 ? _d : column.id)}-size) 0 auto`;
+    }
+    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'
             ? alpha(lighten(theme.palette.background.default, 0.04), 0.97)
             : 'inherit', backgroundImage: 'inherit', boxShadow: getIsLastLeftPinnedColumn(table, column)
             ? `-4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
             : getIsFirstRightPinnedColumn(column)
                 ? `4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
-                : undefined, display: table.options.layoutMode === 'grid' ? 'flex' : 'table-cell', flex: table.options.layoutMode === 'grid'
-            ? `var(--${header ? 'header' : 'col'}-${parseCSSVarId((_d = header === null || header === void 0 ? void 0 : header.id) !== null && _d !== void 0 ? _d : column.id)}-size) 0 auto`
-            : undefined, left: column.getIsPinned() === 'left'
+                : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, left: column.getIsPinned() === 'left'
             ? `${column.getStart('left')}px`
             : undefined, ml: table.options.enableColumnVirtualization &&
             column.getIsPinned() === 'left' &&
@@ -650,7 +655,7 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
                     : undefined,
                 outlineOffset: '-1px',
                 textOverflow: 'clip',
-            }, alignItems: layoutMode === 'grid' ? 'center' : undefined, cursor: isEditable && editDisplayMode === 'cell' ? 'pointer' : 'inherit', justifyContent: layoutMode === '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'
@@ -703,14 +708,14 @@ const MRT_TableDetailPanel = ({ parentRowRef, row, rowIndex, table, virtualRow,
     });
     return (jsx(TableRow, Object.assign({ className: "Mui-TableBodyCell-DetailPanel" }, tableRowProps, { sx: (theme) => {
             var _a, _b;
-            return (Object.assign({ display: layoutMode === 'grid' ? 'flex' : 'table-row', position: virtualRow ? 'absolute' : undefined, top: virtualRow
+            return (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, position: virtualRow ? 'absolute' : undefined, top: virtualRow
                     ? `${(_b = (_a = parentRowRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height}px`
                     : undefined, transform: virtualRow
                     ? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
                     : undefined, width: '100%', zIndex: virtualRow ? 2 : undefined }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme)));
         }, children: jsx(TableCell, Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow
-                    ? lighten(theme.palette.background.default, 0.06)
-                    : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: layoutMode === '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 && (jsx(Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: !isLoading && renderDetailPanel({ row, table }) })) })) })));
+                    ? 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 && (jsx(Collapse, { 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, }) => {
@@ -765,10 +770,10 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRo
                                     ? `${lighten(theme.palette.background.default, 0.12)}`
                                     : `${darken(theme.palette.background.default, 0.05)}`
                             : undefined,
-                    }, backgroundColor: `${lighten(theme.palette.background.default, 0.06)} !important`, bottom: !virtualRow && bottomPinnedIndex !== undefined && isPinned
+                    }, backgroundColor: `${lighten(theme.palette.background.default, 0.05)} !important`, bottom: !virtualRow && bottomPinnedIndex !== undefined && isPinned
                         ? `${bottomPinnedIndex * rowHeight +
                             (enableStickyFooter ? tableFooterHeight - 1 : 0)}px`
-                        : undefined, boxSizing: 'border-box', display: layoutMode === 'grid' ? 'flex' : 'table-row', opacity: isPinned
+                        : undefined, boxSizing: 'border-box', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, opacity: isPinned
                         ? 0.98
                         : (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id || (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id
                             ? 0.5
@@ -788,7 +793,7 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRo
                             ? `${topPinnedIndex * rowHeight +
                                 (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)}px`
                             : undefined, transition: virtualRow ? 'none' : 'all 150ms ease-in-out', width: '100%', zIndex: (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) && isPinned
-                        ? 1
+                        ? 2
                         : undefined }, sx)), children: [virtualPaddingLeft ? (jsx("td", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : row.getVisibleCells()).map((cellOrVirtualCell) => {
                         const cell = columnVirtualizer
                             ? row.getVisibleCells()[cellOrVirtualCell.index]
@@ -831,7 +836,7 @@ 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, expanded, globalFilter, globalFilterFn, isFullScreen, pagination, rowPinning, sorting, } = getState();
+    const { columnFilters, density, expanded, globalFilter, isFullScreen, pagination, rowPinning, sorting, } = getState();
     const tableBodyProps = parseFromValuesOrFunc(muiTableBodyProps, { table });
     const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
         table,
@@ -840,16 +845,9 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
         ((_a = tableHeadRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight)) ||
         0;
     const tableFooterHeight = (enableStickyFooter && ((_b = tableFooterRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)) || 0;
-    const shouldRankResults = useMemo(() => !manualExpanding &&
-        !manualFiltering &&
-        !manualGrouping &&
-        !manualSorting &&
-        enableGlobalFilterRankedResults &&
-        globalFilter &&
-        globalFilterFn === 'fuzzy' &&
-        expanded !== true &&
+    const shouldRankRows = useMemo(() => getCanRankRows(table) &&
         !Object.values(sorting).some(Boolean) &&
-        !Object.values(expanded).some(Boolean), [
+        globalFilter, [
         enableGlobalFilterRankedResults,
         expanded,
         globalFilter,
@@ -864,7 +862,7 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
         .map((r) => r.id), [rowPinning, table.getRowModel().rows]);
     const rows = useMemo(() => {
         let rows = [];
-        if (!shouldRankResults) {
+        if (!shouldRankRows) {
             rows =
                 !enableRowPinning || (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))
                     ? getRowModel().rows
@@ -886,8 +884,8 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
         }
         return rows;
     }, [
-        shouldRankResults,
-        shouldRankResults ? getPrePaginationRowModel().rows : getRowModel().rows,
+        shouldRankRows,
+        shouldRankRows ? getPrePaginationRowModel().rows : getRowModel().rows,
         pagination.pageIndex,
         pagination.pageSize,
         rowPinning,
@@ -905,7 +903,7 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
         ? rowVirtualizer.getVirtualItems()
         : undefined;
     return (jsxs(Fragment, { children: [!(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
-                getIsSomeRowsPinned('top') && (jsx(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', position: 'sticky', top: tableHeadHeight - 1, zIndex: 1 }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: getTopRows().map((row, rowIndex) => {
+                getIsSomeRowsPinned('top') && (jsx(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, position: 'sticky', top: tableHeadHeight - 1, zIndex: 1 }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: getTopRows().map((row, rowIndex) => {
                     const props = {
                         columnVirtualizer,
                         measureElement: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement,
@@ -918,10 +916,10 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
                         virtualPaddingRight,
                     };
                     return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
-                }) }))), jsx(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', height: rowVirtualizer
+                }) }))), jsx(TableBody, 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 ? (jsx("tr", { style: { display: layoutMode === 'grid' ? 'grid' : 'table-row' }, children: jsx("td", { colSpan: table.getVisibleLeafColumns().length, style: {
-                            display: layoutMode === 'grid' ? 'grid' : 'table-cell',
+                        : '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 ? (jsx("tr", { style: { display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined }, children: 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 : (jsx(Typography, { sx: {
                                 color: 'text.secondary',
                                 fontStyle: 'italic',
@@ -952,7 +950,7 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
                         };
                         return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
                     }) }))) })), !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
-                getIsSomeRowsPinned('bottom') && (jsx(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ bottom: tableFooterHeight - 1, display: layoutMode === 'grid' ? 'grid' : 'table-row-group', position: 'sticky', zIndex: 1 }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: getBottomRows().map((row, rowIndex) => {
+                getIsSomeRowsPinned('bottom') && (jsx(TableBody, 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,
                         measureElement: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement,
@@ -980,7 +978,7 @@ const MRT_TableFooterCell = ({ footer, table, }) => {
         column,
         table,
     }));
-    return (jsx(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: footer.colSpan, variant: "head" }, tableCellProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-cell', fontWeight: 'bold', justifyContent: columnDefType === 'group' ? 'center' : undefined, p: density === 'compact'
+    return (jsx(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: footer.colSpan, variant: "head" }, tableCellProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : 'table-cell', fontWeight: 'bold', justifyContent: columnDefType === 'group' ? 'center' : undefined, p: density === 'compact'
                 ? '0.5rem'
                 : density === 'comfortable'
                     ? '1rem'
@@ -1006,7 +1004,7 @@ const MRT_TableFooterRow = ({ footerGroup, table, virtualColumns, virtualPadding
         footerGroup,
         table,
     });
-    return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.04), display: layoutMode === 'grid' ? 'flex' : 'table-row', width: '100%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : footerGroup.headers).map((footerOrVirtualFooter) => {
+    return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.05), display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, width: '100%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : footerGroup.headers).map((footerOrVirtualFooter) => {
                 const footer = virtualColumns
                     ? footerGroup.headers[footerOrVirtualFooter.index]
                     : footerOrVirtualFooter;
@@ -1027,7 +1025,7 @@ const MRT_TableFooter = ({ table, virtualColumns, virtualPaddingLeft, virtualPad
                 // @ts-ignore
                 tableFooterProps.ref.current = ref;
             }
-        }, sx: (theme) => (Object.assign({ bottom: stickFooter ? 0 : undefined, display: layoutMode === 'grid' ? 'grid' : 'table-row-group', opacity: stickFooter ? 0.97 : undefined, outline: stickFooter
+        }, sx: (theme) => (Object.assign({ bottom: stickFooter ? 0 : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, opacity: stickFooter ? 0.97 : undefined, outline: stickFooter
                 ? theme.palette.mode === 'light'
                     ? `1px solid ${theme.palette.grey[300]}`
                     : `1px solid ${theme.palette.grey[700]}`
@@ -1945,7 +1943,7 @@ const MRT_TableHeadCell = ({ header, table, }) => {
             if (node) {
                 tableHeadCellRefs.current[column.id] = node;
             }
-        } }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ flexDirection: layoutMode === 'grid' ? 'column' : undefined, fontWeight: 'bold', overflow: 'visible', p: density === 'compact'
+        } }, 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'
                 ? '0.5rem'
                 : density === 'comfortable'
                     ? columnDefType === 'display'
@@ -2012,7 +2010,7 @@ const MRT_TableHeadRow = ({ headerGroup, table, virtualColumns, virtualPaddingLe
         headerGroup,
         table,
     });
-    return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.04), boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`, display: layoutMode === 'grid' ? 'flex' : 'table-row', top: 0 }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : headerGroup.headers).map((headerOrVirtualHeader) => {
+    return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.05), boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, top: 0 }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : headerGroup.headers).map((headerOrVirtualHeader) => {
                 const header = virtualColumns
                     ? headerGroup.headers[headerOrVirtualHeader.index]
                     : headerOrVirtualHeader;
@@ -2020,208 +2018,6 @@ const MRT_TableHeadRow = ({ headerGroup, table, virtualColumns, virtualPaddingLe
             }), virtualPaddingRight ? (jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
 };
 
-const MRT_TableHead = ({ table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
-    const { getHeaderGroups, getState, options: { enableStickyHeader, layoutMode, muiTableHeadProps }, refs: { tableHeadRef }, } = table;
-    const { isFullScreen } = getState();
-    const tableHeadProps = parseFromValuesOrFunc(muiTableHeadProps, { table });
-    const stickyHeader = enableStickyHeader || isFullScreen;
-    return (jsx(TableHead, Object.assign({}, tableHeadProps, { ref: (ref) => {
-            tableHeadRef.current = ref;
-            if (tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.ref) {
-                // @ts-ignore
-                tableHeadProps.ref.current = ref;
-            }
-        }, sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', opacity: 0.97, position: stickyHeader ? 'sticky' : 'relative', top: stickyHeader && layoutMode === 'grid' ? 0 : undefined, zIndex: stickyHeader ? 2 : undefined }, parseFromValuesOrFunc(tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx, theme))), children: getHeaderGroups().map((headerGroup) => (jsx(MRT_TableHeadRow, { headerGroup: headerGroup, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight }, headerGroup.id))) })));
-};
-
-const MRT_Table = ({ table, }) => {
-    var _a, _b, _c, _d;
-    const { getFlatHeaders, getState, options: { columnVirtualizerInstanceRef, columnVirtualizerOptions, columns, enableColumnPinning, enableColumnResizing, enableColumnVirtualization, enableStickyHeader, enableTableFooter, enableTableHead, layoutMode, memoMode, muiTableProps, }, refs: { tableContainerRef }, } = table;
-    const { columnPinning, columnSizing, columnSizingInfo, columnVisibility, isFullScreen, } = getState();
-    const tableProps = parseFromValuesOrFunc(muiTableProps, { table });
-    const columnVirtualizerProps = parseFromValuesOrFunc(columnVirtualizerOptions, { table });
-    const columnSizeVars = useMemo(() => {
-        const headers = getFlatHeaders();
-        const colSizes = {};
-        for (let i = 0; i < headers.length; i++) {
-            const header = headers[i];
-            const colSize = header.getSize();
-            colSizes[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
-            colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
-        }
-        return colSizes;
-    }, [columns, columnSizing, columnSizingInfo, columnVisibility]);
-    //get first 16 column widths and average them
-    const averageColumnWidth = useMemo(() => {
-        var _a, _b, _c, _d;
-        if (!enableColumnVirtualization)
-            return 0;
-        const columnsWidths = (_d = (_c = (_b = (_a = table
-            .getRowModel()
-            .rows[0]) === null || _a === void 0 ? void 0 : _a.getCenterVisibleCells()) === null || _b === void 0 ? void 0 : _b.slice(0, 16)) === null || _c === void 0 ? void 0 : _c.map((cell) => cell.column.getSize() * 1.2)) !== null && _d !== void 0 ? _d : [];
-        return columnsWidths.reduce((a, b) => a + b, 0) / columnsWidths.length;
-    }, [table.getRowModel().rows, columnPinning, columnVisibility]);
-    const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(() => enableColumnVirtualization && enableColumnPinning
-        ? [
-            table.getLeftLeafColumns().map((c) => c.getPinnedIndex()),
-            table
-                .getRightLeafColumns()
-                .map((c) => table.getVisibleLeafColumns().length - c.getPinnedIndex() - 1),
-        ]
-        : [[], []], [columnPinning, enableColumnVirtualization, enableColumnPinning]);
-    const columnVirtualizer = enableColumnVirtualization
-        ? useVirtualizer(Object.assign({ count: table.getVisibleLeafColumns().length, estimateSize: () => averageColumnWidth, getScrollElement: () => tableContainerRef.current, horizontal: true, overscan: 3, rangeExtractor: useCallback((range) => [
-                ...new Set([
-                    ...leftPinnedIndexes,
-                    ...defaultRangeExtractor(range),
-                    ...rightPinnedIndexes,
-                ]),
-            ], [leftPinnedIndexes, rightPinnedIndexes]) }, columnVirtualizerProps))
-        : undefined;
-    if (columnVirtualizerInstanceRef && columnVirtualizer) {
-        columnVirtualizerInstanceRef.current = columnVirtualizer;
-    }
-    const virtualColumns = columnVirtualizer
-        ? columnVirtualizer.getVirtualItems()
-        : undefined;
-    let virtualPaddingLeft;
-    let virtualPaddingRight;
-    if (columnVirtualizer && (virtualColumns === null || virtualColumns === void 0 ? void 0 : virtualColumns.length)) {
-        virtualPaddingLeft = (_b = (_a = virtualColumns[leftPinnedIndexes.length]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0;
-        virtualPaddingRight =
-            columnVirtualizer.getTotalSize() -
-                ((_d = (_c = virtualColumns[virtualColumns.length - 1 - rightPinnedIndexes.length]) === null || _c === void 0 ? void 0 : _c.end) !== null && _d !== void 0 ? _d : 0);
-    }
-    const props = {
-        table,
-        virtualColumns,
-        virtualPaddingLeft,
-        virtualPaddingRight,
-    };
-    return (jsx(Fragment, { children: jsxs(Table, Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { style: Object.assign(Object.assign({}, columnSizeVars), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style), sx: (theme) => (Object.assign({ borderCollapse: 'separate', display: layoutMode === 'grid' ? 'grid' : 'table', tableLayout: layoutMode !== 'grid' && enableColumnResizing ? 'fixed' : undefined }, parseFromValuesOrFunc(tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx, theme))), children: [enableTableHead && jsx(MRT_TableHead, Object.assign({}, props)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsx(Memo_MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))) : (jsx(MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))), enableTableFooter && jsx(MRT_TableFooter, Object.assign({}, props))] })) }));
-};
-
-const MRT_EditActionButtons = ({ row, table, variant = 'icon', }) => {
-    const { getState, options: { icons: { CancelIcon, SaveIcon }, localization, onCreatingRowCancel, onCreatingRowSave, onEditingRowCancel, onEditingRowSave, }, refs: { editInputRefs }, setCreatingRow, setEditingRow, } = table;
-    const { creatingRow, editingRow, isSaving } = getState();
-    const isCreating = (creatingRow === null || creatingRow === void 0 ? void 0 : creatingRow.id) === row.id;
-    const isEditing = (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id;
-    const handleCancel = () => {
-        if (isCreating) {
-            onCreatingRowCancel === null || onCreatingRowCancel === void 0 ? void 0 : onCreatingRowCancel({ row, table });
-            setCreatingRow(null);
-        }
-        else if (isEditing) {
-            onEditingRowCancel === null || onEditingRowCancel === void 0 ? void 0 : onEditingRowCancel({ row, table });
-            setEditingRow(null);
-        }
-        row._valuesCache = {}; //reset values cache
-    };
-    const handleSubmitRow = () => {
-        var _a;
-        //look for auto-filled input values
-        (_a = Object.values(editInputRefs === null || editInputRefs === void 0 ? void 0 : editInputRefs.current)
-            .filter((inputRef) => { var _a, _b; return row.id === ((_b = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.name) === null || _a === void 0 ? void 0 : _a.split('_')) === null || _b === void 0 ? void 0 : _b[0]); })) === null || _a === void 0 ? void 0 : _a.forEach((input) => {
-            if (input.value !== undefined &&
-                Object.hasOwn(row === null || row === void 0 ? void 0 : row._valuesCache, input.name)) {
-                // @ts-ignore
-                row._valuesCache[input.name] = input.value;
-            }
-        });
-        if (isCreating)
-            onCreatingRowSave === null || onCreatingRowSave === void 0 ? void 0 : onCreatingRowSave({
-                exitCreatingMode: () => setCreatingRow(null),
-                row,
-                table,
-                values: row._valuesCache,
-            });
-        else if (isEditing) {
-            onEditingRowSave === null || onEditingRowSave === void 0 ? void 0 : onEditingRowSave({
-                exitEditingMode: () => setEditingRow(null),
-                row,
-                table,
-                values: row === null || row === void 0 ? void 0 : row._valuesCache,
-            });
-        }
-    };
-    return (jsx(Box, { onClick: (e) => e.stopPropagation(), sx: { display: 'flex', gap: '0.75rem' }, children: variant === 'icon' ? (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, title: localization.cancel, children: jsx(IconButton, { "aria-label": localization.cancel, onClick: handleCancel, children: jsx(CancelIcon, {}) }) }), jsx(Tooltip, { arrow: true, title: localization.save, children: jsx(IconButton, { "aria-label": localization.save, color: "info", onClick: handleSubmitRow, children: isSaving ? jsx(CircularProgress, { size: 18 }) : jsx(SaveIcon, {}) }) })] })) : (jsxs(Fragment, { children: [jsx(Button, { onClick: handleCancel, sx: { minWidth: '100px' }, children: localization.cancel }), jsxs(Button, { onClick: handleSubmitRow, sx: { minWidth: '100px' }, variant: "contained", children: [isSaving && jsx(CircularProgress, { color: "inherit", size: 18 }), localization.save] })] })) }));
-};
-
-const MRT_EditRowModal = ({ open, table, }) => {
-    var _a;
-    const { getState, options: { localization, muiCreateRowModalProps, muiEditRowModalProps, onCreatingRowCancel, onEditingRowCancel, renderCreateRowModalContent, renderEditRowModalContent, }, setCreatingRow, setEditingRow, } = table;
-    const { creatingRow, editingRow } = getState();
-    const row = (creatingRow !== null && creatingRow !== void 0 ? creatingRow : editingRow);
-    const dialogProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiEditRowModalProps, { row, table })), (creatingRow &&
-        parseFromValuesOrFunc(muiCreateRowModalProps, { row, table })));
-    const internalEditComponents = row
-        .getAllCells()
-        .filter((cell) => cell.column.columnDef.columnDefType === 'data')
-        .map((cell) => (jsx(MRT_EditCellTextField, { cell: cell, table: table }, cell.id)));
-    return (jsx(Dialog, Object.assign({ fullWidth: true, maxWidth: "xs", onClose: (event, reason) => {
-            var _a;
-            if (creatingRow) {
-                onCreatingRowCancel === null || onCreatingRowCancel === void 0 ? void 0 : onCreatingRowCancel({ row, table });
-                setCreatingRow(null);
-            }
-            else {
-                onEditingRowCancel === null || onEditingRowCancel === void 0 ? void 0 : onEditingRowCancel({ row, table });
-                setEditingRow(null);
-            }
-            row._valuesCache = {}; //reset values cache
-            (_a = dialogProps.onClose) === null || _a === void 0 ? void 0 : _a.call(dialogProps, event, reason);
-        }, open: open }, dialogProps, { children: (_a = ((creatingRow &&
-            (renderCreateRowModalContent === null || renderCreateRowModalContent === void 0 ? void 0 : renderCreateRowModalContent({
-                internalEditComponents,
-                row,
-                table,
-            }))) ||
-            (renderEditRowModalContent === null || renderEditRowModalContent === void 0 ? void 0 : renderEditRowModalContent({
-                internalEditComponents,
-                row,
-                table,
-            })))) !== null && _a !== void 0 ? _a : (jsxs(Fragment, { children: [jsx(DialogTitle, { sx: { textAlign: 'center' }, children: localization.edit }), jsx(DialogContent, { children: jsx("form", { onSubmit: (e) => e.preventDefault(), children: jsx(Stack, { sx: {
-                                gap: '24px',
-                                paddingTop: '16px',
-                                width: '100%',
-                            }, children: internalEditComponents }) }) }), jsx(DialogActions, { sx: { p: '1.25rem' }, children: jsx(MRT_EditActionButtons, { row: row, table: table, variant: "text" }) })] })) })));
-};
-
-const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-const MRT_TableContainer = ({ table, }) => {
-    const { getState, options: { createDisplayMode, editDisplayMode, enableStickyHeader, muiTableContainerProps, }, refs: { bottomToolbarRef, tableContainerRef, topToolbarRef }, } = table;
-    const { creatingRow, editingRow, isFullScreen } = getState();
-    const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
-    const tableContainerProps = parseFromValuesOrFunc(muiTableContainerProps, {
-        table,
-    });
-    useIsomorphicLayoutEffect(() => {
-        var _a, _b, _c, _d;
-        const topToolbarHeight = typeof document !== 'undefined'
-            ? (_b = (_a = topToolbarRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0
-            : 0;
-        const bottomToolbarHeight = typeof document !== 'undefined'
-            ? (_d = (_c = bottomToolbarRef === null || bottomToolbarRef === void 0 ? void 0 : bottomToolbarRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : 0
-            : 0;
-        setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
-    });
-    const createModalOpen = createDisplayMode === 'modal' && creatingRow;
-    const editModalOpen = editDisplayMode === 'modal' && editingRow;
-    return (jsxs(TableContainer, Object.assign({}, tableContainerProps, { ref: (node) => {
-            if (node) {
-                tableContainerRef.current = node;
-                if (tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.ref) {
-                    //@ts-ignore
-                    tableContainerProps.ref.current = node;
-                }
-            }
-        }, style: Object.assign({ maxHeight: isFullScreen
-                ? `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: [jsx(MRT_Table, { table: table }), (createModalOpen || editModalOpen) && (jsx(MRT_EditRowModal, { open: true, table: table }))] })));
-};
-
 const MRT_LinearProgressBar = ({ isTopToolbar, table, }) => {
     const { getState, options: { muiLinearProgressProps }, } = table;
     const { isLoading, showProgressBars } = getState();
@@ -2237,25 +2033,52 @@ const MRT_LinearProgressBar = ({ isTopToolbar, table, }) => {
         }, unmountOnExit: true, children: jsx(LinearProgress, Object.assign({ "aria-busy": "true", "aria-label": "Loading", sx: { position: 'relative' } }, linearProgressProps)) }));
 };
 
-const defaultPageSizeOptions = [5, 10, 15, 20, 25, 30, 50, 100];
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+function __rest(s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+}
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];
 const MRT_TablePagination = ({ position = 'bottom', table, }) => {
-    const { getPrePaginationRowModel, getState, options: { enableToolbarInternalActions, icons: { ChevronLefIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon }, localization, muiTablePaginationProps, paginationDisplayMode, rowCount, }, setPageIndex, setPageSize, } = table;
+    const { getPrePaginationRowModel, getState, options: { enableToolbarInternalActions, icons: { ChevronLeftIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon }, localization, muiPaginationProps, paginationDisplayMode, rowCount, }, setPageIndex, setPageSize, } = table;
     const { pagination: { pageIndex = 0, pageSize = 10 }, showGlobalFilter, } = getState();
-    const paginationProps = parseFromValuesOrFunc(muiTablePaginationProps, {
+    const paginationProps = parseFromValuesOrFunc(muiPaginationProps, {
         table,
     });
     const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length;
     const numberOfPages = Math.ceil(totalRowCount / pageSize);
     const showFirstLastPageButtons = numberOfPages > 2;
-    const showFirstButton = showFirstLastPageButtons && (paginationProps === null || paginationProps === void 0 ? void 0 : paginationProps.showFirstButton) !== false;
-    const showLastButton = showFirstLastPageButtons && (paginationProps === null || paginationProps === void 0 ? void 0 : paginationProps.showLastButton) !== false;
     const firstRowIndex = pageIndex * pageSize;
     const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
+    const _a = paginationProps !== null && paginationProps !== void 0 ? paginationProps : {}, { showRowsPerPage = true, rowsPerPageOptions = defaultRowsPerPage, showFirstButton = showFirstLastPageButtons, showLastButton = showFirstLastPageButtons } = _a, rest = __rest(_a, ["showRowsPerPage", "rowsPerPageOptions", "showFirstButton", "showLastButton"]);
     return (jsxs(Box, { sx: {
             alignItems: 'center',
             display: 'flex',
             gap: '8px',
             justifyContent: 'space-between',
+            justifySelf: 'flex-end',
             mt: position === 'top' &&
                 enableToolbarInternalActions &&
                 !showGlobalFilter
@@ -2265,33 +2088,147 @@ const MRT_TablePagination = ({ position = 'bottom', table, }) => {
             px: '4px',
             py: '12px',
             zIndex: 2,
-        }, children: [(paginationProps === null || paginationProps === void 0 ? void 0 : paginationProps.showRowsPerPage) !== false && (jsxs(Box, { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsx(InputLabel, { htmlFor: "mrt-rows-per-page", sx: { mb: 0 }, children: localization.rowsPerPage }), jsx(Select, { id: "mrt-rows-per-page", label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: { '&::before': { border: 'none' }, mb: 0 }, value: pageSize, variant: "standard", children: defaultPageSizeOptions.map((value) => (jsx(MenuItem, { sx: { m: 0 }, value: value, children: value }, value))) })] })), paginationDisplayMode === 'pages' ? (jsx(Pagination, Object.assign({ count: numberOfPages, onChange: (_e, newPageIndex) => setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsx(PaginationItem, Object.assign({ slots: {
+        }, children: [showRowsPerPage && (jsxs(Box, { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsx(InputLabel, { htmlFor: "mrt-rows-per-page", sx: { mb: 0 }, children: localization.rowsPerPage }), jsx(Select, { inputProps: { 'aria-label': localization.rowsPerPage }, id: "mrt-rows-per-page", label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: { '&::before': { border: 'none' }, mb: 0 }, value: pageSize, variant: "standard", children: rowsPerPageOptions.map((value) => (jsx(MenuItem, { sx: { m: 0 }, value: value, children: value }, value))) })] })), paginationDisplayMode === 'pages' ? (jsx(Pagination, Object.assign({ count: numberOfPages, onChange: (_e, newPageIndex) => setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsx(PaginationItem, Object.assign({ slots: {
                         first: FirstPageIcon,
                         last: LastPageIcon,
                         next: ChevronRightIcon,
-                        previous: ChevronLefIcon,
-                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, paginationProps))) : paginationDisplayMode === 'default' ? (jsxs(Fragment, { children: [jsx(Typography, { mb: "0", mx: "8px", variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxs(Box, { gap: "xs", children: [showFirstButton && (jsx(IconButton, { "aria-label": localization.goToFirstPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(0), size: "small", children: jsx(FirstPageIcon, {}) })), jsx(IconButton, { "aria-label": localization.goToPreviousPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsx(ChevronLefIcon, {}) }), jsx(IconButton, { "aria-label": localization.goToNextPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsx(ChevronRightIcon, {}) }), showLastButton && (jsx(IconButton, { "aria-label": localization.goToLastPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsx(LastPageIcon, {}) }))] })] })) : null] }));
+                        previous: ChevronLeftIcon,
+                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, rest))) : paginationDisplayMode === 'default' ? (jsxs(Fragment, { children: [jsx(Typography, { sx: { mb: 0, mx: '4px', minWidth: '10ch' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxs(Box, { gap: "xs", children: [showFirstButton && (jsx(IconButton, { "aria-label": localization.goToFirstPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(0), size: "small", children: jsx(FirstPageIcon, {}) })), jsx(IconButton, { "aria-label": localization.goToPreviousPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsx(ChevronLeftIcon, {}) }), jsx(IconButton, { "aria-label": localization.goToNextPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsx(ChevronRightIcon, {}) }), showLastButton && (jsx(IconButton, { "aria-label": localization.goToLastPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsx(LastPageIcon, {}) }))] })] })) : null] }));
 };
 
-const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
-    var _a, _b;
-    const { getPrePaginationRowModel, getSelectedRowModel, getState, options: { localization, muiToolbarAlertBannerChipProps, muiToolbarAlertBannerProps, positionToolbarAlertBanner, rowCount, }, } = table;
-    const { grouping, showAlertBanner } = getState();
-    const alertProps = parseFromValuesOrFunc(muiToolbarAlertBannerProps, {
+const MRT_GlobalFilterTextField = ({ table, }) => {
+    var _a;
+    const { getState, options: { enableGlobalFilterModes, icons: { CloseIcon, SearchIcon }, localization, manualFiltering, muiSearchTextFieldProps, }, refs: { searchInputRef }, setGlobalFilter, } = table;
+    const { globalFilter, showGlobalFilter } = getState();
+    const textFieldProps = parseFromValuesOrFunc(muiSearchTextFieldProps, {
         table,
     });
-    const chipProps = parseFromValuesOrFunc(muiToolbarAlertBannerChipProps, {
-        table,
+    const isMounted = useRef(false);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [searchValue, setSearchValue] = useState(globalFilter !== null && globalFilter !== void 0 ? globalFilter : '');
+    const handleChangeDebounced = useCallback(debounce((event) => {
+        var _a;
+        setGlobalFilter((_a = event.target.value) !== null && _a !== void 0 ? _a : undefined);
+    }, manualFiltering ? 500 : 250), []);
+    const handleChange = (event) => {
+        setSearchValue(event.target.value);
+        handleChangeDebounced(event);
+    };
+    const handleGlobalFilterMenuOpen = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClear = () => {
+        setSearchValue('');
+        setGlobalFilter(undefined);
+    };
+    useEffect(() => {
+        if (isMounted.current) {
+            if (globalFilter === undefined) {
+                handleClear();
+            }
+            else {
+                setSearchValue(globalFilter);
+            }
+        }
+        isMounted.current = true;
+    }, [globalFilter]);
+    return (jsxs(Collapse, { in: showGlobalFilter, mountOnEnter: true, orientation: "horizontal", unmountOnExit: true, children: [jsx(TextField, Object.assign({ InputProps: {
+                    endAdornment: (jsx(InputAdornment, { position: "end", children: jsx(Tooltip, { arrow: true, title: (_a = localization.clearSearch) !== null && _a !== void 0 ? _a : '', children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.clearSearch, disabled: !(searchValue === null || searchValue === void 0 ? void 0 : searchValue.length), onClick: handleClear, size: "small", children: jsx(CloseIcon, {}) }) }) }) })),
+                    startAdornment: enableGlobalFilterModes ? (jsx(InputAdornment, { position: "start", children: jsx(Tooltip, { arrow: true, title: localization.changeSearchMode, children: jsx(IconButton, { "aria-label": localization.changeSearchMode, onClick: handleGlobalFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsx(SearchIcon, {}) }) }) })) : (jsx(SearchIcon, { style: { marginRight: '4px' } })),
+                }, onChange: handleChange, placeholder: localization.search, value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "standard" }, textFieldProps, { inputRef: (inputRef) => {
+                    searchInputRef.current = inputRef;
+                    if (textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.inputRef) {
+                        textFieldProps.inputRef = inputRef;
+                    }
+                } })), jsx(MRT_FilterOptionMenu, { anchorEl: anchorEl, onSelect: handleClear, setAnchorEl: setAnchorEl, table: table })] }));
+};
+
+const MRT_SelectCheckbox = ({ row, selectAll, table, }) => {
+    var _a;
+    const { getState, options: { enableMultiRowSelection, enableRowPinning, localization, muiSelectAllCheckboxProps, muiSelectCheckboxProps, rowPinningDisplayMode, selectAllMode, }, } = table;
+    const { density, isLoading } = getState();
+    const checkboxProps = !row
+        ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
+        : parseFromValuesOrFunc(muiSelectCheckboxProps, { row, table });
+    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()), 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: [] });
+                }
+            }
+        }, size: (density === 'compact' ? 'small' : 'medium') }, checkboxProps), { onClick: (e) => {
+            var _a;
+            e.stopPropagation();
+            (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
+        }, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.5rem', m: density !== 'compact' ? '-0.4rem' : undefined, width: density === 'compact' ? '1.75rem' : '2.5rem', zIndex: 0 }, parseFromValuesOrFunc(checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx, theme))), title: undefined });
+    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _a !== void 0 ? _a : (selectAll
+            ? localization.toggleSelectAll
+            : localization.toggleSelectRow), children: enableMultiRowSelection === false ? (jsx(Radio, Object.assign({}, commonProps))) : (jsx(Checkbox, Object.assign({ indeterminate: selectAll
+                ? table.getIsSomeRowsSelected() && !allRowsSelected
+                : row === null || row === void 0 ? void 0 : row.getIsSomeSelected() }, commonProps))) }));
+};
+
+const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
+    var _a, _b, _c;
+    const { getPrePaginationRowModel, getSelectedRowModel, getState, options: { enableRowSelection, enableSelectAll, localization, muiToolbarAlertBannerChipProps, muiToolbarAlertBannerProps, positionToolbarAlertBanner, renderToolbarAlertBannerContent, rowCount, }, refs: { tablePaperRef }, } = table;
+    const { density, grouping, showAlertBanner } = getState();
+    const alertProps = parseFromValuesOrFunc(muiToolbarAlertBannerProps, {
+        table,
+    });
+    const chipProps = parseFromValuesOrFunc(muiToolbarAlertBannerChipProps, {
+        table,
     });
-    const selectMessage = getSelectedRowModel().rows.length > 0
+    const selectedAlert = getSelectedRowModel().rows.length > 0
         ? (_b = (_a = localization.selectedCountOfRowCountRowsSelected) === null || _a === void 0 ? void 0 : _a.replace('{selectedCount}', getSelectedRowModel().rows.length.toString())) === null || _b === void 0 ? void 0 : _b.replace('{rowCount}', (rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length).toString())
         : null;
-    const groupedByMessage = 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 || !!selectMessage || !!groupedByMessage, timeout: stackAlertBanner ? 200 : 0, children: jsxs(Alert, Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => (Object.assign({ borderRadius: 0, fontSize: '1rem', left: 0, mb: stackAlertBanner
-                    ? 0
-                    : positionToolbarAlertBanner === 'bottom'
-                        ? '-1rem'
-                        : undefined, p: 0, position: 'relative', right: 0, top: 0, width: '100%', zIndex: 2 }, parseFromValuesOrFunc(alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx, theme))), children: [(alertProps === null || alertProps === void 0 ? void 0 : alertProps.title) && jsx(AlertTitle, { children: alertProps.title }), jsxs(Box, { sx: { p: '0.5rem 1rem' }, children: [alertProps === null || alertProps === void 0 ? void 0 : alertProps.children, (alertProps === null || alertProps === void 0 ? void 0 : alertProps.children) && (selectMessage || groupedByMessage) && (jsx("br", {})), selectMessage, selectMessage && groupedByMessage && jsx("br", {}), groupedByMessage] })] })) }));
+    const groupedAlert = grouping.length > 0 ? (jsxs("span", { children: [localization.groupedBy, ' ', grouping.map((columnId, index) => (jsxs(Fragment$1, { children: [index > 0 ? localization.thenBy : '', jsx(Chip, Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))] }, `${index}-${columnId}`)))] })) : null;
+    return (jsx(Collapse, { in: showAlertBanner || !!selectedAlert || !!groupedAlert, timeout: stackAlertBanner ? 200 : 0, children: jsx(Alert, Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => {
+                var _a, _b;
+                return (Object.assign({ '& .MuiAlert-message': {
+                        maxWidth: `calc(${(_b = (_a = tablePaperRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 360}px - 1rem)`,
+                        width: '100%',
+                    }, borderRadius: 0, fontSize: '1rem', left: 0, mb: stackAlertBanner
+                        ? 0
+                        : positionToolbarAlertBanner === 'bottom'
+                            ? '-1rem'
+                            : undefined, p: 0, position: 'relative', right: 0, top: 0, width: '100%', zIndex: 2 }, parseFromValuesOrFunc(alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx, theme)));
+            }, children: (_c = renderToolbarAlertBannerContent === null || renderToolbarAlertBannerContent === void 0 ? void 0 : renderToolbarAlertBannerContent({
+                groupedAlert,
+                selectedAlert,
+                table,
+            })) !== null && _c !== void 0 ? _c : (jsxs(Fragment, { children: [(alertProps === null || alertProps === void 0 ? void 0 : alertProps.title) && jsx(AlertTitle, { children: alertProps.title }), jsxs(Stack, { sx: {
+                            p: positionToolbarAlertBanner !== 'head-overlay'
+                                ? '0.5rem 1rem'
+                                : density === 'spacious'
+                                    ? '0.75rem 1.25rem'
+                                    : density === 'comfortable'
+                                        ? '0.5rem 0.75rem'
+                                        : '0.25rem 0.5rem',
+                        }, children: [alertProps === null || alertProps === void 0 ? void 0 : alertProps.children, (alertProps === null || alertProps === void 0 ? void 0 : alertProps.children) && (selectedAlert || groupedAlert) && (jsx("br", {})), jsxs(Box, { sx: { display: 'flex' }, children: [enableRowSelection &&
+                                        enableSelectAll &&
+                                        positionToolbarAlertBanner === 'head-overlay' && (jsx(MRT_SelectCheckbox, { selectAll: true, table: table })), ' ', selectedAlert] }), selectedAlert && groupedAlert && jsx("br", {}), groupedAlert] })] })) })) }));
 };
 
 const MRT_ToolbarDropZone = ({ table, }) => {
@@ -2325,33 +2262,6 @@ const MRT_ToolbarDropZone = ({ table, }) => {
             }), children: jsx(Typography, { fontStyle: "italic", children: localization.dropToGroupBy.replace('{column}', (_b = (_a = draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.columnDef) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : '') }) }) }));
 };
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-function __rest(s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-}
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-  var e = new Error(message);
-  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 const MRT_ColumnPinningButtons = ({ column, table, }) => {
     const { options: { icons: { PushPinIcon }, localization, }, } = table;
     const handlePinColumn = (pinDirection) => {
@@ -2519,7 +2429,7 @@ const MRT_ToggleFullScreenButton = (_a) => {
         setTooltipOpened(false);
         setIsFullScreen(!isFullScreen);
     };
-    return (jsx(Tooltip, { arrow: true, open: tooltipOpened, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen, children: jsx(IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleFullScreen, onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false) }, rest, { title: undefined, children: isFullScreen ? jsx(FullscreenExitIcon, {}) : jsx(FullscreenIcon, {}) })) }));
+    return (jsx(Tooltip, { arrow: true, open: tooltipOpened, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen, children: jsx(IconButton, Object.assign({ "aria-label": localization.toggleFullScreen, onClick: handleToggleFullScreen, onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false) }, rest, { title: undefined, children: isFullScreen ? jsx(FullscreenExitIcon, {}) : jsx(FullscreenIcon, {}) })) }));
 };
 
 const MRT_ToggleGlobalFilterButton = (_a) => {
@@ -2550,56 +2460,9 @@ const MRT_ToolbarInternalButtons = ({ table, }) => {
                     columnFilterDisplayMode !== 'popover' && (jsx(MRT_ToggleFiltersButton, { table: table })), (enableHiding || enableColumnOrdering || enableColumnPinning) && (jsx(MRT_ShowHideColumnsButton, { table: table })), enableDensityToggle && (jsx(MRT_ToggleDensePaddingButton, { table: table })), enableFullScreenToggle && (jsx(MRT_ToggleFullScreenButton, { table: table }))] })) }));
 };
 
-const MRT_GlobalFilterTextField = ({ table, }) => {
-    var _a;
-    const { getState, options: { enableGlobalFilterModes, icons: { CloseIcon, SearchIcon }, localization, manualFiltering, muiSearchTextFieldProps, }, refs: { searchInputRef }, setGlobalFilter, } = table;
-    const { globalFilter, showGlobalFilter } = getState();
-    const textFieldProps = parseFromValuesOrFunc(muiSearchTextFieldProps, {
-        table,
-    });
-    const isMounted = useRef(false);
-    const [anchorEl, setAnchorEl] = useState(null);
-    const [searchValue, setSearchValue] = useState(globalFilter !== null && globalFilter !== void 0 ? globalFilter : '');
-    const handleChangeDebounced = useCallback(debounce((event) => {
-        var _a;
-        setGlobalFilter((_a = event.target.value) !== null && _a !== void 0 ? _a : undefined);
-    }, manualFiltering ? 500 : 250), []);
-    const handleChange = (event) => {
-        setSearchValue(event.target.value);
-        handleChangeDebounced(event);
-    };
-    const handleGlobalFilterMenuOpen = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
-    const handleClear = () => {
-        setSearchValue('');
-        setGlobalFilter(undefined);
-    };
-    useEffect(() => {
-        if (isMounted.current) {
-            if (globalFilter === undefined) {
-                handleClear();
-            }
-            else {
-                setSearchValue(globalFilter);
-            }
-        }
-        isMounted.current = true;
-    }, [globalFilter]);
-    return (jsxs(Collapse, { in: showGlobalFilter, mountOnEnter: true, orientation: "horizontal", unmountOnExit: true, children: [jsx(TextField, Object.assign({ InputProps: {
-                    endAdornment: (jsx(InputAdornment, { position: "end", children: jsx(Tooltip, { arrow: true, title: (_a = localization.clearSearch) !== null && _a !== void 0 ? _a : '', children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.clearSearch, disabled: !(searchValue === null || searchValue === void 0 ? void 0 : searchValue.length), onClick: handleClear, size: "small", children: jsx(CloseIcon, {}) }) }) }) })),
-                    startAdornment: enableGlobalFilterModes ? (jsx(InputAdornment, { position: "start", children: jsx(Tooltip, { arrow: true, title: localization.changeSearchMode, children: jsx(IconButton, { "aria-label": localization.changeSearchMode, onClick: handleGlobalFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsx(SearchIcon, {}) }) }) })) : (jsx(SearchIcon, { style: { marginRight: '4px' } })),
-                }, onChange: handleChange, placeholder: localization.search, value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "standard" }, textFieldProps, { inputRef: (inputRef) => {
-                    searchInputRef.current = inputRef;
-                    if (textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.inputRef) {
-                        textFieldProps.inputRef = inputRef;
-                    }
-                } })), jsx(MRT_FilterOptionMenu, { anchorEl: anchorEl, onSelect: handleClear, setAnchorEl: setAnchorEl, table: table })] }));
-};
-
 const commonToolbarStyles = ({ theme }) => ({
     alignItems: 'flex-start',
-    backgroundColor: lighten(theme.palette.background.default, 0.04),
+    backgroundColor: lighten(theme.palette.background.default, 0.05),
     backgroundImage: 'none',
     display: 'grid',
     flexWrap: 'wrap-reverse',
@@ -2672,6 +2535,214 @@ const MRT_BottomToolbar = ({ table, }) => {
                             ['both', 'bottom'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (jsx(MRT_TablePagination, { position: "bottom", table: table })) })] })] })));
 };
 
+const MRT_TableHead = ({ table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
+    const { getHeaderGroups, getSelectedRowModel, getState, options: { enableStickyHeader, layoutMode, muiTableHeadProps, positionToolbarAlertBanner, }, refs: { tableHeadRef }, } = table;
+    const { isFullScreen, showAlertBanner } = getState();
+    const tableHeadProps = parseFromValuesOrFunc(muiTableHeadProps, { table });
+    const stickyHeader = enableStickyHeader || isFullScreen;
+    return (jsx(TableHead, Object.assign({}, tableHeadProps, { ref: (ref) => {
+            tableHeadRef.current = ref;
+            if (tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.ref) {
+                // @ts-ignore
+                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) ? (jsx("tr", { style: { display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined }, children: jsx("th", { colSpan: table.getVisibleLeafColumns().length, style: {
+                    display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : 'table-cell',
+                    padding: 0,
+                }, children: jsx(MRT_ToolbarAlertBanner, { table: table }) }) })) : (getHeaderGroups().map((headerGroup) => (jsx(MRT_TableHeadRow, { headerGroup: headerGroup, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight }, headerGroup.id)))) })));
+};
+
+const MRT_Table = ({ table, }) => {
+    var _a, _b, _c, _d;
+    const { getFlatHeaders, getState, options: { columnVirtualizerInstanceRef, columnVirtualizerOptions, columns, enableColumnPinning, enableColumnResizing, enableColumnVirtualization, enableStickyHeader, enableTableFooter, enableTableHead, layoutMode, memoMode, muiTableProps, }, refs: { tableContainerRef }, } = table;
+    const { columnPinning, columnSizing, columnSizingInfo, columnVisibility, isFullScreen, } = getState();
+    const tableProps = parseFromValuesOrFunc(muiTableProps, { table });
+    const columnVirtualizerProps = parseFromValuesOrFunc(columnVirtualizerOptions, { table });
+    const columnSizeVars = useMemo(() => {
+        const headers = getFlatHeaders();
+        const colSizes = {};
+        for (let i = 0; i < headers.length; i++) {
+            const header = headers[i];
+            const colSize = header.getSize();
+            colSizes[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
+            colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
+        }
+        return colSizes;
+    }, [columns, columnSizing, columnSizingInfo, columnVisibility]);
+    //get first 16 column widths and average them
+    const averageColumnWidth = useMemo(() => {
+        var _a, _b, _c, _d;
+        if (!enableColumnVirtualization)
+            return 0;
+        const columnsWidths = (_d = (_c = (_b = (_a = table
+            .getRowModel()
+            .rows[0]) === null || _a === void 0 ? void 0 : _a.getCenterVisibleCells()) === null || _b === void 0 ? void 0 : _b.slice(0, 16)) === null || _c === void 0 ? void 0 : _c.map((cell) => cell.column.getSize() * 1.2)) !== null && _d !== void 0 ? _d : [];
+        return columnsWidths.reduce((a, b) => a + b, 0) / columnsWidths.length;
+    }, [table.getRowModel().rows, columnPinning, columnVisibility]);
+    const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(() => enableColumnVirtualization && enableColumnPinning
+        ? [
+            table.getLeftLeafColumns().map((c) => c.getPinnedIndex()),
+            table
+                .getRightLeafColumns()
+                .map((c) => table.getVisibleLeafColumns().length - c.getPinnedIndex() - 1),
+        ]
+        : [[], []], [columnPinning, enableColumnVirtualization, enableColumnPinning]);
+    const columnVirtualizer = enableColumnVirtualization
+        ? useVirtualizer(Object.assign({ count: table.getVisibleLeafColumns().length, estimateSize: () => averageColumnWidth, getScrollElement: () => tableContainerRef.current, horizontal: true, overscan: 3, rangeExtractor: useCallback((range) => [
+                ...new Set([
+                    ...leftPinnedIndexes,
+                    ...defaultRangeExtractor(range),
+                    ...rightPinnedIndexes,
+                ]),
+            ], [leftPinnedIndexes, rightPinnedIndexes]) }, columnVirtualizerProps))
+        : undefined;
+    if (columnVirtualizerInstanceRef && columnVirtualizer) {
+        columnVirtualizerInstanceRef.current = columnVirtualizer;
+    }
+    const virtualColumns = columnVirtualizer
+        ? columnVirtualizer.getVirtualItems()
+        : undefined;
+    let virtualPaddingLeft;
+    let virtualPaddingRight;
+    if (columnVirtualizer && (virtualColumns === null || virtualColumns === void 0 ? void 0 : virtualColumns.length)) {
+        virtualPaddingLeft = (_b = (_a = virtualColumns[leftPinnedIndexes.length]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0;
+        virtualPaddingRight =
+            columnVirtualizer.getTotalSize() -
+                ((_d = (_c = virtualColumns[virtualColumns.length - 1 - rightPinnedIndexes.length]) === null || _c === void 0 ? void 0 : _c.end) !== null && _d !== void 0 ? _d : 0);
+    }
+    const props = {
+        table,
+        virtualColumns,
+        virtualPaddingLeft,
+        virtualPaddingRight,
+    };
+    return (jsx(Fragment, { children: jsxs(Table, Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { style: Object.assign(Object.assign({}, columnSizeVars), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style), sx: (theme) => (Object.assign({ borderCollapse: 'separate', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, tableLayout: layoutMode === 'semantic' && enableColumnResizing
+                    ? 'fixed'
+                    : undefined }, parseFromValuesOrFunc(tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx, theme))), children: [enableTableHead && jsx(MRT_TableHead, Object.assign({}, props)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsx(Memo_MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))) : (jsx(MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))), enableTableFooter && jsx(MRT_TableFooter, Object.assign({}, props))] })) }));
+};
+
+const MRT_EditActionButtons = ({ row, table, variant = 'icon', }) => {
+    const { getState, options: { icons: { CancelIcon, SaveIcon }, localization, onCreatingRowCancel, onCreatingRowSave, onEditingRowCancel, onEditingRowSave, }, refs: { editInputRefs }, setCreatingRow, setEditingRow, } = table;
+    const { creatingRow, editingRow, isSaving } = getState();
+    const isCreating = (creatingRow === null || creatingRow === void 0 ? void 0 : creatingRow.id) === row.id;
+    const isEditing = (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id;
+    const handleCancel = () => {
+        if (isCreating) {
+            onCreatingRowCancel === null || onCreatingRowCancel === void 0 ? void 0 : onCreatingRowCancel({ row, table });
+            setCreatingRow(null);
+        }
+        else if (isEditing) {
+            onEditingRowCancel === null || onEditingRowCancel === void 0 ? void 0 : onEditingRowCancel({ row, table });
+            setEditingRow(null);
+        }
+        row._valuesCache = {}; //reset values cache
+    };
+    const handleSubmitRow = () => {
+        var _a;
+        //look for auto-filled input values
+        (_a = Object.values(editInputRefs === null || editInputRefs === void 0 ? void 0 : editInputRefs.current)
+            .filter((inputRef) => { var _a, _b; return row.id === ((_b = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.name) === null || _a === void 0 ? void 0 : _a.split('_')) === null || _b === void 0 ? void 0 : _b[0]); })) === null || _a === void 0 ? void 0 : _a.forEach((input) => {
+            if (input.value !== undefined &&
+                Object.hasOwn(row === null || row === void 0 ? void 0 : row._valuesCache, input.name)) {
+                // @ts-ignore
+                row._valuesCache[input.name] = input.value;
+            }
+        });
+        if (isCreating)
+            onCreatingRowSave === null || onCreatingRowSave === void 0 ? void 0 : onCreatingRowSave({
+                exitCreatingMode: () => setCreatingRow(null),
+                row,
+                table,
+                values: row._valuesCache,
+            });
+        else if (isEditing) {
+            onEditingRowSave === null || onEditingRowSave === void 0 ? void 0 : onEditingRowSave({
+                exitEditingMode: () => setEditingRow(null),
+                row,
+                table,
+                values: row === null || row === void 0 ? void 0 : row._valuesCache,
+            });
+        }
+    };
+    return (jsx(Box, { onClick: (e) => e.stopPropagation(), sx: { display: 'flex', gap: '0.75rem' }, children: variant === 'icon' ? (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, title: localization.cancel, children: jsx(IconButton, { "aria-label": localization.cancel, onClick: handleCancel, children: jsx(CancelIcon, {}) }) }), jsx(Tooltip, { arrow: true, title: localization.save, children: jsx(IconButton, { "aria-label": localization.save, color: "info", onClick: handleSubmitRow, children: isSaving ? jsx(CircularProgress, { size: 18 }) : jsx(SaveIcon, {}) }) })] })) : (jsxs(Fragment, { children: [jsx(Button, { onClick: handleCancel, sx: { minWidth: '100px' }, children: localization.cancel }), jsxs(Button, { onClick: handleSubmitRow, sx: { minWidth: '100px' }, variant: "contained", children: [isSaving && jsx(CircularProgress, { color: "inherit", size: 18 }), localization.save] })] })) }));
+};
+
+const MRT_EditRowModal = ({ open, table, }) => {
+    var _a;
+    const { getState, options: { localization, muiCreateRowModalProps, muiEditRowModalProps, onCreatingRowCancel, onEditingRowCancel, renderCreateRowModalContent, renderEditRowModalContent, }, setCreatingRow, setEditingRow, } = table;
+    const { creatingRow, editingRow } = getState();
+    const row = (creatingRow !== null && creatingRow !== void 0 ? creatingRow : editingRow);
+    const dialogProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiEditRowModalProps, { row, table })), (creatingRow &&
+        parseFromValuesOrFunc(muiCreateRowModalProps, { row, table })));
+    const internalEditComponents = row
+        .getAllCells()
+        .filter((cell) => cell.column.columnDef.columnDefType === 'data')
+        .map((cell) => (jsx(MRT_EditCellTextField, { cell: cell, table: table }, cell.id)));
+    return (jsx(Dialog, Object.assign({ fullWidth: true, maxWidth: "xs", onClose: (event, reason) => {
+            var _a;
+            if (creatingRow) {
+                onCreatingRowCancel === null || onCreatingRowCancel === void 0 ? void 0 : onCreatingRowCancel({ row, table });
+                setCreatingRow(null);
+            }
+            else {
+                onEditingRowCancel === null || onEditingRowCancel === void 0 ? void 0 : onEditingRowCancel({ row, table });
+                setEditingRow(null);
+            }
+            row._valuesCache = {}; //reset values cache
+            (_a = dialogProps.onClose) === null || _a === void 0 ? void 0 : _a.call(dialogProps, event, reason);
+        }, open: open }, dialogProps, { children: (_a = ((creatingRow &&
+            (renderCreateRowModalContent === null || renderCreateRowModalContent === void 0 ? void 0 : renderCreateRowModalContent({
+                internalEditComponents,
+                row,
+                table,
+            }))) ||
+            (renderEditRowModalContent === null || renderEditRowModalContent === void 0 ? void 0 : renderEditRowModalContent({
+                internalEditComponents,
+                row,
+                table,
+            })))) !== null && _a !== void 0 ? _a : (jsxs(Fragment, { children: [jsx(DialogTitle, { sx: { textAlign: 'center' }, children: localization.edit }), jsx(DialogContent, { children: jsx("form", { onSubmit: (e) => e.preventDefault(), children: jsx(Stack, { sx: {
+                                gap: '24px',
+                                paddingTop: '16px',
+                                width: '100%',
+                            }, children: internalEditComponents }) }) }), jsx(DialogActions, { sx: { p: '1.25rem' }, children: jsx(MRT_EditActionButtons, { row: row, table: table, variant: "text" }) })] })) })));
+};
+
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+const MRT_TableContainer = ({ table, }) => {
+    const { getState, options: { createDisplayMode, editDisplayMode, enableStickyHeader, muiTableContainerProps, }, refs: { bottomToolbarRef, tableContainerRef, topToolbarRef }, } = table;
+    const { creatingRow, editingRow, isFullScreen } = getState();
+    const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
+    const tableContainerProps = parseFromValuesOrFunc(muiTableContainerProps, {
+        table,
+    });
+    useIsomorphicLayoutEffect(() => {
+        var _a, _b, _c, _d;
+        const topToolbarHeight = typeof document !== 'undefined'
+            ? (_b = (_a = topToolbarRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0
+            : 0;
+        const bottomToolbarHeight = typeof document !== 'undefined'
+            ? (_d = (_c = bottomToolbarRef === null || bottomToolbarRef === void 0 ? void 0 : bottomToolbarRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : 0
+            : 0;
+        setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
+    });
+    const createModalOpen = createDisplayMode === 'modal' && creatingRow;
+    const editModalOpen = editDisplayMode === 'modal' && editingRow;
+    return (jsxs(TableContainer, Object.assign({}, tableContainerProps, { ref: (node) => {
+            if (node) {
+                tableContainerRef.current = node;
+                if (tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.ref) {
+                    //@ts-ignore
+                    tableContainerProps.ref.current = node;
+                }
+            }
+        }, style: Object.assign({ maxHeight: isFullScreen
+                ? `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: [jsx(MRT_Table, { table: table }), (createModalOpen || editModalOpen) && (jsx(MRT_EditRowModal, { open: true, table: table }))] })));
+};
+
 const MRT_TablePaper = ({ table, }) => {
     var _a, _b;
     const { getState, options: { enableBottomToolbar, enableTopToolbar, muiTablePaperProps, renderBottomToolbar, renderTopToolbar, }, refs: { tablePaperRef }, } = table;
@@ -2823,53 +2894,6 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, table, }) => {
             parseFromValuesOrFunc(enableEditing, row) ? (jsx(Tooltip, { arrow: true, placement: "right", title: localization.edit, children: jsx(IconButton, { "aria-label": localization.edit, onClick: handleStartEditMode, sx: commonIconButtonStyles, children: jsx(EditIcon, {}) }) })) : renderRowActionMenuItems ? (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions, children: jsx(IconButton, { "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles, children: jsx(MoreHorizIcon, {}) }) }), jsx(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, table: table })] })) : null }));
 };
 
-const MRT_SelectCheckbox = ({ row, selectAll, table, }) => {
-    var _a;
-    const { getState, options: { enableMultiRowSelection, enableRowPinning, localization, muiSelectAllCheckboxProps, muiSelectCheckboxProps, rowPinningDisplayMode, selectAllMode, }, } = table;
-    const { density, isLoading } = getState();
-    const checkboxProps = !row
-        ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
-        : parseFromValuesOrFunc(muiSelectCheckboxProps, { row, table });
-    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()), 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: [] });
-                }
-            }
-        }, size: (density === 'compact' ? 'small' : 'medium') }, checkboxProps), { onClick: (e) => {
-            var _a;
-            e.stopPropagation();
-            (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
-        }, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.5rem', m: density !== 'compact' ? '-0.4rem' : undefined, width: density === 'compact' ? '1.75rem' : '2.5rem', zIndex: 0 }, parseFromValuesOrFunc(checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx, theme))), title: undefined });
-    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _a !== void 0 ? _a : (selectAll
-            ? localization.toggleSelectAll
-            : localization.toggleSelectRow), children: enableMultiRowSelection === false ? (jsx(Radio, Object.assign({}, commonProps))) : (jsx(Checkbox, Object.assign({ indeterminate: selectAll
-                ? table.getIsSomeRowsSelected() && !allRowsSelected
-                : row === null || row === void 0 ? void 0 : row.getIsSomeSelected() }, commonProps))) }));
-};
-
 const useMRT_DisplayColumns = ({ columnOrder, creatingRow, grouping, tableOptions, }) => {
     var _a, _b;
     return useMemo(() => {
@@ -3251,7 +3275,7 @@ const MRT_Default_Icons = {
     ArrowDownwardIcon,
     ArrowRightIcon,
     CancelIcon,
-    ChevronLefIcon,
+    ChevronLeftIcon,
     ChevronRightIcon,
     ClearAllIcon,
     CloseIcon,
@@ -3384,8 +3408,13 @@ const useMRT_TableOptions = (_a) => {
     const _sortingFns = useMemo(() => (Object.assign(Object.assign({}, MRT_SortingFns), sortingFns)), []);
     const _defaultColumn = useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultColumn), defaultColumn)), [defaultColumn]);
     const _defaultDisplayColumn = useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultDisplayColumn), defaultDisplayColumn)), [defaultDisplayColumn]);
-    if (rest.enableRowVirtualization || rest.enableColumnVirtualization) {
-        layoutMode = 'grid';
+    if (layoutMode === 'semantic') {
+        if (rest.enableRowVirtualization || rest.enableColumnVirtualization) {
+            layoutMode = 'grid';
+        }
+        if (enableColumnResizing) {
+            layoutMode = 'grid-no-grow';
+        }
     }
     if (rest.enableRowVirtualization) {
         enableStickyHeader = true;