Buggy Table scrollbars

[JulienGasparLopes]

Problem:

When I import some files I have the scrollbars of the Table on SelectHeaderStep and ValidationStep that keep appearing and disappearing. So the component keeps resizing and looks like it's glitching

Reproduction:

Here is the content of the file I'm importing (this is not a use case but at least I can reproduce the bug with it):
{"file_uuid":"46c42960-8bb7-4209-b6a6-218b190c146e","message":"success"}
I'm on Google Chrome Version 103.0.5060.53 (official build) (x86_64) on MacOs 12.2.1
Screen resolution doesn't seem to have any influence

Investigation:

The value of grid-columns-template is constantly changing for the component Table on SelectHeaderStep (class name rdg-static)
I don't have a lot of clues of what is happening, just hoping chakra-ui is not the cause

Thx for reading !
If you need any help I'd be glad to contribute, I'll keep checking this bug on my own

[masiulis]

Hey @JulienGasparLopes, this seems to be react-data-grid + flexbox issue - we want the table to fill the whole screen, but not more, so that the virtualization of rows would work.

But I cannot reproduce the bug with our example file, could you share the file that you're using? I am not sure I understand what you meant by the content of your file - it does not look to be valid CSV.

Edit: Maybe you could share your theme as well, especially if you've changed anything in flexbox/grid layout or .rdg global classes.

[JulienGasparLopes]

Haha yes this file content is totally dumb but it was the only file available that reproduces my bug and that doesn't contain sensitive data :)

Okey I investigated and found my problem :
It appears only when data doesn't need to have scrollbar (x or y axis). But as you said we're trying to fit the available space and that triggers the flickering behavior

Using the exact same file I was unable to reproduce on your demo page so I think this may be a conflict with semantic-ui or an other lib of my project.

Solution

I came up with two solutions :

• remove h=0 on Box component on SelectHeaderStep.jsx file (but then Table was doesn't fit the available space and this is not user-friendly when scrolling)
• I forced overflow: scroll for SelectHeaderTable component (I used the following css selector #chakra-modal--body-rsi > div > div.rdg.rdg-light.rdg-static).

I've implemented the 2nd solution as it is more user-friendly

Thx for reading and helping me ! I'm closing this issue because I can't reproduce and it seems to be a project-related bug.
But it could be useful to allow more styling customization to avoir this kind of ugly css selector
Have a lovely day !

[masiulis]

@JulienGasparLopes Glad it worked! In regards to CSS selector, all of our styles come from the theme object. https://github.com/UgnisSoftware/react-spreadsheet-import/blob/master/src/theme.ts#L457 You can send custom theme in the same shape and the objects will be merged. .rdg-static I think it means that it's for tables not in Validation step if I remember correctly :)