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 Array data. </title> <meta name="description" content="This React Grid demo showcases how to data bind a react grid to Array 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/jqxgrid.sort.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 Array data. </div> <div id="app"></div> <script src="../build/grid_bindingtojsarray.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 = { localdata: [ ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'], ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'], ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico'], ['Around the Horn', 'Thomas Hardy', 'Sales Representative', '120 Hanover Sq.', 'London', 'UK'], ['Berglunds snabbkp', 'Christina Berglund', 'Order Administrator', 'Berguvsvgen 8', 'Lule', 'Sweden'], ['Blauer See Delikatessen', 'Hanna Moos', 'Sales Representative', 'Forsterstr. 57', 'Mannheim', 'Germany'], ['Blondesddsl pre et fils', 'Frdrique Citeaux', 'Marketing Manager', '24, place Klber', 'Strasbourg', 'France'], ['Blido Comidas preparadas', 'Martn Sommer', 'Owner', 'C\/ Araquil, 67', 'Madrid', 'Spain'], ['Bon app', 'Laurence Lebihan', 'Owner', '12, rue des Bouchers', 'Marseille', 'France'], ['Bottom-Dollar Markets', 'Elizabeth Lincoln', 'Accounting Manager', '23 Tsawassen Blvd.', 'Tsawassen', 'Canada'], ['B`s Beverages', 'Victoria Ashworth', 'Sales Representative', 'Fauntleroy Circus', 'London', 'UK'], ['Cactus Comidas para llelet', 'Patricio Simpson', 'Sales Agent', 'Cerrito 333', 'Buenos Aires', 'Argentina'], ['Centro comercial Moctezuma', 'Francisco Chang', 'Marketing Manager', 'Sierras de Granada 9993', 'Mxico D.F.', 'Mexico'], ['Chop-suey Chinese', 'Yang Wang', 'Owner', 'Hauptstr. 29', 'Bern', 'Switzerland'], ['Comrcio Mineiro', 'Pedro Afonso', 'Sales Associate', 'Av. dos Lusadas, 23', 'Sao Paulo', 'Brazil'], ['Consolidated Holdings', 'Elizabeth Brown', 'Sales Representative', 'Berkeley Gardens 12 Brewery', 'London', 'UK'], ['Drachenblut Delikatessen', 'Sven Ottlieb', 'Order Administrator', 'Walserweg 21', 'Aachen', 'Germany'], ['Du monde entier', 'Janine Labrune', 'Owner', '67, rue des Cinquante Otages', 'Nantes', 'France'], ['Eastern Connection', 'Ann Devon', 'Sales Agent', '35 King George', 'London', 'UK'], ['Ernst Handel', 'Roland Mendel', 'Sales Manager', 'Kirchgasse 6', 'Graz', 'Austria'] ], datafields: [ { name: 'CompanyName', type: 'string', map: '0' }, { name: 'ContactName', type: 'string', map: '1' }, { name: 'Title', type: 'string', map: '2' }, { name: 'Address', type: 'string', map: '3' }, { name: 'City', type: 'string', map: '4' }, { name: 'Country', type: 'string', map: '5' } ], datatype: 'array' }; let dataAdapter = new $.jqx.dataAdapter(source); let columns = [ { text: 'Company Name', datafield: 'CompanyName', width: 200 }, { text: 'Contact Name', datafield: 'ContactName', width: 150 }, { text: 'Contact Title', datafield: 'Title', width: 100 }, { text: 'Address', datafield: 'Address', width: 100 }, { text: 'City', datafield: 'City', width: 100 }, { text: 'Country', datafield: 'Country' } ]; return ( <JqxGrid width={850} source={dataAdapter} sortable={true} columnsresize={true} columns={columns} /> ) } } ReactDOM.render(<App />, document.getElementById('app'));