Question/Proposal: Hide elements outside of viewport to increase performance

[t1mmen]

Hi,

I'm looking to implement something like https://github.com/bvaughn/react-virtualized or https://github.com/ayrton/react-cluster in combination with react-custom-scrollbars.

Are you planning on including similar functionality in this project?

Thanks!

[malte-wessel]

I think this functionality is not in the scope of react-custom-scrollbars and react-virtualized already does a great job. But it would be nice if we could integrate the Scrollbars component into react-virtualized. I looked at the code and found that we could replace the scrollingContainer of the Grid component here: https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/Grid.js#L475-L481 But this would only be possible with changes in both libraries, which I'm open for. Creating a new issue on react-virtualized would be a first step!

[bvaughn]

Interesting idea.

On the surface it seems like this might be as straight forward as updating Grid to support a custom scroll-container and just falling back to the current, plain <div> by default.

I don't think I want to add a dependency to react-virtualized and I'm wary of anything that might negatively impact performance (although I don't think this would). I'm also a little wary of custom scrolling although your demo page looks great in the browsers I've viewed it in and your source code looks clean.

I am supportive of giving this a shot. :)

[bvaughn]

I took a closer look at this last night and it seems like react-virtualized Grid and ScrollSync components overlap pretty heavily with react-custom-scrollbars Scrollbars component. I'm not sure there's a lot of benefit of integrating the two, although I can certain pass additional information to the react-virtualized onScroll callback (eg. clientWidth, clientHeight, scrollHeight, and scrollWidth) to enable similar functionality.

I'll leave the ball in @malte-wessel's court. If you think there's a meaningful integration, let me know! I'm happy to discuss. :)

[malte-wessel]

See discussion here

[bvaughn]

Quick update to this issue in case anyone else sees it and is curious. react-virtualized now supports a custom renderer prop- renderCellRanges. This function is responsible for rendering (and positioning) the visible range of cells. Its signature is:

function ({
  columnMetadata:Array<Object>,
  columnStartIndex: number,
  columnStopIndex: number,
  renderCell: Function,
  rowMetadata:Array<Object>,
  rowStartIndex: number,
  rowStopIndex: number
}): Array<PropTypes.node>

Grid provides a default implementation of this (obviously) but you can override it if you want to render customized UI along with your cells (eg. gantt chart style overlays, custom scrollbars, etc). Doing it this way is a little more work but it gives you much greater flexibility in what your grid looks like and react-virtualized still manages all of the data windowing for you.

If you're curious, you can see the default implementation here: https://github.com/bvaughn/react-virtualized/blob/master/source/Grid/Grid.js#L729

[JacobLynch]

@bvaughn Thanks for the update. Appreciate the ability to customize this!