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 enable the paging feature of the React Grid. </title> <meta name="description" content="This React Grid demo showcases how to implement Paging in the Grid"/> <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/jqxmenu.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpanel.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 enable the paging feature of the React Grid. </div> <div id="app"></div> <script src="../build/grid_paging.bundle.js"></script> </body> </html>

import React from 'react';import ReactDOM from 'react-dom';import JqxGrid from '../../../jqwidgets-react/react_jqxgrid.js';import JqxPanel from '../../../jqwidgets-react/react_jqxpanel.js';class App extends React.Component { componentDidMount() { this.refs.myGrid.on('pagechanged', (event) => { document.getElementById('eventslog').style.display = 'block'; if (document.getElementsByClassName('logged').length >= 5) { this.refs.myPanel.clearcontent(); } let args = event.args; let eventData = 'pagechanged <div>Page:' + args.pagenum + ', Page Size: ' + args.pagesize + '</div>'; this.refs.myPanel.prepend('<div class="logged" style="margin-top: 5px;">' + eventData + '</div>'); // get page information. let paginginformation = this.refs.myGrid.getpaginginformation(); document.getElementById('paginginfo').innerHTML = '<div style="margin-top: 5px;">Page:' + paginginformation.pagenum + ', Page Size: ' + paginginformation.pagesize + ', Pages Count: ' + paginginformation.pagescount + '</div>'; }); this.refs.myGrid.on('pagesizechanged', (event) => { document.getElementById('eventslog').style.display = 'block'; this.refs.myPanel.clearcontent(); let args = event.args; let eventData = 'pagesizechanged <div>Page:' + args.pagenum + ', Page Size: ' + args.pagesize + ', Old Page Size: ' + args.oldpagesize + '</div>'; this.refs.myPanel.prepend('<div style="margin-top: 5px;">' + eventData + '</div>'); // get page information. let paginginformation = this.refs.myGrid.getpaginginformation();; document.getElementById('paginginfo').innerHTML = '<div style="margin-top: 5px;">Page:' + paginginformation.pagenum + ', Page Size: ' + paginginformation.pagesize + ', Pages Count: ' + paginginformation.pagescount + '</div>'; }); } render() { let source = { datatype: 'xml', datafields: [ { name: 'ShippedDate', map: 'm\\:properties>d\\:ShippedDate', type: 'date' }, { name: 'Freight', map: 'm\\:properties>d\\:Freight', type: 'float' }, { name: 'ShipName', map: 'm\\:properties>d\\:ShipName' }, { name: 'ShipAddress', map: 'm\\:properties>d\\:ShipAddress' }, { name: 'ShipCity', map: 'm\\:properties>d\\:ShipCity' }, { name: 'ShipCountry', map: 'm\\:properties>d\\:ShipCountry' } ], root: 'entry', record: 'content', id: 'm\\:properties>d\\:OrderID', url: '../sampledata/orders.xml', pager: (pagenum, pagesize, oldpagenum) => { // callback called when a page or page size is changed. } }; let dataAdapter = new $.jqx.dataAdapter(source); let columns = [ { text: 'Ship Name', datafield: 'ShipName', width: 250 }, { text: 'Shipped Date', datafield: 'ShippedDate', width: 230, cellsformat: 'D' }, { text: 'Freight', datafield: 'Freight', width: 130, cellsformat: 'F2', cellsalign: 'right' }, { text: 'Ship Address', datafield: 'ShipAddress', width: 350 }, { text: 'Ship City', datafield: 'ShipCity', width: 100 }, { text: 'Ship Country', datafield: 'ShipCountry', width: 101 } ]; return ( <div> <JqxGrid ref='myGrid' width={850} source={dataAdapter} sortable={true} pageable={true} autoheight={true} columnsresize={true} selectionmode={'multiplerowsextended'} columns={columns} /> <div id='eventslog' style={{ display: 'none', marginTop: 30 }}> <div style={{ float: 'left' }}> Event Log: <JqxPanel ref='myPanel' width={300} height={300} style={{ border: 'none' }} /> </div> <div style={{ float: 'left' }}> Paging Details: <div id='paginginfo' /> </div> </div> </div> ) } } ReactDOM.render(<App />, document.getElementById('app'));