Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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}>
&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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment