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 Riot</title>
  <link rel="stylesheet" type="text/css" href="demo.css"></link>
</head>
<body>
  <h1>Rendering Large Datasets With Riot</h1>

  <demo></demo>

  <script src="http://cdn.jsdelivr.net/g/riot@2.2(riot.js+compiler.js)"></script>
  <script type="riot/tag">
  // 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;
  }

  <demo>
    <demo-form
      onfilterchange={filterChange}
      datapoints={dataPoints}
      visiblecount={visibleCount}
      filter={filter}
      ismounted={!!grid.length}
      onunmount={unmount}
      onremount={remount}
    />
    <demo-table grid={grid} filter={filter}/>

    this.grid = generateGrid(1000, 10)
    this.dataPoints = this.grid.length * this.grid[0].items.length
    this.filter = ''

    // It doesn't seem to redraw without these manual update() calls

    filterChange(filter) {
      this.filter = filter
      this.visibleCount = getVisibileCount(filter, this.grid)
      this.update()
    }

    unmount() {
      this.grid = []
      this.dataPoints = 0
      this.filter = ''
      this.update()
    }

    remount() {
      this.grid = generateGrid(1000, 10)
      this.dataPoints = this.grid.length * this.grid[0].items.length
      this.filter = ''
      this.update()
    }
  </demo>

  <demo-form>
    <form>
      <strong>Filter Data</strong>:
      <input value={opts.filter} oninput={filterChange}>
      <span hide={!opts.filter}>
        &mdash; Filtering <strong>{opts.filter}</strong>
        over {opts.datapoints} data points,
        {opts.visiblecount} found.
      </span>
      <a onclick={opts.ismounted ? opts.onunmount : opts.onremount}>
        {opts.ismounted ? 'Unmount' : 'Remount'} Grid
      </a>
    </form>

    filterChange(e) {
      opts.onfilterchange(e.target.value)
    }
  </demo-form>

  <demo-table>
    <table width="100%" cellSpacing="2" class={filtered: !!opts.filter}>
      <tbody>
        <tr each={opts.grid}>
          <th>{id}</th>
          <td each={items}
              class={
                item: true,
                hidden: !!parent.parent.opts.filter && value.indexOf(parent.parent.opts.filter) === -1
              }>
            {value}
          </td>
        </tr>
      </tbody>
    </table>
  </demo-table>
</script>

<script>
  riot.mount('*')
</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 Riot</title>
	<link rel="stylesheet" type="text/css" href="demo.css"></link>
	</head>
	<body>
	<h1>Rendering Large Datasets With Riot</h1>

	<demo></demo>

	<script src="http://cdn.jsdelivr.net/g/riot@2.2(riot.js+compiler.js)"></script>
	<script type="riot/tag">
	// 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;
	}

	<demo>
	<demo-form
	onfilterchange={filterChange}
	datapoints={dataPoints}
	visiblecount={visibleCount}
	filter={filter}
	ismounted={!!grid.length}
	onunmount={unmount}
	onremount={remount}
	/>
	<demo-table grid={grid} filter={filter}/>

	this.grid = generateGrid(1000, 10)
	this.dataPoints = this.grid.length * this.grid[0].items.length
	this.filter = ''

	// It doesn't seem to redraw without these manual update() calls

	filterChange(filter) {
	this.filter = filter
	this.visibleCount = getVisibileCount(filter, this.grid)
	this.update()
	}

	unmount() {
	this.grid = []
	this.dataPoints = 0
	this.filter = ''
	this.update()
	}

	remount() {
	this.grid = generateGrid(1000, 10)
	this.dataPoints = this.grid.length * this.grid[0].items.length
	this.filter = ''
	this.update()
	}
	</demo>

	<demo-form>
	<form>
	<strong>Filter Data</strong>:
	<input value={opts.filter} oninput={filterChange}>
	<span hide={!opts.filter}>
	— Filtering <strong>{opts.filter}</strong>
	over {opts.datapoints} data points,
	{opts.visiblecount} found.
	</span>
	<a onclick={opts.ismounted ? opts.onunmount : opts.onremount}>
	{opts.ismounted ? 'Unmount' : 'Remount'} Grid
	</a>
	</form>

	filterChange(e) {
	opts.onfilterchange(e.target.value)
	}
	</demo-form>

	<demo-table>
	<table width="100%" cellSpacing="2" class={filtered: !!opts.filter}>
	<tbody>
	<tr each={opts.grid}>
	<th>{id}</th>
	<td each={items}
	class={
	item: true,
	hidden: !!parent.parent.opts.filter && value.indexOf(parent.parent.opts.filter) === -1
	}>
	{value}
	</td>
	</tr>
	</tbody>
	</table>
	</demo-table>
	</script>

	<script>
	riot.mount('*')
	</script>

	</body>
	</html>