material-react-table 1.15.0 → 1.15.1

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.15.0",
+  "version": "1.15.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.",
@@ -60,33 +60,33 @@
     "storybook:dev": "storybook dev -p 6006"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.0",
+    "@babel/core": "^7.23.2",
     "@babel/preset-react": "^7.22.15",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@faker-js/faker": "^8.1.0",
-    "@mui/icons-material": "^5.14.9",
-    "@mui/material": "^5.14.10",
-    "@rollup/plugin-babel": "^6.0.3",
-    "@rollup/plugin-node-resolve": "^15.2.1",
-    "@rollup/plugin-typescript": "^11.1.4",
+    "@mui/icons-material": "^5.14.13",
+    "@mui/material": "^5.14.13",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-typescript": "^11.1.5",
     "@size-limit/preset-small-lib": "^9.0.0",
-    "@storybook/addon-a11y": "^7.4.5",
-    "@storybook/addon-essentials": "^7.4.5",
-    "@storybook/addon-interactions": "^7.4.5",
-    "@storybook/addon-links": "^7.4.5",
-    "@storybook/addon-storysource": "^7.4.5",
-    "@storybook/blocks": "^7.4.5",
-    "@storybook/react": "^7.4.5",
-    "@storybook/react-vite": "^7.4.5",
-    "@storybook/testing-library": "^0.2.1",
-    "@types/node": "^20.7.0",
-    "@types/react": "^18.2.22",
-    "@types/react-dom": "^18.2.7",
-    "@typescript-eslint/eslint-plugin": "^6.7.3",
-    "@typescript-eslint/parser": "^6.7.3",
+    "@storybook/addon-a11y": "^7.4.6",
+    "@storybook/addon-essentials": "^7.4.6",
+    "@storybook/addon-interactions": "^7.4.6",
+    "@storybook/addon-links": "^7.4.6",
+    "@storybook/addon-storysource": "^7.4.6",
+    "@storybook/blocks": "^7.4.6",
+    "@storybook/react": "^7.4.6",
+    "@storybook/react-vite": "^7.4.6",
+    "@storybook/testing-library": "^0.2.2",
+    "@types/node": "^20.8.6",
+    "@types/react": "^18.2.28",
+    "@types/react-dom": "^18.2.13",
+    "@typescript-eslint/eslint-plugin": "^6.7.5",
+    "@typescript-eslint/parser": "^6.7.5",
     "@vitejs/plugin-react": "^4.1.0",
-    "eslint": "^8.50.0",
+    "eslint": "^8.51.0",
     "eslint-plugin-mui-path-imports": "^0.0.15",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
@@ -94,14 +94,14 @@
     "react-is": "^18.2.0",
     "rollup": "^2.79.1",
     "rollup-plugin-copy": "^3.5.0",
-    "rollup-plugin-dts": "^6.0.2",
+    "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^9.0.0",
-    "storybook": "^7.4.5",
+    "storybook": "^7.4.6",
     "storybook-dark-mode": "^3.0.1",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2",
-    "vite": "^4.4.9"
+    "vite": "^4.4.11"
   },
   "peerDependencies": {
     "@emotion/react": ">=11",
@@ -113,8 +113,8 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.8.4",
-    "@tanstack/react-table": "8.10.3",
-    "@tanstack/react-virtual": "3.0.0-beta.60",
+    "@tanstack/react-table": "8.10.7",
+    "@tanstack/react-virtual": "3.0.0-beta.65",
     "highlight-words": "1.2.2"
   }
 }

package/src/body/MRT_TableBodyCell.tsx

@@ -253,7 +253,7 @@ export const MRT_TableBodyCell = ({
       <>
         {cell.getIsPlaceholder() ? (
           columnDef.PlaceholderCell?.({ cell, column, row, table }) ?? null
-        ) : (isLoading || showSkeletons) && cell.getValue() === null ? (
+        ) : isLoading || showSkeletons ? (
           <Skeleton
             animation="wave"
             height={20}

package/src/body/MRT_TableBodyRow.tsx

@@ -120,16 +120,18 @@ export const MRT_TableBodyRow = ({
               ? (cellOrVirtualCell as VirtualItem)
               : undefined,
           };
-          return memoMode === 'cells' &&
+          return cell ? (
+            memoMode === 'cells' &&
             cell.column.columnDef.columnDefType === 'data' &&
             !draggingColumn &&
             !draggingRow &&
             editingCell?.id !== cell.id &&
             editingRow?.id !== row.id ? (
-            <Memo_MRT_TableBodyCell key={cell.id} {...props} />
-          ) : (
-            <MRT_TableBodyCell key={cell.id} {...props} />
-          );
+              <Memo_MRT_TableBodyCell key={cell.id} {...props} />
+            ) : (
+              <MRT_TableBodyCell key={cell.id} {...props} />
+            )
+          ) : null;
         })}
         {virtualPaddingRight ? (
           <td style={{ display: 'flex', width: virtualPaddingRight }} />

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -35,9 +35,8 @@ export const MRT_ExpandAllButton = ({ table }: Props) => {
       enterDelay={1000}
       enterNextDelay={1000}
       title={
-        iconButtonProps?.title ?? isAllRowsExpanded
-          ? localization.collapseAll
-          : localization.expandAll
+        iconButtonProps?.title ??
+        (isAllRowsExpanded ? localization.collapseAll : localization.expandAll)
       }
     >
       <span>

package/src/buttons/MRT_ExpandButton.tsx

@@ -44,9 +44,8 @@ export const MRT_ExpandButton = <TData extends Record<string, any> = {}>({
       enterDelay={1000}
       enterNextDelay={1000}
       title={
-        iconButtonProps?.title ?? isExpanded
-          ? localization.collapse
-          : localization.expand
+        iconButtonProps?.title ??
+        (isExpanded ? localization.collapse : localization.expand)
       }
     >
       <span>

package/src/buttons/MRT_FullScreenToggleButton.tsx

@@ -31,7 +31,7 @@ export const MRT_FullScreenToggleButton = <
   return (
     <Tooltip arrow title={rest?.title ?? localization.toggleFullScreen}>
       <IconButton
-        aria-label={localization.showHideFilters}
+        aria-label={localization.toggleFullScreen}
         onClick={handleToggleFullScreen}
         {...rest}
         title={undefined}

package/src/footer/MRT_TableFooterRow.tsx

@@ -63,9 +63,9 @@ export const MRT_TableFooterRow = ({
           ? footerGroup.headers[footerOrVirtualFooter.index]
           : (footerOrVirtualFooter as MRT_Header);
 
-        return (
+        return footer ? (
           <MRT_TableFooterCell footer={footer} key={footer.id} table={table} />
-        );
+        ) : null;
       })}
       {virtualPaddingRight ? (
         <th style={{ display: 'flex', width: virtualPaddingRight }} />

package/src/head/MRT_TableHeadCellSortLabel.tsx

@@ -25,12 +25,15 @@ export const MRT_TableHeadCellSortLabel = ({
   const { column } = header;
   const { columnDef } = column;
   const { sorting } = getState();
+  const sorted = column.getIsSorted();
 
-  const sortTooltip = column.getIsSorted()
-    ? column.getIsSorted() === 'desc'
+  const sortTooltip = sorted
+    ? sorted === 'desc'
       ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
       : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
-    : localization.unsorted;
+    : column.getNextSortingOrder() === 'desc'
+    ? localization.sortByColumnDesc.replace('{column}', columnDef.header)
+    : localization.sortByColumnAsc.replace('{column}', columnDef.header);
 
   return (
     <Tooltip arrow placement="top" title={sortTooltip}>
@@ -40,12 +43,8 @@ export const MRT_TableHeadCellSortLabel = ({
       >
         <TableSortLabel
           aria-label={sortTooltip}
-          active={!!column.getIsSorted()}
-          direction={
-            column.getIsSorted()
-              ? (column.getIsSorted() as 'asc' | 'desc')
-              : undefined
-          }
+          active={!!sorted}
+          direction={sorted ? (sorted as 'asc' | 'desc') : undefined}
           sx={{
             flex: '0 0',
             width: '2.4ch',

package/src/head/MRT_TableHeadRow.tsx

@@ -53,9 +53,9 @@ export const MRT_TableHeadRow = ({
           ? headerGroup.headers[headerOrVirtualHeader.index]
           : (headerOrVirtualHeader as MRT_Header);
 
-        return (
+        return header ? (
           <MRT_TableHeadCell header={header} key={header.id} table={table} />
-        );
+        ) : null;
       })}
       {virtualPaddingRight ? (
         <th style={{ display: 'flex', width: virtualPaddingRight }} />