V8 flexRender issue / alternative ?

[laurent512]

-- to delete, issue not related to tanstacktable , sorry

[tannerlinsley]

What is the difference in markup between the two states?

…

On Jul 5, 2022, 6:29 AM -0600, Laurent Tobaly ***@***.***>, wrote: Hello, I observed a strange behaviour in my layout with the flexRender() function. See in video : https://youtu.be/ObZth6MBGL4 When I use long string in header , everything words well. If I start using flexRender (as this was the case when I noticed the issue) , it starts putting some strange white border on the right side of the window. Is there an easy alternative to flexRender ? Or maybe simply what is the way to get the header content I have defined in the columns array manually ? Thank you so much — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[laurent512]

My real header columns included tooltips.
Those were rendered using flexRender, but not using the alternative long header I was using as example.

It seemed that these tooltips, even if invisible when mouse in not hovering, were causing layout issues.

   <div className="tooltip">
      <span className=" tooltiptext">{tooltip_text}</span>
      <div className="w-5 text-gray-400">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" transform="scale(0.80)">
          <path
            fillRule="evenodd"
            d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
            clipRule="evenodd"
          />
        </svg>
      </div>
    </div> 


/* .tooltip {
  @apply invisible absolute;
}

.has-tooltip:hover .tooltip {
  @apply visible z-50;
} */