Ensure overflow is measured after density change

KevinVandy · Oct 30, 2024 · ee45661 · ee45661
1 parent c65a6ea
commit ee45661
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 6 deletions.
diff --git a/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.module.css b/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.module.css
@@ -76,7 +76,7 @@
 }
 
 .root-cell-hover-reveal {
-  overflow: visible
+  overflow: visible;
 }
 
 .cell-hover-reveal {

diff --git a/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx b/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx
@@ -198,10 +198,13 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   useLayoutEffect(() => {
     const div = cellHoverRevealDivRef.current;
     if (div) {
-      const isOverflow = div.scrollWidth > div.clientWidth;
-      setIsCellContentOverflowing(isOverflow);
+      // Use setTimeout(0) to ensure DOM is fully updated before measuring overflow
+      setTimeout(() => {
+        const isOverflow = div.scrollWidth > div.clientWidth;
+        setIsCellContentOverflowing(isOverflow);
+      }, 0);
     }
-  }, [cell]);
+  }, [cell, density]);
 
   const renderCellContent = () => {
     if (cell.getIsPlaceholder()) {
@@ -326,8 +329,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
                 <> ({row.subRows?.length})</>
               )}
             </>
-          )
-        )}
+          ))}
       </>
     </TableTd>
   );