material-react-table 2.0.0-beta.0 → 2.0.0-beta.1

package/README.md

@@ -120,7 +120,7 @@ npm install material-react-table
 > Read the full usage docs [here](https://www.material-react-table.com/docs/getting-started/usage/)
 
 ```jsx
-import React, { useMemo, useRef, useState, useEffect } from 'react';
+import { useMemo, useRef, useState, useEffect } from 'react';
 import { MaterialReactTable } from 'material-react-table';
 
 const data = [

package/dist/cjs/index.js

@@ -620,11 +620,11 @@ const MRT_EditCellTextField = ({ cell, table, }) => {
                     textFieldProps.inputRef = inputRef;
                 }
             }
-        }, label: ['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode))
-            ? column.columnDef.header
+        }, label: !['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode))
+            ? columnDef.header
             : undefined, margin: "none", name: column.id, placeholder: !['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode))
             ? columnDef.header
-            : undefined, select: isSelectEdit, value: value, variant: "standard" }, textFieldProps, { onBlur: handleBlur, onChange: handleChange, onClick: (e) => {
+            : undefined, select: isSelectEdit, value: value, variant: "standard" }, textFieldProps, { InputProps: Object.assign({ disableUnderline: editDisplayMode === 'table' }, textFieldProps.InputProps), inputProps: Object.assign({ autoComplete: 'new-password' }, textFieldProps.inputProps), onBlur: handleBlur, onChange: handleChange, onClick: (e) => {
             var _a;
             e.stopPropagation();
             (_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.onClick) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
@@ -652,7 +652,7 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
     var _a, _b, _c, _d;
     const theme = styles.useTheme();
     const { getState, options: { createDisplayMode, editDisplayMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enableRowNumbers, layoutMode, muiSkeletonProps, muiTableBodyCellProps, rowNumberMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
-    const { creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
+    const { columnSizingInfo, creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
     const { column, row } = cell;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
@@ -689,12 +689,17 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
         const isHoveredRow = (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id;
         const isFirstColumn = getIsFirstColumn(column, table);
         const isLastColumn = getIsLastColumn(column, table);
-        const isLastRow = rowIndex === numRows - 1;
+        const isLastRow = numRows && rowIndex === numRows - 1;
         const borderStyle = isDraggingColumn || isDraggingRow
             ? `1px dashed ${theme.palette.text.secondary} !important`
-            : isHoveredColumn || isHoveredRow
+            : isHoveredColumn ||
+                isHoveredRow ||
+                columnSizingInfo.isResizingColumn === column.id
                 ? `2px dashed ${theme.palette.primary.main} !important`
                 : undefined;
+        if (columnSizingInfo.isResizingColumn === column.id) {
+            return { borderRight: borderStyle };
+        }
         return borderStyle
             ? {
                 borderBottom: isDraggingRow || isHoveredRow || isLastRow
@@ -713,7 +718,14 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
                 borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
             }
             : undefined;
-    }, [draggingColumn, draggingRow, hoveredColumn, hoveredRow, rowIndex]);
+    }, [
+        columnSizingInfo.isResizingColumn,
+        draggingColumn,
+        draggingRow,
+        hoveredColumn,
+        hoveredRow,
+        rowIndex,
+    ]);
     const isEditable = parseFromValuesOrFunc(enableEditing, row) &&
         parseFromValuesOrFunc(columnDef.enableEditing, row) !== false;
     const isEditing = isEditable &&
@@ -820,7 +832,7 @@ const MRT_TableDetailPanel = ({ parentRowRef, row, rowIndex, table, virtualRow,
                     : undefined, width: '100%', zIndex: virtualRow ? 2 : undefined }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme)));
         }, children: jsxRuntime.jsx(TableCell__default["default"], Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow
                     ? styles.lighten(theme.palette.background.default, 0.05)
-                    : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : 'table-cell', pb: row.getIsExpanded() ? '1rem' : 0, pt: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: renderDetailPanel && (jsxRuntime.jsx(Collapse__default["default"], { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: !isLoading && renderDetailPanel({ row, table }) })) })) })));
+                    : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : 'table-cell', py: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: renderDetailPanel && (jsxRuntime.jsx(Collapse__default["default"], { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: !isLoading && renderDetailPanel({ row, table }) })) })) })));
 };
 
 const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRowIds, row, rowIndex, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, virtualRow, }) => {
@@ -940,8 +952,8 @@ const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFil
 
 const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
     var _a, _b, _c, _d, _e, _f;
-    const { getBottomRows, getCenterRows, getIsSomeRowsPinned, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { enableGlobalFilterRankedResults, enablePagination, enableRowPinning, enableRowVirtualization, enableStickyFooter, enableStickyHeader, layoutMode, localization, manualExpanding, manualFiltering, manualGrouping, manualPagination, manualSorting, memoMode, muiTableBodyProps, renderEmptyRowsFallback, rowPinningDisplayMode, rowVirtualizerInstanceRef, rowVirtualizerOptions, }, refs: { tableContainerRef, tableFooterRef, tableHeadRef, tablePaperRef }, } = table;
-    const { columnFilters, density, draggingRow, expanded, globalFilter, isFullScreen, pagination, rowPinning, sorting, } = getState();
+    const { getBottomRows, getCenterRows, getIsSomeRowsPinned, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { createDisplayMode, enableGlobalFilterRankedResults, enablePagination, enableRowPinning, enableRowVirtualization, enableStickyFooter, enableStickyHeader, layoutMode, localization, manualExpanding, manualFiltering, manualGrouping, manualPagination, manualSorting, memoMode, muiTableBodyProps, renderEmptyRowsFallback, rowPinningDisplayMode, rowVirtualizerInstanceRef, rowVirtualizerOptions, }, refs: { tableContainerRef, tableFooterRef, tableHeadRef, tablePaperRef }, } = table;
+    const { columnFilters, creatingRow, density, draggingRow, expanded, globalFilter, isFullScreen, pagination, rowPinning, sorting, } = getState();
     const tableBodyProps = parseFromValuesOrFunc(muiTableBodyProps, { table });
     const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
         table,
@@ -1024,44 +1036,44 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
                         virtualPaddingRight,
                     };
                     return memoMode === 'rows' ? (jsxRuntime.jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsxRuntime.jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
-                }) }))), jsxRuntime.jsx(TableBody__default["default"], Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, height: rowVirtualizer
+                }) }))), jsxRuntime.jsxs(TableBody__default["default"], Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, height: rowVirtualizer
                         ? `${rowVirtualizer.getTotalSize()}px`
-                        : 'inherit', minHeight: !rows.length ? '100px' : undefined, position: 'relative' }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: (_c = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _c !== void 0 ? _c : (!rows.length ? (jsxRuntime.jsx("tr", { style: {
-                        display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
-                    }, children: jsxRuntime.jsx("td", { colSpan: table.getVisibleLeafColumns().length, style: {
-                            display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid'))
-                                ? 'grid'
-                                : 'table-cell',
-                        }, children: (_d = renderEmptyRowsFallback === null || renderEmptyRowsFallback === void 0 ? void 0 : renderEmptyRowsFallback({ table })) !== null && _d !== void 0 ? _d : (jsxRuntime.jsx(Typography__default["default"], { sx: {
-                                color: 'text.secondary',
-                                fontStyle: 'italic',
-                                maxWidth: `min(100vw, ${(_f = (_e = tablePaperRef.current) === null || _e === void 0 ? void 0 : _e.clientWidth) !== null && _f !== void 0 ? _f : 360}px)`,
-                                py: '2rem',
-                                textAlign: 'center',
-                                width: '100%',
-                            }, children: globalFilter || columnFilters.length
-                                ? localization.noResultsFound
-                                : localization.noRecordsToDisplay })) }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (virtualRows !== null && virtualRows !== void 0 ? virtualRows : rows).map((rowOrVirtualRow, rowIndex) => {
-                        const row = rowVirtualizer
-                            ? rows[rowOrVirtualRow.index]
-                            : rowOrVirtualRow;
-                        const props = {
-                            columnVirtualizer,
-                            measureElement: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement,
-                            numRows: rows.length,
-                            pinnedRowIds,
-                            row,
-                            rowIndex: rowVirtualizer ? rowOrVirtualRow.index : rowIndex,
-                            table,
-                            virtualColumns,
-                            virtualPaddingLeft,
-                            virtualPaddingRight,
-                            virtualRow: rowVirtualizer
-                                ? rowOrVirtualRow
-                                : undefined,
-                        };
-                        return memoMode === 'rows' ? (jsxRuntime.jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsxRuntime.jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
-                    }) }))) })), !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
+                        : 'inherit', minHeight: !rows.length ? '100px' : undefined, position: 'relative' }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: [creatingRow && createDisplayMode === 'row' && (jsxRuntime.jsx(MRT_TableBodyRow, { row: creatingRow, rowIndex: -1, table: table })), (_c = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _c !== void 0 ? _c : (!rows.length ? (jsxRuntime.jsx("tr", { style: {
+                            display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
+                        }, children: jsxRuntime.jsx("td", { colSpan: table.getVisibleLeafColumns().length, style: {
+                                display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid'))
+                                    ? 'grid'
+                                    : 'table-cell',
+                            }, children: (_d = renderEmptyRowsFallback === null || renderEmptyRowsFallback === void 0 ? void 0 : renderEmptyRowsFallback({ table })) !== null && _d !== void 0 ? _d : (jsxRuntime.jsx(Typography__default["default"], { sx: {
+                                    color: 'text.secondary',
+                                    fontStyle: 'italic',
+                                    maxWidth: `min(100vw, ${(_f = (_e = tablePaperRef.current) === null || _e === void 0 ? void 0 : _e.clientWidth) !== null && _f !== void 0 ? _f : 360}px)`,
+                                    py: '2rem',
+                                    textAlign: 'center',
+                                    width: '100%',
+                                }, children: globalFilter || columnFilters.length
+                                    ? localization.noResultsFound
+                                    : localization.noRecordsToDisplay })) }) })) : (jsxRuntime.jsx(jsxRuntime.Fragment, { children: (virtualRows !== null && virtualRows !== void 0 ? virtualRows : rows).map((rowOrVirtualRow, rowIndex) => {
+                            const row = rowVirtualizer
+                                ? rows[rowOrVirtualRow.index]
+                                : rowOrVirtualRow;
+                            const props = {
+                                columnVirtualizer,
+                                measureElement: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement,
+                                numRows: rows.length,
+                                pinnedRowIds,
+                                row,
+                                rowIndex: rowVirtualizer ? rowOrVirtualRow.index : rowIndex,
+                                table,
+                                virtualColumns,
+                                virtualPaddingLeft,
+                                virtualPaddingRight,
+                                virtualRow: rowVirtualizer
+                                    ? rowOrVirtualRow
+                                    : undefined,
+                            };
+                            return memoMode === 'rows' ? (jsxRuntime.jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsxRuntime.jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
+                        }) })))] })), !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
                 getIsSomeRowsPinned('bottom') && (jsxRuntime.jsx(TableBody__default["default"], Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ bottom: tableFooterHeight - 1, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, position: 'sticky', zIndex: 1 }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: getBottomRows().map((row, rowIndex) => {
                     const props = {
                         columnVirtualizer,
@@ -1953,13 +1965,17 @@ const MRT_TableHeadCellResizeHandle = ({ header, table, }) => {
         }, sx: (theme) => ({
             '&:active > hr': {
                 backgroundColor: theme.palette.info.main,
-                opacity: 1,
+                opacity: header.subHeaders.length ? 1 : 0,
             },
             cursor: 'col-resize',
-            mr: density === 'compact' ? '-0.75rem' : '-1rem',
+            mr: density === 'compact'
+                ? '-12px'
+                : density === 'comfortable'
+                    ? '-20px'
+                    : '-28px',
             position: 'absolute',
             px: '4px',
-            right: '4px',
+            right: '0',
         }), children: jsxRuntime.jsx(Divider__default["default"], { className: "Mui-TableHeadCell-ResizeHandle-Divider", flexItem: true, orientation: "vertical", sx: {
                 borderRadius: '2px',
                 borderWidth: '2px',
@@ -2004,7 +2020,7 @@ const MRT_TableHeadCell = ({ header, table, }) => {
     var _a, _b, _c, _d, _f;
     const theme = styles.useTheme();
     const { getState, options: { columnFilterDisplayMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableGrouping, enableMultiSort, layoutMode, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
-    const { density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
+    const { columnSizingInfo, density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
     const { column } = header;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
@@ -2031,18 +2047,27 @@ const MRT_TableHeadCell = ({ header, table, }) => {
             pl += 1.5;
         return pl;
     }, [showColumnActions, showDragHandle]);
-    const draggingBorder = react.useMemo(() => (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
-        ? `1px dashed ${theme.palette.text.secondary}`
-        : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
-            ? `2px dashed ${theme.palette.primary.main}`
-            : undefined, [draggingColumn, hoveredColumn]);
-    const draggingBorders = draggingBorder
-        ? {
-            borderLeft: draggingBorder,
-            borderRight: draggingBorder,
-            borderTop: draggingBorder,
+    const draggingBorders = react.useMemo(() => {
+        const borderStyle = columnSizingInfo.isResizingColumn === column.id &&
+            !header.subHeaders.length
+            ? `2px solid ${theme.palette.primary.main} !important`
+            : (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
+                ? `1px dashed ${theme.palette.text.secondary}`
+                : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
+                    ? `2px dashed ${theme.palette.primary.main}`
+                    : undefined;
+        if (columnSizingInfo.isResizingColumn === column.id) {
+            return { borderRight: borderStyle };
         }
-        : undefined;
+        const draggingBorders = borderStyle
+            ? {
+                borderLeft: borderStyle,
+                borderRight: borderStyle,
+                borderTop: borderStyle,
+            }
+            : undefined;
+        return draggingBorders;
+    }, [draggingColumn, hoveredColumn, columnSizingInfo.isResizingColumn]);
     const handleDragEnter = (_e) => {
         if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
             setHoveredColumn(null);
@@ -2197,8 +2222,9 @@ const MRT_TablePagination = ({ position = 'bottom', table, }) => {
     return (jsxRuntime.jsxs(Box__default["default"], { sx: {
             alignItems: 'center',
             display: 'flex',
+            flexWrap: 'wrap',
             gap: '8px',
-            justifyContent: 'space-between',
+            justifyContent: { md: 'space-between', sm: 'center' },
             justifySelf: 'flex-end',
             mt: position === 'top' &&
                 enableToolbarInternalActions &&
@@ -2209,12 +2235,12 @@ const MRT_TablePagination = ({ position = 'bottom', table, }) => {
             px: '4px',
             py: '12px',
             zIndex: 2,
-        }, children: [showRowsPerPage && (jsxRuntime.jsxs(Box__default["default"], { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsxRuntime.jsx(InputLabel__default["default"], { htmlFor: "mrt-rows-per-page", sx: { mb: 0 }, children: localization.rowsPerPage }), jsxRuntime.jsx(Select__default["default"], { id: "mrt-rows-per-page", inputProps: { 'aria-label': localization.rowsPerPage }, label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: { '&::before': { border: 'none' }, mb: 0 }, value: pageSize, variant: "standard", children: rowsPerPageOptions.map((value) => (jsxRuntime.jsx(MenuItem__default["default"], { sx: { m: 0 }, value: value, children: value }, value))) })] })), paginationDisplayMode === 'pages' ? (jsxRuntime.jsx(Pagination__default["default"], Object.assign({ count: numberOfPages, onChange: (_e, newPageIndex) => setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsxRuntime.jsx(PaginationItem__default["default"], Object.assign({ slots: {
+        }, children: [showRowsPerPage && (jsxRuntime.jsxs(Box__default["default"], { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsxRuntime.jsx(InputLabel__default["default"], { htmlFor: "mrt-rows-per-page", sx: { mb: 0 }, children: localization.rowsPerPage }), jsxRuntime.jsx(Select__default["default"], { disableUnderline: true, id: "mrt-rows-per-page", inputProps: { 'aria-label': localization.rowsPerPage }, label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: { mb: 0 }, value: pageSize, variant: "standard", children: rowsPerPageOptions.map((value) => (jsxRuntime.jsx(MenuItem__default["default"], { sx: { m: 0 }, value: value, children: value }, value))) })] })), paginationDisplayMode === 'pages' ? (jsxRuntime.jsx(Pagination__default["default"], Object.assign({ count: numberOfPages, onChange: (_e, newPageIndex) => setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsxRuntime.jsx(PaginationItem__default["default"], Object.assign({ slots: {
                         first: FirstPageIcon,
                         last: LastPageIcon,
                         next: ChevronRightIcon,
                         previous: ChevronLeftIcon,
-                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, rest))) : paginationDisplayMode === 'default' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography__default["default"], { sx: { mb: 0, minWidth: '10ch', mx: '4px' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxRuntime.jsxs(Box__default["default"], { gap: "xs", children: [showFirstButton && (jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToFirstPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(0), size: "small", children: jsxRuntime.jsx(FirstPageIcon, {}) })), jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToPreviousPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsxRuntime.jsx(ChevronLeftIcon, {}) }), jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToNextPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsxRuntime.jsx(ChevronRightIcon, {}) }), showLastButton && (jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToLastPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsxRuntime.jsx(LastPageIcon, {}) }))] })] })) : null] }));
+                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, rest))) : paginationDisplayMode === 'default' ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Typography__default["default"], { align: "center", sx: { mb: 0, minWidth: '10ch', mx: '4px' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxRuntime.jsxs(Box__default["default"], { gap: "xs", children: [showFirstButton && (jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToFirstPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(0), size: "small", children: jsxRuntime.jsx(FirstPageIcon, {}) })), jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToPreviousPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsxRuntime.jsx(ChevronLeftIcon, {}) }), jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToNextPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsxRuntime.jsx(ChevronRightIcon, {}) }), showLastButton && (jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.goToLastPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsxRuntime.jsx(LastPageIcon, {}) }))] })] })) : null] }));
 };
 
 const MRT_GlobalFilterTextField = ({ table, }) => {
@@ -2911,7 +2937,7 @@ const MRT_TablePaper = ({ table, }) => {
                 right: 0,
                 top: 0,
                 width: '100vw',
-                zIndex: 10,
+                zIndex: 9999,
             }
             : {})), tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.style), sx: (theme) => (Object.assign({ overflow: 'hidden', transition: 'all 100ms ease-in-out' }, parseFromValuesOrFunc(tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx, theme))), children: [enableTopToolbar &&
                 ((_a = parseFromValuesOrFunc(renderTopToolbar, { table })) !== null && _a !== void 0 ? _a : (jsxRuntime.jsx(MRT_TopToolbar, { table: table }))), jsxRuntime.jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&