Dynamically hiding column makes table flicker

[yngwi]

Hi, I'm having a table in v8 (alpha 48) where a user can toggle between normal and editing mode with a button. If using the Editing mode, an additional column (actions) is visible where rows can be deleted and other actions performed". This is hidden in the normal view. The hiding is done with the following part of the table instance configuration:

state: {
  columnVisibility: editing ? {} : { actions: false },
},

Now, whenever the "Editing" button is clicked, the table "flickers" once and the scrollbar is visible very shortly while the additional column is added / removed. Is there a way to avoid this? I'm not sure if I do this correctly, currently, the "useTableInstance" is receiving this "editing" state in its configuration. I have also tried using a useEffect hook that calls instance.toggleColumnVisibility() for this column depending on the "editing" variable, but the result is the same.

I'm grateful for any pointers.
Best,
Daniel

[tannerlinsley]

CodeSandBox showing this issue would really really help diagnose it

[yngwi]

Hi, I have tried to reproduce on StackBlitz (I hope that's OK) but here it seems to work as expected. In my original repository I have been using the "Mantine" UI library to style the table and react router 6 with nested routes, maybe something there is actually causing the problem. I'm going to investigate...

[yngwi]

Ok it seems indeed to be a problem with a specific UI component. Sorry for the unneeded question and thanks for your feedback.

[yngwi]

More specifically (FYI), it was a problem with Mantine Popover components. They render content in a Portal which triggered the page resizing. Setting it to not use portals with the withinPortal={false} prop fixes this.

[yngwi]

Fixed by modifying the UI library component usage, see here: #3859 (reply in thread)