Virtualized++

cell0.js

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { AutoSizer,List, CellMeasurer } from 'react-virtualized'
import 'react-virtualized/styles.css'
import './styles.css'

class App extends Component {
    renderItem({ index }) {
        return (
        	<div 
               key={index}
               className='row'
            >
                {index}
        	</div>
        )
    }
    
    render() {
        const {length} = this.props
        return (
          <List
            className='list'
            height={300}
            rowCount={length}
            rowHeight={25}
            rowRenderer={this.renderItem.bind(this)}
            width={250}
          />
        )
    }
}

function render() {
	ReactDOM.render(
		<App length={2000}/>,
		document.getElementById('root')
	);
}

render() 

// this tells the hot reloading engine to do its magic
export function __render(){
    render()
}

styles.css

.list {
    width: 100%;
    border: 1px solid #DDD;
    margin-top: 15px;
}

.row {
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 25px;
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
}

Virtualized++.carbide.md

Virtualized++

This Gist was automatically created by Carbide, a free online programming environment.

You can view a live, interactive version of this Gist here.(http://alpha.trycarbide.com/anonymous/84c26d3fdfe06fddf24108ba528796d6).