Skip to content

Instantly share code, notes, and snippets.

/index.html

Created June 11, 2015 08:42
Show Gist options
  • Save anonymous/74432c3501dc03f7ba2b to your computer and use it in GitHub Desktop.
Save anonymous/74432c3501dc03f7ba2b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!doctype html>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="http://rawgit.com/carlosrocha/react-data-components/master/css/table-twbs.css">
<script src="http://fb.me/react-0.13.0-rc2.js"></script>
<script src="http://rawgit.com/carlosrocha/react-data-components/master/dist/react-data-components.min.js"></script>
<body><script id="jsbin-javascript">
var DataTable = ReactDataComponents.DataTable;
// Generate random data
var names = [ 'Carlos', 'Juan', 'Jesus', 'Alberto', 'John' ];
var cities = [ 'Chicago', 'Tampico', 'San Francisco', 'Mexico City', 'Boston', 'New York' ];
var addresses = [ '333 West Wacker Drive', '1931 Insurgentes Sur', '1 Lombard Street', '55 Av Hidalgo'];
var data = [];
for (var i = 0; i < 1000; i++) {
data.push({
id: i,
name: names[~~(Math.random() * names.length)],
city: cities[~~(Math.random() * cities.length)],
address: addresses[~~(Math.random() * addresses.length)]
});
}
var myDivElement = function(a, b){
var aStyle = {
color: 'red'
};
var bStyle = {
color: 'green'
}
return React.createElement("div", null, React.createElement("div", {className: "foo", style: bStyle}, b), React.createElement("div", {style: aStyle}, a));
}
// var addressCell = ()=> <div>{row['Address'] + row['City']}</div>;
var columns = [
{ title: 'Name', prop: 'name' },
{ title: 'City', prop: 'city' },
{ title: 'Address', render: myDivElement, prop: 'address' }
];
React.render((
React.createElement(DataTable, {
className: "container",
keys: "id",
columns: columns,
initialData: data,
initialPageLength: 5,
initialSortBy: { prop: 'city', order: 'descending'},
pageLengthOptions: [ 5, 20, 50]}
)
), document.body);
</script>
<script id="jsbin-source-html" type="text/html"><!doctype html>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//rawgit.com/carlosrocha/react-data-components/master/css/table-twbs.css">
<script src="//fb.me/react-0.13.0-rc2.js"><\/script>
<script src="//rawgit.com/carlosrocha/react-data-components/master/dist/react-data-components.min.js"><\/script>
<body></body></script>
<script id="jsbin-source-javascript" type="text/javascript">var DataTable = ReactDataComponents.DataTable;
// Generate random data
var names = [ 'Carlos', 'Juan', 'Jesus', 'Alberto', 'John' ];
var cities = [ 'Chicago', 'Tampico', 'San Francisco', 'Mexico City', 'Boston', 'New York' ];
var addresses = [ '333 West Wacker Drive', '1931 Insurgentes Sur', '1 Lombard Street', '55 Av Hidalgo'];
var data = [];
for (var i = 0; i < 1000; i++) {
data.push({
id: i,
name: names[~~(Math.random() * names.length)],
city: cities[~~(Math.random() * cities.length)],
address: addresses[~~(Math.random() * addresses.length)]
});
}
var myDivElement = function(a, b){
var aStyle = {
color: 'red'
};
var bStyle = {
color: 'green'
}
return <div><div className="foo" style={bStyle}>{b}</div><div style={aStyle}>{a}</div></div>;
}
// var addressCell = ()=> <div>{row['Address'] + row['City']}</div>;
var columns = [
{ title: 'Name', prop: 'name' },
{ title: 'City', prop: 'city' },
{ title: 'Address', render: myDivElement, prop: 'address' }
];
React.render((
<DataTable
className="container"
keys="id"
columns={columns}
initialData={data}
initialPageLength={5}
initialSortBy={{ prop: 'city', order: 'descending' }}
pageLengthOptions={[ 5, 20, 50 ]}
/>
), document.body);</script></body>
Raw
jsbin.vimeyahiza.js
var DataTable = ReactDataComponents.DataTable;
// Generate random data
var names = [ 'Carlos', 'Juan', 'Jesus', 'Alberto', 'John' ];
var cities = [ 'Chicago', 'Tampico', 'San Francisco', 'Mexico City', 'Boston', 'New York' ];
var addresses = [ '333 West Wacker Drive', '1931 Insurgentes Sur', '1 Lombard Street', '55 Av Hidalgo'];
var data = [];
for (var i = 0; i < 1000; i++) {
data.push({
id: i,
name: names[~~(Math.random() * names.length)],
city: cities[~~(Math.random() * cities.length)],
address: addresses[~~(Math.random() * addresses.length)]
});
}
var myDivElement = function(a, b){
var aStyle = {
color: 'red'
};
var bStyle = {
color: 'green'
}
return React.createElement("div", null, React.createElement("div", {className: "foo", style: bStyle}, b), React.createElement("div", {style: aStyle}, a));
}
// var addressCell = ()=> <div>{row['Address'] + row['City']}</div>;
var columns = [
{ title: 'Name', prop: 'name' },
{ title: 'City', prop: 'city' },
{ title: 'Address', render: myDivElement, prop: 'address' }
];
React.render((
React.createElement(DataTable, {
className: "container",
keys: "id",
columns: columns,
initialData: data,
initialPageLength: 5,
initialSortBy: { prop: 'city', order: 'descending'},
pageLengthOptions: [ 5, 20, 50]}
)
), document.body);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment