Virtualized test

gistfile1.js

/**
 * @file This is my cool script.
 * @copyright Alek Shnayder 2018
 */

import React from 'react';
import { ArrowKeyStepper, Grid } from 'react-virtualized';
import styles from '../styles/main.css';
import styled from 'styled-components';

const Header = styled.h1`
	margin-top: 15px;
	margin-bottom: 15px;
	text-align: center;
	font-size: 1.2em;
	letter-spacing: 2px;
	color: ${ props => props.primary ? 'white' : 'black'};
`



/** 
	 * React Components showing grid table
	 * @class
	*/
class Main extends React.Component{
	constructor(props){
		super(props);

		this.state = {
			cellSelection : '',
			rowSelection: ''
		}	

		this._cellRenderer = this._cellRenderer.bind(this);
		this._getCellValue = this._getCellValue.bind(this);
	}

	componentWillMount(){
		//fill in some fake data
        for (let i = 0; i < 5000; i++) {
            list.push([i, 'John', 'Doe', 'Chicago', 'IL', '60611', 'more stuff', 'whole life story'])
        }
	}

	/** 
	 * Gets value of current cell and current row
	 * 
	 * @param {object} event - event for cell clicked
	*/
	_getCellValue(event){
		const rowIndex = event.target.getAttribute('value');
		const formattedRow = list[rowIndex].map( cell => cell + ', ');

		this.setState({
			cellSelection: event.target.innerHTML,
			rowSelection: formattedRow
		})

	}


	//specific row and cell
    _cellRenderer({ columnIndex, key, rowIndex, style }) {
		const row = (rowIndex % 2 === 0) ? 'evenRow' : 'oddRow';

        return (
			<div key={key} value={rowIndex} style={style} className={'BodyGrid cell centeredCell ' + row} onClick={this._getCellValue}>
                {list[rowIndex][columnIndex]}
            </div>
        )
	}
	

	render(){

		return(
			<div id='main'>
				<Header>Test Styled Header</Header>
				<Header primary>Cell: {this.state.cellSelection}</Header>
				<Header primary>Row: {this.state.rowSelection}</Header>

                <ArrowKeyStepper className={'stepper'} columnCount={list[0].length} rowCount={list.length}>
                    {({ onSectionRendered, scrollToColumn, scrollToRow }) => (
					<Grid
						cellRenderer={this._cellRenderer}
						columnCount={list[0].length}
						className={'BodyGrid'}
						columnWidth={150}
						height={700}
						rowCount={list.length}
						rowHeight={50}
						width={150 * list[0].length}
                        onSectionRendered={onSectionRendered}
                        scrollToColumn={scrollToColumn}
                        scrollToRow={scrollToRow}
					/>
					)}
				</ArrowKeyStepper>
			</div>
		);
	}
}

export default Main;




//sample data -- real-world would come from somewhere else
const list = [];