Closed t1mmen closed 8 years ago
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!
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. :)
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. :)
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
@bvaughn Thanks for the update. Appreciate the ability to customize this!
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!