React UI Components

Show Demo List

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="keywords" content="ReactJS TreeGrid" /> <title id='Description'> ReactJS Tree Grid demo. In this sample is illustrated the jqxTreeGrid Data Paging. </title> <meta name="description" content="This React Tree Grid demo showcases the Paging by Root Tree Grid records"/> <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/jqxlistbox.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../jqwidgets/jqxdatatable.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtreegrid.js"></script> <script type="text/javascript" src="../sampledata/generatedata.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> </head> <body> <div class="example-description" style="margin-bottom: 3em"> ReactJS Tree Grid demo. In this sample is illustrated the jqxTreeGrid Data Paging. </div> <div id="app"></div> <script src="../build/treegrid_paging.bundle.js"></script> </body> </html>

import React from 'react'; import ReactDOM from 'react-dom'; import JqxTreeGrid from '../../../jqwidgets-react/react_jqxtreegrid.js'; class App extends React.Component { componentDidMount() { this.refs.myTreeGrid.expandRow(2); } render () { // prepare the data let source = { dataType: 'array', dataFields: [ { name: 'name', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'id', type: 'number' }, { name: 'parentid', type: 'number' }, { name: 'price', type: 'number' }, { name: 'date', type: 'date' }, { name: 'customer', type: 'string' } ], hierarchy: { keyDataField: { name: 'id' }, parentDataField: { name: 'parentid' } }, id: 'id', localData: generateordersdata() }; let dataAdapter = new $.jqx.dataAdapter(source); // create Tree Grid let columns = [ { text: 'Order Name', dataField: 'name', align: 'center', width: 250 }, { text: 'Customer', dataField: 'customer', align: 'center', width: 250 }, { text: 'Price', dataField: 'price', cellsFormat: 'c2', align: 'center', cellsAlign: 'right', width: 80 }, { text: 'Order Date', dataField: 'date', align: 'center', cellsFormat: 'dd-MMMM-yyyy hh:mm', cellsRenderer: (rowKey, column, cellValue, rowData, cellText) => { if (rowData.level === 0) { return dataAdapter.formatDate(cellValue, 'dd-MMMM-yyyy'); } return cellText; } } ]; return ( <JqxTreeGrid ref='myTreeGrid' width={850} source={dataAdapter} sortable={true} pageable={true} pagerMode={'advanced'} columns={columns} /> ) } } ReactDOM.render(<App />, document.getElementById('app'));