release v2.4.1

Author: KevinVandy

apps/material-react-table-docs/pages/changelog.mdx

@@ -12,6 +12,12 @@ import Head from 'next/head';
 
 ### Version 2
 
+#### Version 2.4.1 - 2024-01-05
+
+- Fixed MUI Pagination disabled tooltip warning
+- Fixed Column Pinning Spacing with Column Virtualization
+- Fixed Column Action Clear Filter Item when filterFn was "empty" or "notEmpty"
+
 #### Version 2.4.0 - 2024-01-04
 
 - Upgraded to TanStack Table `v8.11.3` for bug fixes with expanding and row selection

packages/material-react-table/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.4.0",
+  "version": "2.4.1",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

packages/material-react-table/src/toolbar/MRT_TablePagination.tsx

@@ -72,6 +72,9 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
     ..._rest
   } = paginationProps ?? {};
 
+  const disableBack = pageIndex <= 0 || disabled;
+  const disableNext = lastRowIndex >= totalRowCount || disabled;
+
   return (
     <Box
       className="MuiTablePagination-root"
@@ -166,47 +169,55 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
           } ${totalRowCount.toLocaleString()}`}</Typography>
           <Box gap="xs">
             {showFirstButton && (
-              <Tooltip title={localization.goToFirstPage}>
+              <Tooltip enterDelay={1000} title={localization.goToFirstPage}>
+                <span>
+                  <IconButton
+                    aria-label={localization.goToFirstPage}
+                    disabled={disableBack}
+                    onClick={() => setPageIndex(0)}
+                    size="small"
+                  >
+                    <FirstPageIcon />
+                  </IconButton>
+                </span>
+              </Tooltip>
+            )}
+            <Tooltip enterDelay={1000} title={localization.goToPreviousPage}>
+              <span>
                 <IconButton
-                  aria-label={localization.goToFirstPage}
-                  disabled={pageIndex <= 0 || disabled}
-                  onClick={() => setPageIndex(0)}
+                  aria-label={localization.goToPreviousPage}
+                  disabled={disableBack}
+                  onClick={() => setPageIndex(pageIndex - 1)}
                   size="small"
                 >
-                  <FirstPageIcon />
+                  <ChevronLeftIcon />
                 </IconButton>
-              </Tooltip>
-            )}
-            <Tooltip title={localization.goToPreviousPage}>
-              <IconButton
-                aria-label={localization.goToPreviousPage}
-                disabled={pageIndex <= 0 || disabled}
-                onClick={() => setPageIndex(pageIndex - 1)}
-                size="small"
-              >
-                <ChevronLeftIcon />
-              </IconButton>
+              </span>
             </Tooltip>
-            <Tooltip title={localization.goToNextPage}>
-              <IconButton
-                aria-label={localization.goToNextPage}
-                disabled={lastRowIndex >= totalRowCount || disabled}
-                onClick={() => setPageIndex(pageIndex + 1)}
-                size="small"
-              >
-                <ChevronRightIcon />
-              </IconButton>
-            </Tooltip>
-            {showLastButton && (
-              <Tooltip title={localization.goToLastPage}>
+            <Tooltip enterDelay={1000} title={localization.goToNextPage}>
+              <span>
                 <IconButton
-                  aria-label={localization.goToLastPage}
-                  disabled={lastRowIndex >= totalRowCount || disabled}
-                  onClick={() => setPageIndex(numberOfPages - 1)}
+                  aria-label={localization.goToNextPage}
+                  disabled={disableNext}
+                  onClick={() => setPageIndex(pageIndex + 1)}
                   size="small"
                 >
-                  <LastPageIcon />
+                  <ChevronRightIcon />
                 </IconButton>
+              </span>
+            </Tooltip>
+            {showLastButton && (
+              <Tooltip enterDelay={1000} title={localization.goToLastPage}>
+                <span>
+                  <IconButton
+                    aria-label={localization.goToLastPage}
+                    disabled={disableNext}
+                    onClick={() => setPageIndex(numberOfPages - 1)}
+                    size="small"
+                  >
+                    <LastPageIcon />
+                  </IconButton>
+                </span>
               </Tooltip>
             )}
           </Box>