Sets or gets the source property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
 
class App extends React.Component {
    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the localization property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
 
class App extends React.Component {
    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource} localization={localization}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the scrollBarsEnabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
 
class App extends React.Component {
    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource} scrollBarsEnabled={false}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the selectionEnabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
 
class App extends React.Component {
    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource} multipleSelectionEnabled={false}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the multipleSelectionEnabled property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
 
class App extends React.Component {
    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource} multipleSelectionEnabled={false}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the treeStyleRows property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
 
class App extends React.Component {
    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource} treeStyleRows={false}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the autoResize property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
 
class App extends React.Component {
    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource} treeStyleRows={true}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the itemsRenderer property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
 
class App extends React.Component {
    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource} itemsRenderer={itemsRenderer}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));

Sets or gets the cellsRenderer property.

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
 
class App extends React.Component {
    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource} cellsRenderer={cellsRenderer}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));

This event is triggered when a pivot item is expanding. You may use the event's cancel flag to stop further processing.

Code examples

Bind to the pivotitemexpanding event of jqxPivotGrid.

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.myPivotGrid.on('pivotitemexpanding', (event) => {
            // Do Something...
        });
    }

    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));
							
						

This event is triggered after a pivot item is expanded.

Code examples

Bind to the pivotitemexpanded event of jqxPivotGrid.

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.myPivotGrid.on('pivotitemexpanded', (event) => {
            // Do Something...
        });
    }

    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));
							
						

This event is triggered when a pivot item is collapsing. You may use the event's cancel flag to stop further processing.

Code examples

Bind to the pivotitemcollapsing event of jqxPivotGrid.

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.myPivotGrid.on('pivotitemcollapsing', (event) => {
            // Do Something...
        });
    }

    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));
							
						

This event is triggered after a pivot item is collapsed.

Code examples

Bind to the pivotitemcollapsed event of jqxPivotGrid.

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.myPivotGrid.on('pivotitemcollapsed', (event) => {
            // Do Something...
        });
    }

    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));
							
						

This event is triggered the sorting is about to change. You may use the event's cancel flag to stop further processing.

Code examples

Bind to the sortchanging event of jqxPivotGrid.

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.myPivotGrid.on('sortchanging', (event) => {
            // Do Something...
        });
    }

    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));
							
						

This event is triggered after the sorting order has changed.

Code examples

Bind to the sortchanged event of jqxPivotGrid.

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.myPivotGrid.on('sortchanged', (event) => {
            // Do Something...
        });
    }

    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));
							
						

This event is triggered the sorting is about to be removed. You may use the event's cancel flag to stop further processing.

Code examples

Bind to the sortremoving event of jqxPivotGrid.

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.myPivotGrid.on('sortremoving', (event) => {
            // Do Something...
        });
    }

    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));
							
						

This event is triggered after the sorting has been sortremoved.

Code examples

Bind to the sortremoved event of jqxPivotGrid.

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.myPivotGrid.on('sortremoved', (event) => {
            // Do Something...
        });
    }

    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));
							
						

This event is triggered after the selection of a pivot item has changed.

Code examples

Bind to the pivotitemselectionchanged event of jqxPivotGrid.

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.myPivotGrid.on('pivotitemselectionchanged', (event) => {
            // Do Something...
        });
    }

    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));
							
						

This event is triggered on mousedown over a pivot grid cell. You may use the event's cancel flag to stop further processing.

Code examples

Bind to the pivotcellmousedown event of jqxPivotGrid.

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.myPivotGrid.on('pivotcellmousedown', (event) => {
            // Do Something...
        });
    }

    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));
							
						

This event is triggered on mouseup over a pivot grid cell. You may use the event's cancel flag to stop further processing.

Code examples

Bind to the pivotcellmouseup event of jqxPivotGrid.

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.myPivotGrid.on('pivotcellmouseup', (event) => {
            // Do Something...
        });
    }

    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));
							
						

This event is triggered on click over a pivot grid cell. You may use the event's cancel flag to stop further processing.

Code examples

Bind to the pivotcellclick event of jqxPivotGrid.

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.myPivotGrid.on('pivotcellclick', (event) => {
            // Do Something...
        });
    }

    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));
							
						

This event is triggered on double click over a pivot grid cell. You may use the event's cancel flag to stop further processing.

Code examples

Bind to the pivotcelldblclick event of jqxPivotGrid.

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.myPivotGrid.on('pivotcelldblclick', (event) => {
            // Do Something...
        });
    }

    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));
							
						

This event is triggered on mousedown over a pivot grid item. You may use the event's cancel flag to stop further processing.

Code examples

Bind to the pivotitemmousedown event of jqxPivotGrid.

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.myPivotGrid.on('pivotitemmousedown', (event) => {
            // Do Something...
        });
    }

    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));
							
						

This event is triggered on mouseup over a pivot grid item. You may use the event's cancel flag to stop further processing.

Code examples

Bind to the pivotitemmouseup event of jqxPivotGrid.

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.myPivotGrid.on('pivotitemmouseup', (event) => {
            // Do Something...
        });
    }

    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));
							
						

This event is triggered on click over a pivot grid item. You may use the event's cancel flag to stop further processing.

Code examples

Bind to the pivotitemclick event of jqxPivotGrid.

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.myPivotGrid.on('pivotitemclick', (event) => {
            // Do Something...
        });
    }

    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));
							
						

This event is triggered on double click over a pivot grid item. You may use the event's cancel flag to stop further processing.

Code examples

Bind to the pivotitemdblclick event of jqxPivotGrid.

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.myPivotGrid.on('pivotitemdblclick', (event) => {
            // Do Something...
        });
    }

    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));
							
						

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
 
class App extends React.Component {
    componentDidMount() {
        let value = this.refs.myPivotGrid.getInstance();
    }
    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));
							
						

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.myPivotGrid.refresh();
    }
    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));
							
						

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.myPivotGrid.destroy();
    }
    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));
							
						

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
 
class App extends React.Component {
    componentDidMount() {
        let value = this.refs.myPivotGrid.getPivotRows();
    }
    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));
							
						

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
 
class App extends React.Component {
    componentDidMount() {
        let value = this.refs.myPivotGrid.getPivotColumns();
    }
    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));
							
						

import React from 'react';
import ReactDOM from 'react-dom';
 
import JqxPivotGrid from 'jqwidgets-react/react_jqxpivotgrid.js';
 
class App extends React.Component {
    componentDidMount() {
        let value = this.refs.myPivotGrid.getPivotCells();
    }
    
    render() {
        // Prepare Sample Data
        const data = new Array();
 
        const countries =
        [
            'Germany', 'France', 'United States', 'Italy', 'Spain', 'Finland', 'Canada', 'Japan', 'Brazil', 'United Kingdom', 'China', 'India', 'South Korea', 'Romania', 'Greece'
        ];
 
        const dataPoints =
        [
            '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 (let i = 0; i < countries.length * 2; i++) {
            let row = {};
            const value = parseFloat(dataPoints[Math.round((Math.random() * 100)) % dataPoints.length]);
            row['country'] = countries[i % countries.length];
            row['value'] = value;
            data[i] = row;
        }
 
        // Create a Data Source and DataAdapter
        const source =
        {
            localdata: data,
            datatype: 'array',
            datafields:
            [
                { name: 'country', type: 'string' },
                { name: 'value', type: 'number' }
            ]
        };
 
        const dataAdapter = new jqx.dataAdapter(source);
        dataAdapter.dataBind();
 
        // Create a Pivot Data Source from the DataAdapter
        const pivotDataSource = new jqx.pivot(
            dataAdapter,
            {
                pivotValuesOnRows: false,
                rows: [{ dataField: 'country', width: 190 }],
                columns: [],
                values: 
                [
                    { dataField: 'value', width: 216, 'function': 'min', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                    { dataField: 'value', width: 216, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                ]
            }
        );
        return (
            <JqxPivotGrid ref='myPivotGrid' style={{ width: 800, height: 400 }}
                source={pivotDataSource}
            />
        );
    }
}
ReactDOM.render(<App />, document.getElementById('app'));