material-react-table 2.12.0 → 2.13.0

package/dist/index.d.ts

@@ -630,12 +630,12 @@ type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<ColumnDef
         column: MRT_Column<TData>;
         rangeFilterIndex?: number;
         table: MRT_TableInstance<TData>;
-    }) => DatePickerProps<any>) | DatePickerProps<any>;
+    }) => DatePickerProps<never>) | DatePickerProps<never>;
     muiFilterDateTimePickerProps?: ((props: {
         column: MRT_Column<TData>;
         rangeFilterIndex?: number;
         table: MRT_TableInstance<TData>;
-    }) => DateTimePickerProps<any>) | DateTimePickerProps<any>;
+    }) => DateTimePickerProps<never>) | DateTimePickerProps<never>;
     muiFilterSliderProps?: ((props: {
         column: MRT_Column<TData>;
         table: MRT_TableInstance<TData>;
@@ -649,7 +649,7 @@ type MRT_ColumnDef<TData extends MRT_RowData, TValue = unknown> = Omit<ColumnDef
         column: MRT_Column<TData>;
         rangeFilterIndex?: number;
         table: MRT_TableInstance<TData>;
-    }) => TimePickerProps<any>) | TimePickerProps<any>;
+    }) => TimePickerProps<never>) | TimePickerProps<never>;
     muiTableBodyCellProps?: ((props: {
         cell: MRT_Cell<TData, TValue>;
         column: MRT_Column<TData>;
@@ -902,12 +902,12 @@ type MRT_TableOptions<TData extends MRT_RowData> = Omit<Partial<TableOptions<TDa
         column: MRT_Column<TData>;
         rangeFilterIndex?: number;
         table: MRT_TableInstance<TData>;
-    }) => DatePickerProps<any>) | DatePickerProps<any>;
+    }) => DatePickerProps<never>) | DatePickerProps<never>;
     muiFilterDateTimePickerProps?: ((props: {
         column: MRT_Column<TData>;
         rangeFilterIndex?: number;
         table: MRT_TableInstance<TData>;
-    }) => DateTimePickerProps<any>) | DateTimePickerProps<any>;
+    }) => DateTimePickerProps<never>) | DateTimePickerProps<never>;
     muiFilterSliderProps?: ((props: {
         column: MRT_Column<TData>;
         table: MRT_TableInstance<TData>;
@@ -921,7 +921,7 @@ type MRT_TableOptions<TData extends MRT_RowData> = Omit<Partial<TableOptions<TDa
         column: MRT_Column<TData>;
         rangeFilterIndex?: number;
         table: MRT_TableInstance<TData>;
-    }) => TimePickerProps<any>) | TimePickerProps<any>;
+    }) => TimePickerProps<never>) | TimePickerProps<never>;
     muiLinearProgressProps?: ((props: {
         isTopToolbar: boolean;
         table: MRT_TableInstance<TData>;
@@ -1146,7 +1146,6 @@ type MRT_TableOptions<TData extends MRT_RowData> = Omit<Partial<TableOptions<TDa
     renderTopToolbarCustomActions?: (props: {
         table: MRT_TableInstance<TData>;
     }) => ReactNode;
-    rowCount?: number;
     rowNumberDisplayMode?: 'original' | 'static';
     rowPinningDisplayMode?: 'bottom' | 'select-bottom' | 'select-sticky' | 'select-top' | 'sticky' | 'top' | 'top-and-bottom';
     rowVirtualizerInstanceRef?: MutableRefObject<MRT_RowVirtualizer | MRT_Virtualizer | null>;
@@ -1162,7 +1161,7 @@ type MRT_TableOptions<TData extends MRT_RowData> = Omit<Partial<TableOptions<TDa
 
 declare const flexRender: (Comp: Renderable<any>, props: any) => JSX.Element | ReactNode;
 declare function createMRTColumnHelper<TData extends MRT_RowData>(): MRT_ColumnHelper<TData>;
-declare const createRow: <TData extends MRT_RowData>(table: MRT_TableInstance<TData>, originalRow?: TData | undefined, rowIndex?: number, depth?: number, subRows?: MRT_Row<TData>[] | undefined, parentId?: string) => MRT_Row<TData>;
+declare const createRow: <TData extends MRT_RowData>(table: MRT_TableInstance<TData>, originalRow?: TData, rowIndex?: number, depth?: number, subRows?: MRT_Row<TData>[], parentId?: string) => MRT_Row<TData>;
 
 declare const isCellEditable: <TData extends MRT_RowData>({ cell, table, }: {
     cell: MRT_Cell<TData>;
@@ -1224,7 +1223,7 @@ declare function defaultDisplayColumnProps<TData extends MRT_RowData>({ header,
     readonly enableSorting?: boolean | undefined;
     readonly invertSorting?: boolean | undefined;
     readonly sortDescFirst?: boolean | undefined;
-    readonly sortUndefined?: false | 1 | -1 | undefined;
+    readonly sortUndefined?: false | 1 | -1 | "first" | "last" | undefined;
     readonly enableGrouping?: boolean | undefined;
     readonly enableResizing?: boolean | undefined;
     readonly maxSize?: number | undefined;
@@ -1327,16 +1326,16 @@ declare function defaultDisplayColumnProps<TData extends MRT_RowData>({ header,
         column: MRT_Column<TData, unknown>;
         table: MRT_TableInstance<TData>;
     }) => _mui_material.CheckboxProps) | undefined;
-    readonly muiFilterDatePickerProps?: _mui_x_date_pickers.DatePickerProps<any> | ((props: {
+    readonly muiFilterDatePickerProps?: _mui_x_date_pickers.DatePickerProps<never, false> | ((props: {
         column: MRT_Column<TData, unknown>;
         rangeFilterIndex?: number | undefined;
         table: MRT_TableInstance<TData>;
-    }) => _mui_x_date_pickers.DatePickerProps<any>) | undefined;
-    readonly muiFilterDateTimePickerProps?: _mui_x_date_pickers.DateTimePickerProps<any> | ((props: {
+    }) => _mui_x_date_pickers.DatePickerProps<never, false>) | undefined;
+    readonly muiFilterDateTimePickerProps?: _mui_x_date_pickers.DateTimePickerProps<never, false> | ((props: {
         column: MRT_Column<TData, unknown>;
         rangeFilterIndex?: number | undefined;
         table: MRT_TableInstance<TData>;
-    }) => _mui_x_date_pickers.DateTimePickerProps<any>) | undefined;
+    }) => _mui_x_date_pickers.DateTimePickerProps<never, false>) | undefined;
     readonly muiFilterSliderProps?: _mui_material.SliderProps | ((props: {
         column: MRT_Column<TData, unknown>;
         table: MRT_TableInstance<TData>;
@@ -1346,11 +1345,11 @@ declare function defaultDisplayColumnProps<TData extends MRT_RowData>({ header,
         rangeFilterIndex?: number | undefined;
         table: MRT_TableInstance<TData>;
     }) => _mui_material.TextFieldProps) | undefined;
-    readonly muiFilterTimePickerProps?: _mui_x_date_pickers.TimePickerProps<any> | ((props: {
+    readonly muiFilterTimePickerProps?: _mui_x_date_pickers.TimePickerProps<never, false> | ((props: {
         column: MRT_Column<TData, unknown>;
         rangeFilterIndex?: number | undefined;
         table: MRT_TableInstance<TData>;
-    }) => _mui_x_date_pickers.TimePickerProps<any>) | undefined;
+    }) => _mui_x_date_pickers.TimePickerProps<never, false>) | undefined;
     readonly muiTableBodyCellProps?: _mui_material.TableCellProps | ((props: {
         cell: MRT_Cell<TData, unknown>;
         column: MRT_Column<TData, unknown>;
@@ -1409,7 +1408,7 @@ declare const getIsRowSelected: <TData extends MRT_RowData>({ row, table, }: {
 }) => boolean | undefined;
 declare const getMRT_RowSelectionHandler: <TData extends MRT_RowData>({ row, staticRowIndex, table, }: {
     row: MRT_Row<TData>;
-    staticRowIndex?: number | undefined;
+    staticRowIndex?: number;
     table: MRT_TableInstance<TData>;
 }) => (event: ChangeEvent<HTMLInputElement> | MouseEvent<HTMLTableRowElement>, value?: boolean) => void;
 declare const getMRT_SelectAllHandler: <TData extends MRT_RowData>({ table }: {
@@ -1422,7 +1421,7 @@ declare const useMRT_ColumnVirtualizer: <TData extends MRT_RowData, TScrollEleme
 
 declare const useMRT_Effects: <TData extends MRT_RowData>(table: MRT_TableInstance<TData>) => void;
 
-declare const useMRT_RowVirtualizer: <TData extends MRT_RowData, TScrollElement extends Element | Window = HTMLDivElement, TItemElement extends Element = HTMLTableRowElement>(table: MRT_TableInstance<TData>, rows?: MRT_Row<TData>[] | undefined) => MRT_RowVirtualizer<TScrollElement, TItemElement> | undefined;
+declare const useMRT_RowVirtualizer: <TData extends MRT_RowData, TScrollElement extends Element | Window = HTMLDivElement, TItemElement extends Element = HTMLTableRowElement>(table: MRT_TableInstance<TData>, rows?: MRT_Row<TData>[]) => MRT_RowVirtualizer<TScrollElement, TItemElement> | undefined;
 
 declare const useMRT_Rows: <TData extends MRT_RowData>(table: MRT_TableInstance<TData>) => MRT_Row<TData>[];
 

package/dist/index.esm.js

@@ -50,6 +50,7 @@ import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { defaultRangeExtractor, useVirtualizer } from '@tanstack/react-virtual';
 import Paper from '@mui/material/Paper';
+import { useTheme as useTheme$1 } from '@mui/material';
 import TableContainer from '@mui/material/TableContainer';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
@@ -657,7 +658,7 @@ const MRT_EditActionButtons = (_a) => {
         }
     };
     return (jsx(Box, { onClick: (e) => e.stopPropagation(), sx: (theme) => (Object.assign({ display: 'flex', gap: '0.75rem' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: variant === 'icon' ? (jsxs(Fragment, { children: [jsx(Tooltip, { title: localization.cancel, children: jsx(IconButton, { "aria-label": localization.cancel, onClick: handleCancel, children: jsx(CancelIcon, {}) }) }), ((isCreating && onCreatingRowSave) ||
-                    (isEditing && onEditingRowSave)) && (jsx(Tooltip, { 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] })] })) }));
+                    (isEditing && onEditingRowSave)) && (jsx(Tooltip, { title: localization.save, children: jsx(IconButton, { "aria-label": localization.save, color: "info", disabled: isSaving, 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, { disabled: isSaving, onClick: handleSubmitRow, sx: { minWidth: '100px' }, variant: "contained", children: [isSaving && jsx(CircularProgress, { color: "inherit", size: 18 }), localization.save] })] })) }));
 };
 
 const parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, '_');
@@ -1326,11 +1327,12 @@ const useMRT_TableOptions = (_a) => {
             ? getFacetedMinMaxValues()
             : undefined, getFacetedRowModel: enableFacetedValues ? getFacetedRowModel() : undefined, getFacetedUniqueValues: enableFacetedValues
             ? getFacetedUniqueValues()
-            : undefined, getFilteredRowModel: enableColumnFilters || enableGlobalFilter || enableFilters
+            : undefined, getFilteredRowModel: (enableColumnFilters || enableGlobalFilter || enableFilters) &&
+            !manualFiltering
             ? getFilteredRowModel()
-            : undefined, getGroupedRowModel: enableGrouping ? getGroupedRowModel() : undefined, getPaginationRowModel: enablePagination
+            : undefined, getGroupedRowModel: enableGrouping && !manualGrouping ? getGroupedRowModel() : undefined, getPaginationRowModel: enablePagination && !manualPagination
             ? getPaginationRowModel()
-            : undefined, getSortedRowModel: enableSorting ? getSortedRowModel() : undefined, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows, icons,
+            : undefined, getSortedRowModel: enableSorting && !manualSorting ? getSortedRowModel() : undefined, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows, icons,
         layoutMode,
         localization,
         manualFiltering,
@@ -1645,22 +1647,23 @@ const extraIndexRangeExtractor = (range, draggingIndex) => {
 
 const useMRT_ColumnVirtualizer = (table) => {
     var _a, _b, _c, _d;
-    const { getLeftLeafColumns, getRightLeafColumns, getState, getVisibleLeafColumns, options: { columnVirtualizerInstanceRef, columnVirtualizerOptions, enableColumnPinning, enableColumnVirtualization, }, refs: { tableContainerRef }, } = table;
-    const { columnPinning, draggingColumn } = getState();
+    const { getState, options: { columnVirtualizerInstanceRef, columnVirtualizerOptions, enableColumnPinning, enableColumnVirtualization, }, refs: { tableContainerRef }, } = table;
+    const { columnPinning, columnVisibility, draggingColumn } = getState();
     if (!enableColumnVirtualization)
         return undefined;
     const columnVirtualizerProps = parseFromValuesOrFunc(columnVirtualizerOptions, {
         table,
     });
-    const visibleColumns = getVisibleLeafColumns();
+    const visibleColumns = table.getVisibleLeafColumns();
     const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(() => enableColumnPinning
         ? [
-            getLeftLeafColumns().map((c) => c.getPinnedIndex()),
-            getRightLeafColumns()
+            table.getLeftVisibleLeafColumns().map((c) => c.getPinnedIndex()),
+            table
+                .getRightVisibleLeafColumns()
                 .map((column) => visibleColumns.length - column.getPinnedIndex() - 1)
                 .sort((a, b) => a - b),
         ]
-        : [[], []], [columnPinning, enableColumnPinning]);
+        : [[], []], [columnPinning, columnVisibility, enableColumnPinning]);
     const numPinnedLeft = leftPinnedIndexes.length;
     const numPinnedRight = rightPinnedIndexes.length;
     const draggingColumnIndex = useMemo(() => (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id)
@@ -2803,26 +2806,12 @@ const MRT_FilterTextField = (_a) => {
     const { column } = header;
     const { columnDef } = column;
     const { filterVariant } = columnDef;
-    const textFieldProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterTextFieldProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterTextFieldProps, {
-        column,
-        table,
-    })), rest);
-    const autocompleteProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterAutocompleteProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterAutocompleteProps, {
-        column,
-        table,
-    }));
-    const datePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterDatePickerProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterDatePickerProps, {
-        column,
-        table,
-    }));
-    const dateTimePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterDateTimePickerProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterDateTimePickerProps, {
-        column,
-        table,
-    }));
-    const timePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterTimePickerProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterTimePickerProps, {
-        column,
-        table,
-    }));
+    const args = { column, rangeFilterIndex, table };
+    const textFieldProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterTextFieldProps, args)), parseFromValuesOrFunc(columnDef.muiFilterTextFieldProps, args)), rest);
+    const autocompleteProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterAutocompleteProps, args)), parseFromValuesOrFunc(columnDef.muiFilterAutocompleteProps, args));
+    const datePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterDatePickerProps, args)), parseFromValuesOrFunc(columnDef.muiFilterDatePickerProps, args));
+    const dateTimePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterDateTimePickerProps, args)), parseFromValuesOrFunc(columnDef.muiFilterDateTimePickerProps, args));
+    const timePickerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterTimePickerProps, args)), parseFromValuesOrFunc(columnDef.muiFilterTimePickerProps, args));
     const { allowedColumnFilterOptions, currentFilterOption, facetedUniqueValues, isAutocompleteFilter, isDateFilter, isMultiSelectFilter, isRangeFilter, isSelectFilter, isTextboxFilter, } = getColumnFilterInfo({ header, table });
     const dropdownOptions = useDropdownOptions({ header, table });
     const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
@@ -3705,13 +3694,13 @@ const MRT_TablePagination = (_a) => {
     var { position = 'bottom', table } = _a, rest = __rest(_a, ["position", "table"]);
     const theme = useTheme();
     const isMobile = useMediaQuery('(max-width: 720px)');
-    const { getPrePaginationRowModel, getState, options: { enableToolbarInternalActions, icons: { ChevronLeftIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon }, localization, muiPaginationProps, paginationDisplayMode, rowCount, }, setPageIndex, setPageSize, } = table;
+    const { getState, options: { enableToolbarInternalActions, icons: { ChevronLeftIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon }, localization, muiPaginationProps, paginationDisplayMode, }, } = table;
     const { pagination: { pageIndex = 0, pageSize = 10 }, showGlobalFilter, } = getState();
     const paginationProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiPaginationProps, {
         table,
     })), rest);
-    const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length;
-    const numberOfPages = Math.ceil(totalRowCount / pageSize);
+    const totalRowCount = table.getRowCount();
+    const numberOfPages = table.getPageCount();
     const showFirstLastPageButtons = numberOfPages > 2;
     const firstRowIndex = pageIndex * pageSize;
     const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
@@ -3741,17 +3730,17 @@ const MRT_TablePagination = (_a) => {
         }, 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, Object.assign({ MenuProps: { disableScrollLock: true }, disableUnderline: true, disabled: disabled, inputProps: {
                             'aria-label': localization.rowsPerPage,
                             id: 'mrt-rows-per-page',
-                        }, label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: { mb: 0 }, value: pageSize, variant: "standard" }, SelectProps, { children: rowsPerPageOptions.map((option) => {
+                        }, label: localization.rowsPerPage, onChange: (event) => table.setPageSize(+event.target.value), sx: { mb: 0 }, value: pageSize, variant: "standard" }, SelectProps, { children: rowsPerPageOptions.map((option) => {
                             var _a;
                             const value = typeof option !== 'number' ? option.value : option;
                             const label = typeof option !== 'number' ? option.label : `${option}`;
                             return ((_a = SelectProps === null || SelectProps === void 0 ? void 0 : SelectProps.children) !== null && _a !== void 0 ? _a : ((SelectProps === null || SelectProps === void 0 ? void 0 : SelectProps.native) ? (jsx("option", { value: value, children: label }, value)) : (jsx(MenuItem, { sx: { m: 0 }, value: value, children: label }, value))));
-                        }) }))] })), paginationDisplayMode === 'pages' ? (jsx(Pagination, Object.assign({ count: numberOfPages, disabled: disabled, onChange: (_e, newPageIndex) => setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsx(PaginationItem, Object.assign({ slots: {
+                        }) }))] })), paginationDisplayMode === 'pages' ? (jsx(Pagination, Object.assign({ count: numberOfPages, disabled: disabled, onChange: (_e, newPageIndex) => table.setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsx(PaginationItem, Object.assign({ slots: {
                         first: FirstPageIcon,
                         last: LastPageIcon,
                         next: ChevronRightIcon,
                         previous: ChevronLeftIcon,
-                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, restPaginationProps))) : paginationDisplayMode === 'default' ? (jsxs(Fragment, { children: [jsx(Typography, { align: "center", component: "span", sx: { m: '0 4px', minWidth: '8ch' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxs(Box, { gap: "xs", children: [showFirstButton && (jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToFirstPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToFirstPage, disabled: disableBack, onClick: () => setPageIndex(0), size: "small", children: jsx(FirstPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) }))), jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToPreviousPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToPreviousPage, disabled: disableBack, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsx(ChevronLeftIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToNextPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToNextPage, disabled: disableNext, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsx(ChevronRightIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), showLastButton && (jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToLastPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToLastPage, disabled: disableNext, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsx(LastPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) })))] })] })) : null] }));
+                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, restPaginationProps))) : paginationDisplayMode === 'default' ? (jsxs(Fragment, { children: [jsx(Typography, { align: "center", component: "span", sx: { m: '0 4px', minWidth: '8ch' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxs(Box, { gap: "xs", children: [showFirstButton && (jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToFirstPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToFirstPage, disabled: disableBack, onClick: () => table.firstPage(), size: "small", children: jsx(FirstPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) }))), jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToPreviousPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToPreviousPage, disabled: disableBack, onClick: () => table.previousPage(), size: "small", children: jsx(ChevronLeftIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToNextPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToNextPage, disabled: disableNext, onClick: () => table.nextPage(), size: "small", children: jsx(ChevronRightIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), showLastButton && (jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToLastPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToLastPage, disabled: disableNext, onClick: () => table.lastPage(), size: "small", children: jsx(LastPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) })))] })] })) : null] }));
 };
 
 const MRT_ToolbarDropZone = (_a) => {
@@ -3829,9 +3818,7 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
     const { columnOrder } = getState();
     const { columnDef } = column;
     const { columnDefType } = columnDef;
-    const switchChecked = (columnDefType !== 'group' && column.getIsVisible()) ||
-        (columnDefType === 'group' &&
-            column.getLeafColumns().some((col) => col.getIsVisible()));
+    const switchChecked = column.getIsVisible();
     const handleToggleColumnHidden = (column) => {
         var _a, _b;
         if (columnDefType === 'group') {
@@ -4110,6 +4097,7 @@ const MRT_TablePaper = (_a) => {
     const { getState, options: { enableBottomToolbar, enableTopToolbar, mrtTheme: { baseBackgroundColor }, muiTablePaperProps, renderBottomToolbar, renderTopToolbar, }, refs: { tablePaperRef }, } = table;
     const { isFullScreen } = getState();
     const paperProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTablePaperProps, { table })), rest);
+    const theme = useTheme$1();
     return (jsxs(Paper, Object.assign({ elevation: 2 }, paperProps, { ref: (ref) => {
             tablePaperRef.current = ref;
             if (paperProps === null || paperProps === void 0 ? void 0 : paperProps.ref) {
@@ -4129,7 +4117,7 @@ const MRT_TablePaper = (_a) => {
                 right: 0,
                 top: 0,
                 width: '100dvw',
-                zIndex: 999,
+                zIndex: theme.zIndex.modal,
             }
             : {})), paperProps === null || paperProps === void 0 ? void 0 : paperProps.style), sx: (theme) => (Object.assign({ backgroundColor: baseBackgroundColor, backgroundImage: 'unset', overflow: 'hidden', transition: 'all 100ms ease-in-out' }, parseFromValuesOrFunc(paperProps === null || paperProps === void 0 ? void 0 : paperProps.sx, theme))), children: [enableTopToolbar &&
                 ((_b = parseFromValuesOrFunc(renderTopToolbar, { table })) !== null && _b !== void 0 ? _b : (jsx(MRT_TopToolbar, { table: table }))), jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&