How to add ref to flexRender ? - check overflow

[victorkvarghese]

Hi,

I need to show tooltip if table cell is overflowing. i'm using the ref way of figuring out if an element is overflowing.

div overflow url

To do this i tried cloning the element and adding ref, but the clientWidth and scrollWidth is always same.

I cannot directly provide ref to flexRender as its throwing error, so i wrapped it in a div.

 <Tooltip title="Test" interactive disableHoverListener={!hoverStatus} placement="top">
      <TableCell style={{ maxWidth: cell.column.getSize() }}>
        <div id="check">
          {/* {flexRender(cell.column.columnDef.cell, cell.getContext())} */}
          {React.cloneElement(<div style={{ display: 'flex' }}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</div>, {
            ref: cellElementRef,
            id: 'hello',
          })}
        </div>
      </TableCell>
    </Tooltip>

Can some one help? I was able to make this code working by using normal divs, like if its view is predefined, this happens when i use flexRender with cell.column.columnDef.cell

I think if i provide ref to flexRender directly, i can make it work. But not sure how i can do it

Complete Code

import React, { useEffect, useRef, useState } from 'react';
import { flexRender, Cell } from '@tanstack/react-table';
import { TableCell, Tooltip } from '@material-ui/core';

interface Props<T> {
  cell: Cell<T, unknown>;
}

export const BodyCell = <T extends unknown>(props: Props<T>) => {
  const { cell } = props;

  const cellElementRef = useRef<HTMLInputElement | null>(null);

  const compareSize = () => {
    const compare = cellElementRef?.current?.scrollWidth > cellElementRef?.current?.clientWidth;

    // eslint-disable-next-line no-console
    console.log(
      'compare',
      cell.column.columnDef.header,
      cellElementRef?.current?.clientWidth,
      cellElementRef?.current?.scrollWidth,
    );

    setHover(compare);
  };

  useEffect(() => {
    compareSize();
    window.addEventListener('resize', compareSize);

    return () => {
      window.removeEventListener('resize', compareSize);
    };
  }, []);

  useEffect(() => {
    if (!cell.column.getIsResizing()) {
      compareSize();
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [cell.column.getIsResizing()]);

  const [hoverStatus, setHover] = useState(false);

  return (
    <Tooltip title="Test" interactive disableHoverListener={!hoverStatus} placement="top">
      <TableCell style={{ maxWidth: cell.column.getSize() }}>
        <div id="check">
          {/* {flexRender(cell.column.columnDef.cell, cell.getContext())} */}
          {React.cloneElement(<div style={{ display: 'flex' }}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</div>, {
            ref: cellElementRef,
            id: 'hello',
          })}
        </div>
      </TableCell>
    </Tooltip>
  );
};

@tannerlinsley Any help would be appreciated