Horizontal scrolling

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?

[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]

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>