react-virtualized-usage

react-virtualized-usage.md

this is example code for bvaughn/react-virtualized#147 (comment)

disclaimer: I simplified the code and renamed things, so I might have totally broken it, or omitted crucial css.

class Spreadsheet extends React.Component {
    render () {
        let rowCount    = this.props.rows.length;
        let columnCount = this.props.columns.length;
        let width       = CELL_WIDTH  * columnCount;
        let height      = CELL_HEIGHT * rowCount;

        let windowedHeight = window.innerHeight - BOTTOM_MARGIN;

        if (windowedHeight < height) {
            height = windowedHeight;
            width += SCROLLBAR_SIZE
        }
        return (
            <div onWheel={
                event => {
                    // handle horizontal scroll natively
                    document
                        .getElementById("scroll-wrapper")
                        .scrollLeft += event.deltaX;

                    //handle vertical scroll virtually
                    event.target = this.grid._scrollingContainer;
                    event.target.scrollTop += event.deltaY;
                    this.grid._onScroll(event);
                }
            }
            >
                <ScrollSync>
                {({...scrolling}) => (
                    <div
                        id="scroll-wrapper"
                        style={{
                            width : window.innerWidth,
                        }}
                    >
                        <Grid
                            id           = "header"

                            rowCount     = {1}
                            columnCount  = {columnCount}
                            height       = {CELL_HEIGHT}
                            width        = {width}
                            rowHeight    = {CELL_HEIGHT}
                            columnWidth  = {CELL_WIDTH}

                            cellRenderer = {colRenderer}
                            scrollLeft   = {scrolling.scrollLeft}
                        />
                        <Grid
                            id           = "body"
                            ref          = {grid=>this.grid=grid}

                            rowCount     = {rowCount}
                            columnCount  = {columnCount}
                            height       = {height}
                            width        = {width}
                            rowHeight    = {CELL_HEIGHT}
                            columnWidth  = {CELL_WIDTH}

                            cellRenderer = {cellRenderer}
                            onScroll     = {scrolling.onScroll}
                        />
                    </div>
                )}
                </ScrollSync>
            </div>
        ) 
    }
}