Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Ability to scroll horizontally #24

Open
nicksp opened this issue Dec 10, 2018 · 3 comments
Open

Ability to scroll horizontally #24

nicksp opened this issue Dec 10, 2018 · 3 comments

Comments

@nicksp
Copy link

nicksp commented Dec 10, 2018

Is there an ability to scroll the table horizontally in the case the total width of visible columns exceeds the viewport width? Can't seem to be possible on the demo page. Are there any ways to make this work as a scrollable table?

@energydrink9
Copy link
Owner

Hi @nicksp
could you tell me more about your configuration? What browser and operating system are you using?

Thanks
Michele

@nicksp
Copy link
Author

nicksp commented Dec 10, 2018

Hey @energydrink9

I'm on latest Chrome, MacOS

Unless I set show scroll bars always in settings:

image

I can't seem to be able to scroll natively with mouse. Here's a GIF recording of me trying to scroll over the table with all the fields turned on for display. That prevents from using lib on prod on large tables with more fields visible, obviously we'd like to have ability to scroll easily and consistently without any extra settings:

2018-12-10 14 16 22

I guess that would be possible if Data Grid were based on react-virtualized's Table instead of a List. Table seems to support some more flexibility and functionality.

@energydrink9
Copy link
Owner

energydrink9 commented Dec 11, 2018

The problem is caused by this:

  • The rows horizontal scroll is synchronized thanks to the ScrollSync component of ReactVirtualized
  • The rows have overflow: hidden to hide the scrollbars. There is an extra div with a visible scroll at the bottom to allow the horizontal scroll
  • The overflow: hidden property prevents the scrolling of the div

I'm looking for a solution that allows the user to scroll the rows without showing the scrollbars. There are workarounds to obtain this but I still have to find an optimal solution

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants