energydrink9/functional-data-grid

Ability to scroll horizontally

nicksp opened this issue · 3 comments

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?

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

Thanks
Michele

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.

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