-
-
Save tsyber1an/dae2933df52a1bbaf0d3 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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