Conditionally wrap cell with div based on enableCellHoverReveal

Author: laratran

packages/mantine-react-table/src/components/body/MRT_TableBodyCell.module.css

@@ -89,7 +89,7 @@
   overflow: visible;
   white-space: normal;
   position: absolute;
-  z-index: 5;
+  z-index: 1;
   padding: var(--table-vertical-spacing)
     var(--table-horizontal-spacing, var(--mantine-spacing-xs));
   background-color: var(--mrt-base-background-color);

packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx

@@ -200,7 +200,47 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
       const isOverflow = div.scrollWidth > div.clientWidth;
       setIsOverflowing(isOverflow);
     }
-  }, [tableCellProps.children ]);
+  }, [tableCellProps.children]);
+
+  const renderCellContent = () => {
+    if (cell.getIsPlaceholder()) {
+      return columnDef.PlaceholderCell?.({ cell, column, row, table }) ?? null;
+    }
+
+    if (showSkeletons !== false && (isLoading || showSkeletons)) {
+      return <Skeleton height={20} width={skeletonWidth} {...skeletonProps} />;
+    }
+
+    if (
+      columnDefType === 'display' &&
+      (['mrt-row-expand', 'mrt-row-numbers', 'mrt-row-select'].includes(
+        column.id,
+      ) ||
+        !row.getIsGrouped())
+    ) {
+      return columnDef.Cell?.({
+        column,
+        renderedCellValue: cell.renderValue() as any,
+        row,
+        rowRef,
+        ...cellValueProps,
+      });
+    }
+
+    if (isCreating || isEditing) {
+      return <MRT_EditCellTextInput cell={cell} table={table} />;
+    }
+
+    if (showClickToCopyButton && columnDef.enableClickToCopy !== false) {
+      return (
+        <MRT_CopyButton cell={cell} table={table}>
+          <MRT_TableBodyCellValue {...cellValueProps} />
+        </MRT_CopyButton>
+      );
+    }
+
+    return <MRT_TableBodyCellValue {...cellValueProps} />;
+  };
 
   return (
     <TableTd
@@ -261,47 +301,29 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
         ...parseFromValuesOrFunc(tableCellProps.style, theme),
       })}
     >
-      <div       
-        ref={divRef}
-        className={
-          clsx(
-            columnDef.enableCellHoverReveal && classes["cell-hover-reveal"],
-            isOverflowing && classes['overflowing']
-          )}
-      >
-      {tableCellProps.children ?? (
-        <>
-          {cell.getIsPlaceholder() ? (
-            (columnDef.PlaceholderCell?.({ cell, column, row, table }) ?? null)
-          ) : showSkeletons !== false && (isLoading || showSkeletons) ? (
-            <Skeleton height={20} width={skeletonWidth} {...skeletonProps} />
-          ) : columnDefType === 'display' &&
-            (['mrt-row-expand', 'mrt-row-numbers', 'mrt-row-select'].includes(
-              column.id,
-            ) ||
-              !row.getIsGrouped()) ? (
-            columnDef.Cell?.({
-              column,
-              renderedCellValue: cell.renderValue() as any,
-              row,
-              rowRef,
-              ...cellValueProps,
-            })
-          ) : isCreating || isEditing ? (
-            <MRT_EditCellTextInput cell={cell} table={table} />
-          ) : showClickToCopyButton && columnDef.enableClickToCopy !== false ? (
-            <MRT_CopyButton cell={cell} table={table}>
-              <MRT_TableBodyCellValue {...cellValueProps} />
-            </MRT_CopyButton>
+      <>
+        {tableCellProps.children ??
+          (columnDef.enableCellHoverReveal ? (
+            <div         ref={divRef}
+            className={
+              clsx(
+                columnDef.enableCellHoverReveal && classes["cell-hover-reveal"],
+                isOverflowing && classes['overflowing']
+              )}>
+              {renderCellContent()}
+              {cell.getIsGrouped() && !columnDef.GroupedCell && (
+                <> ({row.subRows?.length})</>
+              )}
+            </div>
           ) : (
-            <MRT_TableBodyCellValue {...cellValueProps} />
-          )}
-          {cell.getIsGrouped() && !columnDef.GroupedCell && (
-            <> ({row.subRows?.length})</>
-          )}
-        </>
-      )}
-      </div>
+            <>
+              {renderCellContent()}
+              {cell.getIsGrouped() && !columnDef.GroupedCell && (
+                <> ({row.subRows?.length})</>
+              )}
+            </>
+          ))}
+      </>
     </TableTd>
   );
 };