Gets or sets pivot source adapter used to supply data to the pivot grid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
  
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} 
        source={this.state.source} autoResize={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets or sets the localization object used to localize the text elements of the pivot grid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
  
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} 
        source={this.state.source} autoResize={true} localization={this.state.localization}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets or sets whether the scrollbars of the pivot grid are enabled or disabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
  
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} 
        source={this.state.source} autoResize={true} scrollBarsEnabled={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets or sets whether selection in the pivot grid is enabled or disabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
  
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} 
        source={this.state.source} autoResize={true} selectionEnabled={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets or sets whether the multiple selection in the pivot grid is enabled or disabled.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
  
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} 
        source={this.state.source} autoResize={true} multipleSelectionEnabled={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets or sets the rows of the pivot grid are displayed as a tree structure or using classic OLAP style.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
  
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} 
        source={this.state.source} autoResize={true} treeStyleRows={false}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets or sets if the size of pivot grid adjusts automatically to display the entire content.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
  
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} 
        source={this.state.source} autoResize={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Custom rendering function used to render the pivot rows and columns. The function should return a string which is valid HTML.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
  
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} 
        source={this.state.source} autoResize={true} itemsRenderer={this.state.itemsRenderer}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Custom rendering function used to render the pivot cells. The function should return a string which is valid HTML.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
  
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} 
        source={this.state.source} autoResize={true} cellsRenderer={this.state.cellsRenderer}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
  
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} onPivotitemexpanding={this.onPivotitemexpanding} 
        source={this.state.source} autoResize={true}
      />
    );
  }
 
  private onPivotitemexpanding(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered after a pivot item is expanded.

Code examples

Bind to the pivotitemexpanded event of jqxPivotGrid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
  
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} onPivotitemexpanded={this.onPivotitemexpanded} 
        source={this.state.source} autoResize={true}
      />
    );
  }
 
  private onPivotitemexpanded(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
  
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} onPivotitemcollapsing={this.onPivotitemcollapsing} 
        source={this.state.source} autoResize={true}
      />
    );
  }
 
  private onPivotitemcollapsing(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered after a pivot item is collapsed.

Code examples

Bind to the pivotitemcollapsed event of jqxPivotGrid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
  
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} onPivotitemcollapsed={this.onPivotitemcollapsed} 
        source={this.state.source} autoResize={true}
      />
    );
  }
 
  private onPivotitemcollapsed(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
  
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} onSortchanging={this.onSortchanging} 
        source={this.state.source} autoResize={true}
      />
    );
  }
 
  private onSortchanging(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered after the sorting order has changed.

Code examples

Bind to the sortchanged event of jqxPivotGrid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
  
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} onSortchanged={this.onSortchanged} 
        source={this.state.source} autoResize={true}
      />
    );
  }
 
  private onSortchanged(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
  
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} onSortremoving={this.onSortremoving} 
        source={this.state.source} autoResize={true}
      />
    );
  }
 
  private onSortremoving(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

This event is triggered after the sorting has been removed.

Code examples

Bind to the sortremoved event of jqxPivotGrid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
  
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} onSortremoved={this.onSortremoved} 
        source={this.state.source} autoResize={true}
      />
    );
  }
 
  private onSortremoved(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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

Code examples

Bind to the pivotitemselectionchanged event of jqxPivotGrid.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
  
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} onPivotitemselectionchanged={this.onPivotitemselectionchanged} 
        source={this.state.source} autoResize={true}
      />
    );
  }
 
  private onPivotitemselectionchanged(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
  
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} onPivotcellmousedown={this.onPivotcellmousedown} 
        source={this.state.source} autoResize={true}
      />
    );
  }
 
  private onPivotcellmousedown(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
  
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} onPivotcellmouseup={this.onPivotcellmouseup} 
        source={this.state.source} autoResize={true}
      />
    );
  }
 
  private onPivotcellmouseup(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
  
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} onPivotcellclick={this.onPivotcellclick} 
        source={this.state.source} autoResize={true}
      />
    );
  }
 
  private onPivotcellclick(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
  
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} onPivotcelldblclick={this.onPivotcelldblclick} 
        source={this.state.source} autoResize={true}
      />
    );
  }
 
  private onPivotcelldblclick(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
  
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} onPivotitemmousedown={this.onPivotitemmousedown} 
        source={this.state.source} autoResize={true}
      />
    );
  }
 
  private onPivotitemmousedown(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
  
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} onPivotitemmouseup={this.onPivotitemmouseup} 
        source={this.state.source} autoResize={true}
      />
    );
  }
 
  private onPivotitemmouseup(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
  
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} onPivotitemclick={this.onPivotitemclick} 
        source={this.state.source} autoResize={true}
      />
    );
  }
 
  private onPivotitemclick(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

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.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
  
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} onPivotitemdblclick={this.onPivotitemdblclick} 
        source={this.state.source} autoResize={true}
      />
    );
  }
 
  private onPivotitemdblclick(e: Event): void {
    alert('do something...');
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Returns the instance of the pivot grid component

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
 
  public componentDidMount(): void {
    this.myPivotGrid.current!.getInstance();
  }
   
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} 
        source={this.state.source} autoResize={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Refreshes the content of the pivot grid component

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
 
  public componentDidMount(): void {
    this.myPivotGrid.current!.refresh();
  }
   
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} 
        source={this.state.source} autoResize={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Return the pivot rows of the pivot grid

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
 
  public componentDidMount(): void {
    this.myPivotGrid.current!.getPivotRows();
  }
   
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} 
        source={this.state.source} autoResize={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Return the pivot columns of the pivot grid

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
 
  public componentDidMount(): void {
    this.myPivotGrid.current!.getPivotColumns();
  }
   
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} 
        source={this.state.source} autoResize={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Return the pivot cells of the pivot grid

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
 
  public componentDidMount(): void {
    this.myPivotGrid.current!.getPivotCells();
  }
   
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} 
        source={this.state.source} autoResize={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

Gets or sets the type of the pivot designer - pivotGrid or pivotChart.

Gets or sets the instance of the widget component controlled by the pivot designer component.

Refreshes the content of the pivot designer component.

The row of the pivot cell.

The column of the pivot cell.

Optional text that appears at the start of the formatted string.

Optional text that appears at the end of the formatted string.

Separator for the decimal point in the cell's value.

Separator for the thousands in the cell's value.

Number of decimal places for the cell's value.

Determines if negative numbers will be displayed in brackets () or with a negative sign - .

Returns the pivot cell at the corresponding position if exists

Clears all pivot cells

Sets the value of a pivot cell

Gets the value of a pivot cell

Drills through a pivot cells and returns the respective source data records

Selects a pivot cell

Unselects a pivot cell

Clears the selection of all selected pivot cells

Checks if a pivot cell is selected

Returns the number of selected cells

Returns an array of all selected cells

Returns the cell left, right, above or below a specific pivot cell

Gets or sets if the collection of pivot items is resizable.

Gets or sets if the collection of pivot items is sortable.

Gets or sets if expand/collapse buttons are visible.

Returns a reference to the parent pivot grid instance.

Returns an array of all child pivot items.

Returns an array of all child pivot value items.

Returns true if the pivot items collection is hidden.

Makes the pivot items collection visible

Hides the pivot items collection

Refreshes the content of the pivot items collection

Returns the depth of the collection

Auto resizes the pivot items collection.
autoResizeMode: "default", "fitAll", "fitItemContent"

Returns the sort item of the collection

Returns the sort order of the collection

Sorts the items collection

Removes the sort order of the collection

Selects a pivot item

Clears the selection of a pivot item

Clears the selection of all items in the collection

Returns all selected items in an array

The dataField in the data source used for this pivot field.

The text which will appear in the pivot designer when using this field.

Text alignment when the value of this field is displayed on the pivot rows or pivot columns.("left", "center", "right")

Name of style to use when displaying this field on the pivot rows or columns.

Name of style to use when displaying this field on the pivot rows or columns and column or row is selected.

The dataField in the data source used for this pivot filter field.

The text which will appear in the pivot designer when using this field.

Implementation of the filtering function used to skip/filter records from the data source. The function should return true if the record should be filtered, otherwise false.

Returns true if the pivot item is expanded.

Returns true if the pivot item is hidden.

Returns true if the pivot item is hidden.

Returns a reference to the parent item.

Returns a reference to the parent rows or columns hierarchy.

Returns a reference to the parent pivot grid instance.

Returns an array of all child pivot items.

Returns an array of all child pivot value items.

Gets the width of the pivot item

Gets the displayed width of the pivot item

Auto resizes the pivot item

Gets the height of the pivot item

Gets the displayed height of the pivot item

Sets the height of the pivot item

Expands the pivot item so all sub-items will be visible

Collapses the pivot item so all sub-items will be invisible

Gets or sets if the collection of pivot items is resizable.

Gets or sets if the collection of pivot items is sortable.

Gets or sets if expand/collapse buttons are visible.

Returns a reference to the parent pivot grid instance.

Returns an array of all child pivot items.

Returns an array of all child pivot value items.

Returns true if the pivot items collection is hidden.

Makes the pivot items collection visible

Hides the pivot items collection

Refreshes the content of the pivot items collection

Returns the depth of the collection

Auto resizes the pivot items collection.
autoResizeMode: "default", "fitAll", "fitItemContent"

Returns the sort item of the collection

Returns the sort order of the collection

Sorts the items collection

Removes the sort order of the collection

Selects a pivot item

Clears the selection of a pivot item

Clears the selection of all items in the collection

Returns all selected items in an array

Determines whether the pivot values will be displayed on rows or columns.

A list of data fields which will be used to build the pivot rows.

A list of data fields which will be used to build the pivot columns.

A list of data fields which will be used to build the pivot values.

A list of filters to apply on the source records while building the pivot table.

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
  
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} 
        source={this.state.source} autoResize={true} theme={'material'}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);

The dataField in the data source used for this pivot field.

The data aggregation function to use when calculating the cells values. You can either use the name of one of the built in functions like 'sum', 'count', 'min', 'max', 'product', 'average' or provide the implementation of your own function.

The text which will appear in the pivot designer when using this field.

Text alignment when the value of this field is displayed on the pivot rows or pivot columns.

Name of style to use when displaying this field on the pivot rows or columns.

Name of style to use when displaying this field on the pivot rows or columns and column or row is selected.

Name of style to use when displaying the cells of this pivot value field.

Name of style to use when displaying this cells this pivot value field when the cells are selected.

X coordinate

/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
 
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
 
class App extends React.PureComponent<{}, IPivotGridProps> {
  private myPivotGrid = React.createRef<JqxPivotGrid>(); 
 
  constructor(props: {}) {
    super(props);
 
    const createPivotDataSource = function () {
                // prepare sample data
                const data = new Array();
                const firstNames = [  'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
                const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
                const productNames = [  'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
                const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
                for (let i = 0; i < 50; i++) {
                    const row = {};
                    const productindex = Math.floor(Math.random() * productNames.length);
                    const price = parseFloat(priceValues[productindex]);
                    const 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
                const 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' }
                        ]
                };
                const dataAdapter = new jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                const pivotDataSource = new jqx.pivot(
                    dataAdapter,
                    {
                        customAggregationFunctions: {
                            'var': function (values) {
                                if (values.length <= 1)
                                    return 0;
                                // sample's mean
                                let mean = 0;
                                for (let i = 0; i < values.length; i++)
                                    mean += values[i];
                                mean /= values.length;
                                // calc squared sum
                                let ssum = 0;
                                for (let i = 0; i < values.length; i++)
                                    ssum += Math.pow(values[i] - mean, 2)
                                // calc the variance
                                const variance = ssum / values.length;
                                return variance;
                            }
                        },
                        pivotValuesOnRows: false,
                        rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname' }],
                        filters: [
                            {
                                dataField: 'productname',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            const source = createPivotDataSource();
  }
  
  public render() {
    return (
      <JqxPivotGrid ref={this.myPivotGrid} 
        source={this.state.source} autoResize={true}
      />
    );
  }
}
 
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);