insin/demo.css

## demo.css
form {
  margin-bottom: 15px ;
}

table {
  border: 1px solid #666666 ;
}

td, th {
  border: 1px solid #666666 ;
  padding: 4px 4px 4px 4px ;
}

td.hidden {
  border-color: #CCCCCC ;
  color: #CCCCCC ;
}

table.filtered td.item {
  background-color: #FFFFBF ;
}

table.filtered td.item.hidden {
  background-color: transparent ;
}

a[ ng-click ],
a[ data-reactid ] {
  color: red ;
  cursor: pointer ;
  text-decoration: underline ;
  user-select: none ;
    -moz-user-select: none ;
    -webkit-user-select: none ;
}

## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>
    Rendering Large Datasets With ReactJS
  </title>
  <link rel="stylesheet" type="text/css" href="demo.css"></link>
</head>
<body>
  <h1>
    Rendering Large Datasets With ReactJS
  </h1>
  <div id="content">
    <!-- This content will be replaced with the React rendering. -->
  </div>
  <!-- Load scripts. -->
  <script src="http://fb.me/react-0.13.3.min.js"></script>
  <script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
  <script type="text/jsx;harmony=true">
// I generate a grid of items with the given dimensions. The grid is
// represented as a two dimensional grid, of sorts. Each row has an object
// that has an items collection.
function generateGrid( rowCount, columnCount ) {
  var valuePoints = [
    "Daenerys", "Jon", "Sansa", "Arya", "Stannis", "Gregor", "Tyrion",
    "Theon", "Joffrey", "Ramsay", "Cersei", "Bran", "Margaery",
    "Melisandre", "Daario", "Jamie", "Eddard", "Myrcella", "Robb",
    "Jorah", "Petyr", "Tommen", "Sandor", "Oberyn", "Drogo", "Ygritte"
  ];
  var valueIndex = 0;
  var grid = [];

  for ( var r = 0 ; r < rowCount ; r++ ) {
    var row = {
      id: r,
      items: []
    };
    for ( var c = 0 ; c < columnCount ; c++ ) {
      row.items.push({
        id: ( r + "-" + c ),
        value: valuePoints[ valueIndex ],
        isHiddenByFilter: false
      });
      if ( ++valueIndex >= valuePoints.length ) {
        valueIndex = 0;
      }
    }
    grid.push( row );
  }

  return( grid );
}

function getVisibileCount(filter, grid) {
  var count = 0;
  for ( var r = 0, rowCount = grid.length ; r < rowCount ; r++ ) {
    var row = grid[ r ];
    for ( var c = 0, columnCount = row.items.length ; c < columnCount ; c++ ) {
      var item = row.items[ c ];
      var isHidden = ( filter && ( item.value.indexOf( filter ) === -1 ) );
      if ( ! isHidden ) {
        count++;
      }
    }
  }
  return count;
}

var Demo = React.createClass({
  getInitialState() {
    var grid = generateGrid(1000, 10)
    return {
      grid: grid,
      dataPoints: grid.length * grid[0].items.length,
      filter: ''
    }
  },

  handleFilterChange(filter) {
    this.setState({filter})
  },
  handleUnmount() {
    this.setState({grid: [], dataPoints: 0, filter: ''})
  },
  handleRemount() {
    this.setState(this.getInitialState())
  },

  render() {
    var {dataPoints, filter, grid} =this.state
    return <div>
      <DemoForm
        dataPoints={dataPoints}
        visibleCount={getVisibileCount(filter, grid)}
        filter={filter}
        isMounted={!!grid.length}
        onFilterChange={this.handleFilterChange}
        onUnmount={this.handleUnmount}
        onRemount={this.handleRemount}
      />
      <DemoTable grid={grid} filter={filter}/>
    </div>
  }
})

var DemoForm = React.createClass({
  handleFilterChange(e) {
    this.props.onFilterChange(e.target.value)
  },

  render() {
    var {dataPoints, filter, isMounted, visibleCount} = this.props
    return <form>
      <strong>Filter Data</strong>:{' '}
      <input value={filter} onChange={this.handleFilterChange}/>{' '}
      {!!filter && <span>
        &mdash; Filtering <strong>{filter}</strong> over {dataPoints} data
        points, {visibleCount} found.
      </span>}{' '}
      <a onClick={isMounted ? this.props.onUnmount : this.props.onRemount}>
        {isMounted ? 'Unmount' : 'Remount'} Grid
      </a>
    </form>
  }
})

var DemoTable = React.createClass({
  render() {
    var {filter, grid} = this.props
    return <table width="100%" cellSpacing="2" className={!!filter && 'filtered'}>
      <tbody>
        {grid.map(row => <DemoTableRow key={row.id} row={row} filter={filter}/>)}
      </tbody>
    </table>
  }
})

var DemoTableRow = React.createClass({
  render() {
    var {filter, row} = this.props
    return <tr>
      <th key="id">{row.id}</th>
      {row.items.map(item =>
        <DemoTableCell
          key={item.id}
          value={item.value}
          hidden={!!filter && item.value.indexOf(filter) === -1}
        />
      )}
    </tr>
  }
})

var DemoTableCell = React.createClass({
  shouldComponentUpdate(nextProps) {
    return (this.props.hidden !== nextProps.hidden)
  },
  render() {
    return <td className={'item' + (this.props.hidden ? ' hidden' : '')}>
      {this.props.value}
    </td>
  }
})

React.render(<Demo/>, document.getElementById('content'))
  </script>
</body>
</html>
	form {
	margin-bottom: 15px ;
	}

	table {
	border: 1px solid #666666 ;
	}

	td, th {
	border: 1px solid #666666 ;
	padding: 4px 4px 4px 4px ;
	}

	td.hidden {
	border-color: #CCCCCC ;
	color: #CCCCCC ;
	}

	table.filtered td.item {
	background-color: #FFFFBF ;
	}

	table.filtered td.item.hidden {
	background-color: transparent ;
	}

	a[ ng-click ],
	a[ data-reactid ] {
	color: red ;
	cursor: pointer ;
	text-decoration: underline ;
	user-select: none ;
	-moz-user-select: none ;
	-webkit-user-select: none ;
	}
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8" />
	<title>
	Rendering Large Datasets With ReactJS
	</title>
	<link rel="stylesheet" type="text/css" href="demo.css"></link>
	</head>
	<body>
	<h1>
	Rendering Large Datasets With ReactJS
	</h1>
	<div id="content">
	<!-- This content will be replaced with the React rendering. -->
	</div>
	<!-- Load scripts. -->
	<script src="http://fb.me/react-0.13.3.min.js"></script>
	<script src="http://fb.me/JSXTransformer-0.13.3.js"></script>
	<script type="text/jsx;harmony=true">
	// I generate a grid of items with the given dimensions. The grid is
	// represented as a two dimensional grid, of sorts. Each row has an object
	// that has an items collection.
	function generateGrid( rowCount, columnCount ) {
	var valuePoints = [
	"Daenerys", "Jon", "Sansa", "Arya", "Stannis", "Gregor", "Tyrion",
	"Theon", "Joffrey", "Ramsay", "Cersei", "Bran", "Margaery",
	"Melisandre", "Daario", "Jamie", "Eddard", "Myrcella", "Robb",
	"Jorah", "Petyr", "Tommen", "Sandor", "Oberyn", "Drogo", "Ygritte"
	];
	var valueIndex = 0;
	var grid = [];

	for ( var r = 0 ; r < rowCount ; r++ ) {
	var row = {
	id: r,
	items: []
	};
	for ( var c = 0 ; c < columnCount ; c++ ) {
	row.items.push({
	id: ( r + "-" + c ),
	value: valuePoints[ valueIndex ],
	isHiddenByFilter: false
	});
	if ( ++valueIndex >= valuePoints.length ) {
	valueIndex = 0;
	}
	}
	grid.push( row );
	}

	return( grid );
	}

	function getVisibileCount(filter, grid) {
	var count = 0;
	for ( var r = 0, rowCount = grid.length ; r < rowCount ; r++ ) {
	var row = grid[ r ];
	for ( var c = 0, columnCount = row.items.length ; c < columnCount ; c++ ) {
	var item = row.items[ c ];
	var isHidden = ( filter && ( item.value.indexOf( filter ) === -1 ) );
	if ( ! isHidden ) {
	count++;
	}
	}
	}
	return count;
	}

	var Demo = React.createClass({
	getInitialState() {
	var grid = generateGrid(1000, 10)
	return {
	grid: grid,
	dataPoints: grid.length * grid[0].items.length,
	filter: ''
	}
	},

	handleFilterChange(filter) {
	this.setState({filter})
	},
	handleUnmount() {
	this.setState({grid: [], dataPoints: 0, filter: ''})
	},
	handleRemount() {
	this.setState(this.getInitialState())
	},

	render() {
	var {dataPoints, filter, grid} =this.state
	return <div>
	<DemoForm
	dataPoints={dataPoints}
	visibleCount={getVisibileCount(filter, grid)}
	filter={filter}
	isMounted={!!grid.length}
	onFilterChange={this.handleFilterChange}
	onUnmount={this.handleUnmount}
	onRemount={this.handleRemount}
	/>
	<DemoTable grid={grid} filter={filter}/>
	</div>
	}
	})

	var DemoForm = React.createClass({
	handleFilterChange(e) {
	this.props.onFilterChange(e.target.value)
	},

	render() {
	var {dataPoints, filter, isMounted, visibleCount} = this.props
	return <form>
	<strong>Filter Data</strong>:{' '}
	<input value={filter} onChange={this.handleFilterChange}/>{' '}
	{!!filter && <span>
	— Filtering <strong>{filter}</strong> over {dataPoints} data
	points, {visibleCount} found.
	</span>}{' '}
	<a onClick={isMounted ? this.props.onUnmount : this.props.onRemount}>
	{isMounted ? 'Unmount' : 'Remount'} Grid
	</a>
	</form>
	}
	})

	var DemoTable = React.createClass({
	render() {
	var {filter, grid} = this.props
	return <table width="100%" cellSpacing="2" className={!!filter && 'filtered'}>
	<tbody>
	{grid.map(row => <DemoTableRow key={row.id} row={row} filter={filter}/>)}
	</tbody>
	</table>
	}
	})

	var DemoTableRow = React.createClass({
	render() {
	var {filter, row} = this.props
	return <tr>
	<th key="id">{row.id}</th>
	{row.items.map(item =>
	<DemoTableCell
	key={item.id}
	value={item.value}
	hidden={!!filter && item.value.indexOf(filter) === -1}
	/>
	)}
	</tr>
	}
	})

	var DemoTableCell = React.createClass({
	shouldComponentUpdate(nextProps) {
	return (this.props.hidden !== nextProps.hidden)
	},
	render() {
	return <td className={'item' + (this.props.hidden ? ' hidden' : '')}>
	{this.props.value}
	</td>
	}
	})

	React.render(<Demo/>, document.getElementById('content'))
	</script>
	</body>
	</html>