JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fb.me/JSXTransformer-0.3.0.js"></script>
<script src="http://fb.me/react-0.3.0.js"></script>
<script src="http://fb.me/react-js-fiddle-integration.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="http://w2ui.com/web/js/w2ui-1.3a.min.css" />

Generate: 
<input type="button" value="25K Records" onclick="window.generate(25)">
<input type="button" value="250K Records" onclick="generate(250)">
<input type="button" value="1MIL Records" onclick="generate(1000)">

<div id="grid"></div>

JavaScript 1.7

/** @jsx React.DOM */

var GridBody = React.createClass({
    getInitialState: function() {
        return {
            shouldUpdate: true,
            total: 0,
            displayStart: 0,
            displayEnd: 0
        };
    },

    componentWillReceiveProps: function(nextProps) {
        var shouldUpdate = !(
            nextProps.visibleStart >= this.state.displayStart &&
            nextProps.visibleEnd <= this.state.displayEnd
        ) || (nextProps.total !== this.state.total);

        if (shouldUpdate) {
            this.setState({
                shouldUpdate: shouldUpdate,
                total: nextProps.total,
                displayStart: nextProps.displayStart,
                displayEnd: nextProps.displayEnd
            });
        } else {
            this.setState({shouldUpdate: false});
        }
    },

    shouldComponentUpdate: function(nextProps, nextState) {
        return this.state.shouldUpdate;
    },
    
    render: function() {
        var rows = {};
        
        rows.top = (
            <tr id="gridgridrectop" line="top" style={{height: this.props.displayStart * this.props.recordHeight}}>
                <td colspan="200"></td>
            </tr>
        );

        for (var i = this.props.displayStart; i < this.props.displayEnd; ++i) {
            var record = this.props.records[i];
            rows['line' + i] = (
                <tr class={i % 2 === 0 ? 'w2ui-even' : 'w2ui-odd'} style={{height: this.props.recordHeight}}>
                    <td class="w2ui-grid-data" col="0">
                        <div title={i + 1}>{i + 1}</div>
                    </td>
                    <td class="w2ui-grid-data" col="1">
                        <div title={record.fname}>{record.fname}</div>
                    </td>
                    <td class="w2ui-grid-data" col="2">
                        <div title={record.lname}>{record.lname}</div>
                    </td>
                    <td class="w2ui-grid-data" col="3">
        ...