React UI Components

Show Demo List

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title id='Description'>React PivotGrid with pivot values displayed on the columns</title> <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/jqxpivot.js"></script> <script type="text/javascript" src="../jqwidgets/jqxpivotgrid.js"></script> <script type="text/javascript" src="../jqwidgets/jqxtextarea.js"></script> <script type="text/javascript" src="localization.js"></script> <script type="text/javascript" src="../scripts/demos.js"></script> </head> <body class='default'> <div id="app"></div> <script src="../build/pivotgrid_values_on_columns.bundle.js"></script> <div class="example-description"> <br /> <h2>Description</h2> <div style="width: 800px;"> This is an example of React Pivot Grid with the pivot values displayed along the pivot columns. The react pivot grid components can displays the pivot values fields either below each column or on the right side of each pivot row. The default behavior is to display the pivot values along the columns. To change it this option modify the pivotValuesOnRows property in the pivot data source. </div> </div> </body> </html>

import React from 'react'; import ReactDOM from 'react-dom'; import JqxPivotGrid from '../../../jqwidgets-react/react_jqxpivotgrid.js'; class App extends React.Component { componentDidMount() { this.refs.myReactPivotGrid.getPivotRows().items[1].expand(); this.refs.myReactPivotGrid.refresh(); } render() { // prepare sample data let data = new Array(); let firstNames = [ "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene" ]; let lastNames = [ "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier" ]; let productNames = [ "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist" ]; let priceValues = [ "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0" ]; for (var i = 0; i < 500; i++) { var row = {}; var productindex = Math.floor(Math.random() * productNames.length); var price = parseFloat(priceValues[productindex]); var quantity = 1 + Math.round(Math.random() * 10); row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)]; row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)]; row["productname"] = productNames[productindex]; row["price"] = price; row["quantity"] = quantity; row["total"] = price * quantity; data[i] = row; } // create a data source and data adapter let source = { localdata: data, datatype: "array", datafields: [ { name: 'firstname', type: 'string' }, { name: 'lastname', type: 'string' }, { name: 'productname', type: 'string' }, { name: 'quantity', type: 'number' }, { name: 'price', type: 'number' }, { name: 'total', type: 'number' } ] }; let dataAdapter = new jqx.dataAdapter(source); dataAdapter.dataBind(); // create a pivot data source from the dataAdapter let pivotDataSource = new jqx.pivot( dataAdapter, { pivotValuesOnRows: false, rows: [{ dataField: 'firstname' }, { dataField: 'lastname'}], columns: [{ dataField: 'productname'}], filters: [], values: [ { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2} }, { dataField: 'price', 'function': 'count', text: 'count' }, { dataField: 'price', 'function': 'average', text: 'average', formatSettings: { prefix: '$', decimalPlaces: 2} } ] } ); return ( <JqxPivotGrid ref='myReactPivotGrid' style={{ width: 800, height: 400 }} source = {pivotDataSource} treeStyleRows = {false} /> ); } } ReactDOM.render(<App />, document.getElementById('app'));