react-window compatiblity

[Gibbo3771]

I am trying to use this library with react-window to align a "sticky" header/row however because of the way react-window is working under the hood with the FixedSizeList, you have to wrap it in a div and this is the incorrect ref.

You can see a sandbox link here.

Here is a commented sec

<ScrollSyncNode group="a">
        <div> {/* ref in ScrollSync is made to this element*/}
          <List // But this creates a `div` that is the actual element we want to have a ref of
            className="List"
            height={75}
            itemCount={50}
            itemSize={100}
            layout="horizontal"
            width={300}
          >
            {Column}
          </List>
        </div>
      </ScrollSyncNode>

I tried removing the wrapping div, but I get a e.persist() is not a function, I assume this is because the ref is not passed down properly internally by react-window.

Is it possible to allow us to pass an as or component option prop for ScrollSyncNode that would take a forwardRef instance so we can pass the proper ref to ScrollSync?

I have tried using the outerElementType and innerElementType props for react-window components and rendering a ScrollSyncNode but same problem, since ScrollSyncNode clones it's children (ref won't be passed?) this creates weird side effects.

Any ideas? Also, nice library, much better than the unmaintained version and first class typescript support is always a welcome sight!

[AhmadMHawwash]

Hey @Gibbo3771, thanks for opening up this issue, do you have a PR proposal so we can have a look at?

[Gibbo3771]

I do not at the moment. I really needed to get scroll syncing so I implemented a dirty version myself, but it's not neat or extensible at all. This library looks great so I will be looking to adopt this in the future.

I will see if I can carve out some time to put together a PR with a Codesandbox. Greatly depends on the bosses timelines for preparing the ongoing prototype.