| license: mit |
assembled with blockbuilder.org
Simple example combining react-virtualized with react-sparklines because I could not find any. Most of this code comes from the react-virtualized table example with minor modifications to add a cellRenderer for the sparklines.
Thanks so much to:
react-virtualized| // copied directly from https://github.com/bvaughn/react-virtualized/blob/master/playground/helper.js | |
| function loadStyle (source, callback) { | |
| var link = document.createElement('link') | |
| link.setAttribute('rel', 'stylesheet') | |
| link.setAttribute('href', source) | |
| link.onload = callback | |
| document.head.appendChild(link) | |
| } | |
| function loadScript (source) { | |
| var script = document.createElement('script') | |
| script.setAttribute('src', source) | |
| script.async = false | |
| document.head.appendChild(script) | |
| } | |
| function loadScriptsAndStyles (source) { | |
| var baseDir = 'https://unpkg.com/react-virtualized/' | |
| var sourceParam = getUrlParam('source') | |
| if (sourceParam) { | |
| baseDir = sourceParam === 'local' | |
| ? '../' | |
| : `https://unpkg.com/react-virtualized@${sourceParam}/` | |
| } | |
| var styleSource = baseDir + 'styles.css' | |
| var scriptSource = baseDir + 'dist/umd/react-virtualized.js' | |
| var appSource = source | |
| loadStyle(styleSource, function() { | |
| loadScript(scriptSource) | |
| loadScript(appSource) | |
| }) | |
| } | |
| function loadReact () { | |
| var baseDir = 'https://cdnjs.cloudflare.com/ajax/libs/react/15.2.0' | |
| var reactParam = getUrlParam('react') | |
| if (reactParam) { | |
| baseDir = reactParam === 'latest' | |
| ? 'http://react.zpao.com/builds/master/latest' | |
| : `https://cdnjs.cloudflare.com/ajax/libs/react/${reactParam}` | |
| } | |
| loadScript(`${baseDir}/react-with-addons.min.js`) | |
| loadScript(`${baseDir}/react-dom.min.js`) | |
| } |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>foo</title> | |
| <style type="text/css"> | |
| body, html, #mount { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="mount"></div> | |
| <script src="utils.js"></script> | |
| <script src="helper.js"></script> | |
| <script> | |
| loadReact(); | |
| loadScriptsAndStyles('table_sparkline.js'); | |
| loadScript('https://unpkg.com/react-sparklines'); | |
| </script> | |
| </body> | |
| </html> |
| const NUM_COLUMNS = 10; | |
| function rowGetter (params) { | |
| return new Array(NUM_COLUMNS).fill('').map( | |
| function (_, index) { | |
| return Math.random() * 100; | |
| }) | |
| } | |
| function cellRenderer(params) { | |
| return React.createElement( | |
| ReactSparklines.Sparklines, | |
| {data: params.rowData, height:20, width:50}, | |
| React.createElement( | |
| ReactSparklines.SparklinesLine, | |
| null | |
| ) | |
| ) | |
| } | |
| var App = React.createClass({ | |
| render: function() { | |
| const flexColumns = []; | |
| for (var i = 0; i < NUM_COLUMNS; i++) { | |
| flexColumns.push( | |
| React.createElement( | |
| ReactVirtualized.Column, | |
| { | |
| dataKey: i, | |
| flexGrow: 1, | |
| key: i, | |
| width: 50, | |
| cellRenderer: cellRenderer | |
| } | |
| ) | |
| ) | |
| } | |
| return React.createElement( | |
| ReactVirtualized.AutoSizer, | |
| null, | |
| function (params) { | |
| return React.createElement( | |
| ReactVirtualized.Table, | |
| { | |
| height: params.height, | |
| overscanRowCount: 0, | |
| rowGetter, | |
| rowHeight: 30, | |
| rowCount: 1000, | |
| width: params.width | |
| }, | |
| null, | |
| flexColumns | |
| ) | |
| } | |
| ) | |
| } | |
| }) | |
| ReactDOM.render( | |
| React.createElement(App), | |
| document.querySelector('#mount') | |
| ) |
| // copied directly from https://github.com/bvaughn/react-virtualized/blob/master/playground/utils.js | |
| function getUrlParams () { | |
| var search = window.location.search | |
| return search.length | |
| ? search | |
| .substr(1) | |
| .split('&') | |
| .reduce( | |
| function(reduced, value) { | |
| var matches = value.split('=') | |
| reduced[matches[0]] = matches[1] | |
| return reduced | |
| }, | |
| {} | |
| ) | |
| : {} | |
| } | |
| function getUrlParam (key) { | |
| return getUrlParams()[key] | |
| } |