Improve-Id function

  const ItemIdCell = ({ row }: { row: any }) => {
    const itemId = row.getValue("itemId") as string;
    const [showFullId, setShowFullId] = useState(false);
    const cellRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
      const handleClickOutside = (event: MouseEvent) => {
        if (cellRef.current && !cellRef.current.contains(event.target as Node)) {
          setShowFullId(false);
        }
      };

      document.addEventListener("mousedown", handleClickOutside);
      return () => document.removeEventListener("mousedown", handleClickOutside);
    }, []); // Empty dependency array is acceptable here since we're only setting up document listeners

    return (
      <div
        ref={cellRef}
        onClick={() => setShowFullId(!showFullId)}
        style={{
          cursor: 'pointer',
          textAlign: 'center',
          transition: 'transform 0.2s, background 0.2s',
        }}
        className={`whitespace-nowrap flex items-center ${showFullId ? "scale-105 bg-white rounded-lg p-2 shadow-sm" : ""
          }`}
      >
        <div style={{ width: showFullId ? 'auto' : '100px' }}>
          {showFullId ? itemId : itemId.slice(0, 7) + (itemId.length > 7 ? "..." : "")}
        </div>
      </div>
    );
  };