React UI Components

Show Demo List

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title id='Description'> This example shows how to create a React Grid from Comma-delimited text also known as comma-separated values (CSV). </title> <meta name="description" content="This React Grid demo showcases how to data bind a react grid to CSV data"/> <link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> </head> <body> <div class="example-description" style="margin-bottom:3em"> This example shows how to create a React Grid from Comma-delimited text also known as comma-separated values (CSV). </div> <div id="app"></div> <script src="../build/grid_bindingtocsv.bundle.js"></script> </body> </html>

import React from 'react'; import ReactDOM from 'react-dom'; import JqxGrid from '../../../jqwidgets-react/react_jqxgrid.js'; class App extends React.Component { render() { let source = { datatype: "csv", datafields: [ { name: 'Date', type: 'date' }, { name: 'S&P 500', type: 'float' }, { name: 'NASDAQ', type: 'float' } ], url: '../sampledata/nasdaq_vs_sp500.txt' }; let dataAdapter = new $.jqx.dataAdapter(source); let columns = [ { text: 'Date', datafield: 'Date', cellsformat: 'D', width: 250 }, { text: 'S&P 500', datafield: 'S&P 500', width: 300, cellsformat: 'f' }, { text: 'NASDAQ', datafield: 'NASDAQ', cellsformat: 'f' } ]; return ( <JqxGrid width={850} source={dataAdapter} columnsresize={true} columns={columns} /> ) } } ReactDOM.render(<App />, document.getElementById('app'));