Sticky Headers in Reaction-Virtualized

Question

I use the component Listin an interactive virtualized form to render a large number of elements. In my implementation, the elements are separated, and I want the section headers to be sticky, so that the current section remains visible when users scroll down. Essentially, I need to react-virtualize NOT to destroy the section headers as the scroll position changes (but continues to destroy other elements). Is there any way to do this right now? I am open to hacking if they are not too crazy.

Answer 1

We had similar requirements for you - we needed a list that was divided into sticky heading support. We were unable to achieve this with virtualized lists / grids, so I created https://github.com/marchaos/react-virtualized-sticky-tree that supports sticky headers.

See an example here .

Answer 2

If I understand your question correctly, you would like to have a sticky heading in the form of a spreadsheet. You can do this with a component ScrollSync, see demo / docs .

Here is an example shown in the docs:

import { Grid, List, ScrollSync } from 'react-virtualized'
import 'react-virtualized/styles.css'; // only needs to be imported once

function render (props) {
  return (
    <ScrollSync>
      {({ clientHeight, clientWidth, onScroll, scrollHeight, scrollLeft, scrollTop, scrollWidth }) => (
        <div className='Table'>
          <div className='LeftColumn'>
            <List
              scrollTop={scrollTop}
              {...props}
            />
          </div>
          <div className='RightColumn'>
            <Grid
              onScroll={onScroll}
              {...props}
            />
          </div>
        </div>
      )}
    </ScrollSync>
  )
}