diff --git a/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx b/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx index c345440b5..bfffd8916 100644 --- a/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx +++ b/packages/mantine-react-table/src/components/body/MRT_TableBodyCell.tsx @@ -7,7 +7,6 @@ import { type RefObject, memo, useEffect, - useLayoutEffect, useRef, useState, } from 'react'; @@ -195,16 +194,19 @@ export const MRT_TableBodyCell = ({ const [isCellContentOverflowing, setIsCellContentOverflowing] = useState(false); - useLayoutEffect(() => { + const onMouseEnter = () => { + if(!columnDef.enableCellHoverReveal) return; const div = cellHoverRevealDivRef.current; if (div) { - // Use setTimeout(0) to ensure DOM is fully updated before measuring overflow - setTimeout(() => { const isOverflow = div.scrollWidth > div.clientWidth; setIsCellContentOverflowing(isOverflow); - }, 0); } - }, [cell, density]); + } + + const onMouseLeave = () => { + if(!columnDef.enableCellHoverReveal) return; + setIsCellContentOverflowing(false); + } const renderCellContent = () => { if (cell.getIsPlaceholder()) { @@ -304,6 +306,8 @@ export const MRT_TableBodyCell = ({ ...widthStyles, ...parseFromValuesOrFunc(tableCellProps.style, theme), })} + onMouseEnter={onMouseEnter} + onMouseLeave={onMouseLeave} > <> {tableCellProps.children ??