Table UI breakdown on data update

[aronvis]

Hi there!

We have an issue with the TanStack React table with data updates. Its core UI structure seems to break down whenever a new row gets inserted into the data array or the array gets replaced with a new one containing more rows.

I need to change tabs to get the table to show the correct UI. I have included images of the observed and desired behavior. I have also added the core TanStack table tsx file. Thank you for all your help.

Observed Behavior

Desired Behavior

Table.tsx.zip

[aronvis]

Update: Wrapping my table component in a div and unmounting the div fixes the issue. We now unmount whenever the data length changes.