React-virtualized: Horizontal scrolling

[ryanseddon]

Currently using the following components

<AutoSizer>
  <InfiniteLoader>
    <FlexTable {...props}>
       {children}
    </FlexTable>
  </InfiniteLoader>
</AutoSizer>

This works perfectly but we have a use case where the user can add or remove new columns and the table can become unreadable if it just truncates the columns. I've been trying to think of a good way to tackle supporting horizonal scroll so the table has a minimum width and above that it should show a horizontal scroll bar.

Can this be done currently with <VirtualScroll /> HOC?

[bvaughn]

Hi @ryanseddon,

Have you considered using the Grid component for this purpose? VirtualScroll and FlexTable were built with vertical scrolling in mind only. FlexTable's columns are configured in such a way to grow (or shrink) to fill its available space. Grid on the other hand scroll (or not, your choice) in both directions and seems like a better fit for what you're describing.

[bvaughn]

By the way, let's frame our discussion in terms of version 5 (source, docs, overview) since I hope to be releasing it soon (maybe even this weekend) and it changes things a bit.

v5 adds a new HOC, ScrollSync that can be used to synchronize scrolling between 2 or more virtual components. I mention this in case you might also consider pairing a FlexTable (for your fixed columns) and a Grid (for your dynamic ones). Essentially something like this:

<InfiniteLoader
  isRowLoaded={...}
  loadMoreRows={...}
  rowsCount={...}
>
  {({ onRowsRendered, registerChild }) => (
    <ScrollSync>
      {({ onScroll, scrollLeft, scrollTop }) => (
        <div className='Table'>
          <div className='LeftColumn'>
            <FlexTable
              onScroll={onScroll}
              scrollTop={scrollTop}
              {...props}
            />
          </div>
          <div className='RightColumn'>
            <Grid
              onScroll={onScroll}
              scrollTop={scrollTop}
              {...props}
            />
          </div>
        </div>
      )}
    </ScrollSync>
  )}
</InfiniteLoader>

[ryanseddon]

Ah grid is exactly what I want, I completely overlooked it as I kept thinking it forced me to have a pinterest/instagram style layout.

ScrollSync, genius! Looking forward to v5.

Thanks for answering my poorly researched question.

[bvaughn]

No problem! Happy to hear that there's a simple solution available. That's always nice. :)

[bvaughn]

FYI @ryanseddon, version 5 just went out this evening. Would love to hear any feedback you have (if you decide to play with it). I think it's a pretty substantial improvement.

[ryanseddon]

That was quick! Will definitely check it out.

[bvaughn]

It's been a work-in-progress for a couple of weeks. Glad to finally get it out there. Thanks! :)