Skip to content

Instantly share code, notes, and snippets.

@insin

insin/demo.css

Last active Sep 15, 2016
Embed
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 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.