Sticky headers in react-virtualized

Question

I am using a List component in react-virtualized to render a large number of items. In my implementation, the items are sectioned, and I want the section headers to be sticky so that the current section remains visible as users scroll down. Essentially, I need react-virtualized NOT to destroy the section headers as the scroll position changes (but continue to destroy other items). Is there any way to do this right now? I'm open to hacks as long as they aren't too crazy.

score 6 · Answer 1 · answered Jul 06 '17 at 08:13

We had similar requirements to you - we need a list that was sectioned with support for sticky headers. We could not achieve this with react-virtualized Lists/Grids, so I created https://github.com/marchaos/react-virtualized-sticky-tree which supports sticky headers.

See example here.

score 2 · Answer 2 · edited Aug 29 '19 at 19:55

If I understood your question correctly, you would like to have sticky header a la a spreadsheet. You can do that with the ScrollSync component, have a look at the demo/docs.

Here is the example displayed in 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>
  )
}

I tried this one, but it assumes there are always scrollbars when it calculates the width of the header cells to line them up with the body cells. I need something dynamic that keeps the header and body cells aligned whether the scrollbar exists or not. — D. Messier, Oct 07 '21 at 22:10

score 2 · Answer 3 · answered Sep 04 '21 at 23:29

In case anyone came here using react-virtualized's Table component instead of the List component, you can make the header sticky with the following CSS:

.ReactVirtualized__Table__headerRow {
  position: sticky;
  inset-block-start: 0;
  z-index: 1;
}

Make sure none of the Table's parent elements have overflow styling, otherwise this won't work.

Sticky headers in react-virtualized

3 Answers3