Vue UI Components Documentation

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

<template>
  <JqxPivotGrid ref="myPivotGrid"
    :source="source" :autoResize="true"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    }
  }
</script>

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

<template>
  <JqxPivotGrid ref="myPivotGrid"
    :source="source" :autoResize="true" :localization="localization"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    data: function () {
      return {
        localization: {
          sortascendingstring: 'Sortiere aufsteigend',
          sortdescendingstring: 'Sortiere absteigend',
          sortremovestring: 'Entferne Sortierung'
        }
      }
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    }
  }
</script>

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

<template>
  <JqxPivotGrid ref="myPivotGrid"
    :source="source" :autoResize="true" :scrollBarsEnabled="false"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    }
  }
</script>

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

<template>
  <JqxPivotGrid ref="myPivotGrid"
    :source="source" :autoResize="true" :selectionEnabled="false"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    }
  }
</script>

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

<template>
  <JqxPivotGrid ref="myPivotGrid"
    :source="source" :autoResize="true" :multipleSelectionEnabled="false"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    }
  }
</script>

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

<template>
  <JqxPivotGrid ref="myPivotGrid"
    :source="source" :autoResize="true" :treeStyleRows="false"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    }
  }
</script>

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

<template>
  <JqxPivotGrid ref="myPivotGrid"
    :source="source" :autoResize="true"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    }
  }
</script>

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

<template>
  <JqxPivotGrid ref="myPivotGrid"
    :source="source" :autoResize="true" :itemsRenderer="itemsRenderer"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    },
    methods: {
      itemsRenderer: function (pivotItem) {
        const backgroundColor = pivotItem.isColumn ? 'rgba(187, 232, 227, 255)' : 'rgba(203, 254, 187, 255)';
                return '<div style="background: '
                    + backgroundColor
                    + '; width: calc(100% - 8px); height: calc(100% - 8px); padding: 4px;">'
                    + pivotItem.text
                    + '</div>';
      }
    }
  }
</script>

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

<template>
  <JqxPivotGrid ref="myPivotGrid"
    :source="source" :autoResize="true" :cellsRenderer="cellsRenderer"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    },
    methods: {
      cellsRenderer: function (pivotCell) {
        const backgroundColor = 'rgba(253, 254, 207, 255)';
                const cellText = pivotCell.value == 0 ? '' : pivotCell.formattedValue;
                return '<div style="background: ' + backgroundColor + '; width: calc(100%-8px); height: 100%; padding: 4px; margin: 0px;">' + cellText + '</div>';
      }
    }
  }
</script>

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.

<template>
  <JqxPivotGrid ref="myPivotGrid" @pivotitemexpanding="onPivotitemexpanding($event)"
    :source="source" :autoResize="true"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    },
    methods: {
      onPivotitemexpanding: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered after a pivot item is expanded.

Code examples

Bind to the pivotitemexpanded event of jqxPivotGrid.

<template>
  <JqxPivotGrid ref="myPivotGrid" @pivotitemexpanded="onPivotitemexpanded($event)"
    :source="source" :autoResize="true"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    },
    methods: {
      onPivotitemexpanded: function (event) {
        alert('do something...');
      }
    }
  }
</script>

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.

<template>
  <JqxPivotGrid ref="myPivotGrid" @pivotitemcollapsing="onPivotitemcollapsing($event)"
    :source="source" :autoResize="true"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    },
    methods: {
      onPivotitemcollapsing: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered after a pivot item is collapsed.

Code examples

Bind to the pivotitemcollapsed event of jqxPivotGrid.

<template>
  <JqxPivotGrid ref="myPivotGrid" @pivotitemcollapsed="onPivotitemcollapsed($event)"
    :source="source" :autoResize="true"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    },
    methods: {
      onPivotitemcollapsed: function (event) {
        alert('do something...');
      }
    }
  }
</script>

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.

<template>
  <JqxPivotGrid ref="myPivotGrid" @sortchanging="onSortchanging($event)"
    :source="source" :autoResize="true"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    },
    methods: {
      onSortchanging: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered after the sorting order has changed.

Code examples

Bind to the sortchanged event of jqxPivotGrid.

<template>
  <JqxPivotGrid ref="myPivotGrid" @sortchanged="onSortchanged($event)"
    :source="source" :autoResize="true"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    },
    methods: {
      onSortchanged: function (event) {
        alert('do something...');
      }
    }
  }
</script>

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.

<template>
  <JqxPivotGrid ref="myPivotGrid" @sortremoving="onSortremoving($event)"
    :source="source" :autoResize="true"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    },
    methods: {
      onSortremoving: function (event) {
        alert('do something...');
      }
    }
  }
</script>

This event is triggered after the sorting has been removed.

Code examples

Bind to the sortremoved event of jqxPivotGrid.

<template>
  <JqxPivotGrid ref="myPivotGrid" @sortremoved="onSortremoved($event)"
    :source="source" :autoResize="true"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    },
    methods: {
      onSortremoved: function (event) {
        alert('do something...');
      }
    }
  }
</script>

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

Code examples

Bind to the pivotitemselectionchanged event of jqxPivotGrid.

<template>
  <JqxPivotGrid ref="myPivotGrid" @pivotitemselectionchanged="onPivotitemselectionchanged($event)"
    :source="source" :autoResize="true"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    },
    methods: {
      onPivotitemselectionchanged: function (event) {
        alert('do something...');
      }
    }
  }
</script>

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.

<template>
  <JqxPivotGrid ref="myPivotGrid" @pivotcellmousedown="onPivotcellmousedown($event)"
    :source="source" :autoResize="true"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    },
    methods: {
      onPivotcellmousedown: function (event) {
        alert('do something...');
      }
    }
  }
</script>

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.

<template>
  <JqxPivotGrid ref="myPivotGrid" @pivotcellmouseup="onPivotcellmouseup($event)"
    :source="source" :autoResize="true"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    },
    methods: {
      onPivotcellmouseup: function (event) {
        alert('do something...');
      }
    }
  }
</script>

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.

<template>
  <JqxPivotGrid ref="myPivotGrid" @pivotcellclick="onPivotcellclick($event)"
    :source="source" :autoResize="true"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    },
    methods: {
      onPivotcellclick: function (event) {
        alert('do something...');
      }
    }
  }
</script>

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.

<template>
  <JqxPivotGrid ref="myPivotGrid" @pivotcelldblclick="onPivotcelldblclick($event)"
    :source="source" :autoResize="true"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    },
    methods: {
      onPivotcelldblclick: function (event) {
        alert('do something...');
      }
    }
  }
</script>

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.

<template>
  <JqxPivotGrid ref="myPivotGrid" @pivotitemmousedown="onPivotitemmousedown($event)"
    :source="source" :autoResize="true"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    },
    methods: {
      onPivotitemmousedown: function (event) {
        alert('do something...');
      }
    }
  }
</script>

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.

<template>
  <JqxPivotGrid ref="myPivotGrid" @pivotitemmouseup="onPivotitemmouseup($event)"
    :source="source" :autoResize="true"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    },
    methods: {
      onPivotitemmouseup: function (event) {
        alert('do something...');
      }
    }
  }
</script>

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.

<template>
  <JqxPivotGrid ref="myPivotGrid" @pivotitemclick="onPivotitemclick($event)"
    :source="source" :autoResize="true"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    },
    methods: {
      onPivotitemclick: function (event) {
        alert('do something...');
      }
    }
  }
</script>

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.

<template>
  <JqxPivotGrid ref="myPivotGrid" @pivotitemdblclick="onPivotitemdblclick($event)"
    :source="source" :autoResize="true"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    },
    methods: {
      onPivotitemdblclick: function (event) {
        alert('do something...');
      }
    }
  }
</script>

Returns the instance of the pivot grid component

<template>
  <JqxPivotGrid ref="myPivotGrid"
    :source="source" :autoResize="true"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    },
    mounted: function () {
      const value = this.$refs.myPivotGrid.getInstance();
    }
  }
</script>

Refreshes the content of the pivot grid component

<template>
  <JqxPivotGrid ref="myPivotGrid"
    :source="source" :autoResize="true"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    },
    mounted: function () {
      this.$refs.myPivotGrid.refresh();
    }
  }
</script>

Return the pivot rows of the pivot grid

<template>
  <JqxPivotGrid ref="myPivotGrid"
    :source="source" :autoResize="true"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    },
    mounted: function () {
      const value = this.$refs.myPivotGrid.getPivotRows();
    }
  }
</script>

Return the pivot columns of the pivot grid

<template>
  <JqxPivotGrid ref="myPivotGrid"
    :source="source" :autoResize="true"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    },
    mounted: function () {
      const value = this.$refs.myPivotGrid.getPivotColumns();
    }
  }
</script>

Return the pivot cells of the pivot grid

<template>
  <JqxPivotGrid ref="myPivotGrid"
    :source="source" :autoResize="true"
  />
</template>
 
<script>
  import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
 
  export default {
    components: {
      JqxPivotGrid
    },
    beforeCreate: function () {
      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;
            }
            this.source = createPivotDataSource();
    },
    mounted: function () {
      const value = this.$refs.myPivotGrid.getPivotCells();
    }
  }
</script>

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

<template>
  <table>
    <tr>
      <td>
        <JqxPivotDesigner style="width: 250px; height: 400px;"
          ref="pivotDesigner" :type="'pivotGrid'">
        </JqxPivotDesigner>
      </td>
      <td>
        <JqxPivotGrid style="width: 550px; height: 400px;"
          ref="pivotGrid"  :source="source"  :treeStyleRows="false"
          :autoResize="false" :multipleSelectionEnabled="true">
        </JqxPivotGrid>
      </td>
    </tr>
  </table>
</template>
<script>
    import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
    import JqxPivotDesigner from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotdesigner.vue';
    export default {
        components: {
            JqxPivotGrid,
            JqxPivotDesigner
        },
        beforeCreate: function () {
            const createPivotDataSource = function () {
                // prepare sample data
                let data = new Array();
                const firstNames =
                    [
                        'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi', 'Antoni', 'Mayumi', 'Ian', 'Peter', 'Lars', 'Petra', 'Martin', 'Sven', 'Elio', 'Beate', 'Cheryl', 'Michael', 'Guylene'
                    ];
                const lastNames =
                    [
                        'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase', 'Saavedra', 'Ohno', 'Devling', 'Wilson', 'Peterson', 'Winkler', 'Bein', 'Petersen', 'Rossi', 'Vileid', 'Saylor', 'Bjorn', 'Nodier'
                    ];
                const productNames =
                    [
                        'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte', 'White Chocolate Mocha', 'Cramel Latte', 'Caffe Americano', 'Cappuccino', 'Espresso Truffle', 'Espresso con Panna', 'Peppermint Mocha Twist'
                    ];
                const priceValues =
                    [
                        '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
                    ];
                for (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', text: 'First Name' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname', align: 'left' }],
                        filters: [
                            {
                                dataField: 'productname',
                                text: 'Product name',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'Sum', align: 'left', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'center' }, cellsClassName: 'myItemStyle', cellsClassNameSelected: 'myItemStyleSelected' },
                            { dataField: 'price', 'function': 'count', text: 'Count', className: 'myItemStyle', classNameSelected: 'myItemStyleSelected' }
                        ]
                    }
                );
                return pivotDataSource;
            };
            this.source = createPivotDataSource();
        },
        mounted: function () {
            const pivotGridInstance = this.$refs.pivotGrid.getInstance();
            this.$refs.pivotDesigner.target = pivotGridInstance;
            this.$refs.pivotDesigner.refresh();
        }
    }
</script>

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

<template>
  <table>
    <tr>
      <td>
        <JqxPivotDesigner style="width: 250px; height: 400px;"
          ref="pivotDesigner" :type="'pivotGrid'">
        </JqxPivotDesigner>
      </td>
      <td>
        <JqxPivotGrid style="width: 550px; height: 400px;"
          ref="pivotGrid"  :source="source"  :treeStyleRows="false"
          :autoResize="false" :multipleSelectionEnabled="true">
        </JqxPivotGrid>
      </td>
    </tr>
  </table>
</template>
<script>
    import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
    import JqxPivotDesigner from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotdesigner.vue';
    export default {
        components: {
            JqxPivotGrid,
            JqxPivotDesigner
        },
        beforeCreate: function () {
            const createPivotDataSource = function () {
                // prepare sample data
                let data = new Array();
                const firstNames =
                    [
                        'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi', 'Antoni', 'Mayumi', 'Ian', 'Peter', 'Lars', 'Petra', 'Martin', 'Sven', 'Elio', 'Beate', 'Cheryl', 'Michael', 'Guylene'
                    ];
                const lastNames =
                    [
                        'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase', 'Saavedra', 'Ohno', 'Devling', 'Wilson', 'Peterson', 'Winkler', 'Bein', 'Petersen', 'Rossi', 'Vileid', 'Saylor', 'Bjorn', 'Nodier'
                    ];
                const productNames =
                    [
                        'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte', 'White Chocolate Mocha', 'Cramel Latte', 'Caffe Americano', 'Cappuccino', 'Espresso Truffle', 'Espresso con Panna', 'Peppermint Mocha Twist'
                    ];
                const priceValues =
                    [
                        '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
                    ];
                for (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', text: 'First Name' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname', align: 'left' }],
                        filters: [
                            {
                                dataField: 'productname',
                                text: 'Product name',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'Sum', align: 'left', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'center' }, cellsClassName: 'myItemStyle', cellsClassNameSelected: 'myItemStyleSelected' },
                            { dataField: 'price', 'function': 'count', text: 'Count', className: 'myItemStyle', classNameSelected: 'myItemStyleSelected' }
                        ]
                    }
                );
                return pivotDataSource;
            };
            this.source = createPivotDataSource();
        },
        mounted: function () {
            const pivotGridInstance = this.$refs.pivotGrid.getInstance();
            this.$refs.pivotDesigner.target = pivotGridInstance;
            this.$refs.pivotDesigner.refresh();
        }
    }
</script>

Refreshes the content of the pivot designer component.

<template>
  <table>
    <tr>
      <td>
        <JqxPivotDesigner style="width: 250px; height: 400px;"
          ref="pivotDesigner" :type="'pivotGrid'">
        </JqxPivotDesigner>
      </td>
      <td>
        <JqxPivotGrid style="width: 550px; height: 400px;"
          ref="pivotGrid"  :source="source"  :treeStyleRows="false"
          :autoResize="false" :multipleSelectionEnabled="true">
        </JqxPivotGrid>
      </td>
    </tr>
  </table>
</template>
<script>
    import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
    import JqxPivotDesigner from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotdesigner.vue';
    export default {
        components: {
            JqxPivotGrid,
            JqxPivotDesigner
        },
        beforeCreate: function () {
            const createPivotDataSource = function () {
                // prepare sample data
                let data = new Array();
                const firstNames =
                    [
                        'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi', 'Antoni', 'Mayumi', 'Ian', 'Peter', 'Lars', 'Petra', 'Martin', 'Sven', 'Elio', 'Beate', 'Cheryl', 'Michael', 'Guylene'
                    ];
                const lastNames =
                    [
                        'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase', 'Saavedra', 'Ohno', 'Devling', 'Wilson', 'Peterson', 'Winkler', 'Bein', 'Petersen', 'Rossi', 'Vileid', 'Saylor', 'Bjorn', 'Nodier'
                    ];
                const productNames =
                    [
                        'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte', 'White Chocolate Mocha', 'Cramel Latte', 'Caffe Americano', 'Cappuccino', 'Espresso Truffle', 'Espresso con Panna', 'Peppermint Mocha Twist'
                    ];
                const priceValues =
                    [
                        '2.25', '1.5', '3.0', '3.3', '4.5', '3.6', '3.8', '2.5', '5.0', '1.75', '3.25', '4.0'
                    ];
                for (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', text: 'First Name' }, { dataField: 'lastname' }],
                        columns: [{ dataField: 'productname', align: 'left' }],
                        filters: [
                            {
                                dataField: 'productname',
                                text: 'Product name',
                                filterFunction: function (value) {
                                    if (value == 'Black Tea' || value == 'Green Tea')
                                        return true;
                                    return false;
                                }
                            }
                        ],
                        values: [
                            { dataField: 'price', 'function': 'sum', text: 'Sum', align: 'left', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'center' }, cellsClassName: 'myItemStyle', cellsClassNameSelected: 'myItemStyleSelected' },
                            { dataField: 'price', 'function': 'count', text: 'Count', className: 'myItemStyle', classNameSelected: 'myItemStyleSelected' }
                        ]
                    }
                );
                return pivotDataSource;
            };
            this.source = createPivotDataSource();
        },
        mounted: function () {
            const pivotGridInstance = this.$refs.pivotGrid.getInstance();
            this.$refs.pivotDesigner.target = pivotGridInstance;
            this.$refs.pivotDesigner.refresh();
        }
    }
</script>

The row of the pivot cell.

<template>
    <JqxPivotGrid ref="myPivotGrid"
                  :source="source" :autoResize="true" :cellsRenderer="myCellsRenderer" />
</template>
<script>
    import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
    export default {
        components: {
            JqxPivotGrid
        },
        beforeCreate: function () {
            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;
            }
            this.source = createPivotDataSource();
        },
        methods: {
            myCellsRenderer: function (pivotCell) {
                const colors = ['rgba(248, 105, 107, 255)', 'rgba(250,170,120,255)', 'rgba(255,230,130,255)', 'rgba(175,215,130,255)', 'rgba(100,190,120,255)'];
                const selectedColors = ['rgba(228, 85, 87, 255)', 'rgba(230,150,100,255)', 'rgba(235,210,110,255)', 'rgba(155,195,110,255)', 'rgba(80,170,100,255)'];
                const val = Math.min(pivotCell.value, 20);
                let backgroundColor = pivotCell.isSelected ? selectedColors[Math.round(val / 5)] : colors[Math.round(val / 5)];
                // Pivot Column
                if (pivotCell.pivotColumn.text !== 'sum')
                    backgroundColor = pivotCell.isSelected ? 'rgba(225, 225, 225, 255)' : 'rgba(255, 255, 255, 255)';
                if (pivotCell.isSelected)
                    backgroundColor
                const cellText = pivotCell.value == 0 ? '' : pivotCell.formattedValue;
                return '<div style="background: ' + backgroundColor + '; width: calc(100%-8px); height: 100%; padding: 4px; margin: 0px;">' + cellText + '</div>';
            }
        }
    }
</script>

The column of the pivot cell.

<template>
    <JqxPivotGrid ref="myPivotGrid"
                  :source="source" :autoResize="true" :cellsRenderer="myCellsRenderer" />
</template>
<script>
    import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
    export default {
        components: {
            JqxPivotGrid
        },
        beforeCreate: function () {
            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;
            }
            this.source = createPivotDataSource();
        },
        methods: {
            myCellsRenderer: function (pivotCell) {
                const colors = ['rgba(248, 105, 107, 255)', 'rgba(250,170,120,255)', 'rgba(255,230,130,255)', 'rgba(175,215,130,255)', 'rgba(100,190,120,255)'];
                const selectedColors = ['rgba(228, 85, 87, 255)', 'rgba(230,150,100,255)', 'rgba(235,210,110,255)', 'rgba(155,195,110,255)', 'rgba(80,170,100,255)'];
                const val = Math.min(pivotCell.value, 20);
                let backgroundColor = pivotCell.isSelected ? selectedColors[Math.round(val / 5)] : colors[Math.round(val / 5)];
                // Pivot Row
                if (pivotCell.pivotRow.text !== 'Nancy')
                    backgroundColor = pivotCell.isSelected ? 'rgba(225, 225, 225, 255)' : 'rgba(255, 255, 255, 255)';
                if (pivotCell.isSelected)
                    backgroundColor
                const cellText = pivotCell.value == 0 ? '' : pivotCell.formattedValue;
                return '<div style="background: ' + backgroundColor + '; width: calc(100%-8px); height: 100%; padding: 4px; margin: 0px;">' + cellText + '</div>';
            }
        }
    }
</script>

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

<template>
    <JqxPivotGrid ref="myPivotGrid"
                  :source="source" :autoResize="true" />
</template>
<script>
    import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
    export default {
        components: {
            JqxPivotGrid
        },
        beforeCreate: function () {
            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: [
                            {   // PREFIX
                                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;
            }
            this.source = createPivotDataSource();
        }
    }
</script>

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

<template>
    <JqxPivotGrid ref="myPivotGrid"
                  :source="source" :autoResize="true" />
</template>
<script>
    import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
    export default {
        components: {
            JqxPivotGrid
        },
        beforeCreate: function () {
            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: [
                            {   // SUFIX
                                dataField: 'price', 'function': 'sum', text: 'sum',
                                formatSettings: { sufix: '$', decimalPlaces: 2, align: 'right' }
                            },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            this.source = createPivotDataSource();
        }
    }
</script>

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

<template>
    <JqxPivotGrid ref="myPivotGrid"
                  :source="source" :autoResize="true" />
</template>
<script>
    import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
    export default {
        components: {
            JqxPivotGrid
        },
        beforeCreate: function () {
            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: [
                            {   // Decimal Separator
                                dataField: 'price', 'function': 'sum', text: 'sum',
                                formatSettings: { decimalSeparator: '...', decimalPlaces: 2, align: 'right' }
                            },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            this.source = createPivotDataSource();
        }
    }
</script>

Separator for the thousands in the cell's value.

<template>
    <JqxPivotGrid ref="myPivotGrid"
                  :source="source" :autoResize="true" />
</template>
<script>
    import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
    export default {
        components: {
            JqxPivotGrid
        },
        beforeCreate: function () {
            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 = ['200000.25', '10000.5', '30000.0', '30000.3', '40000.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: [
                            {   // Thousands  Separator
                                dataField: 'price', 'function': 'sum', text: 'sum',
                                formatSettings: { thousandsSeparator: '...', decimalPlaces: 2, align: 'right' }
                            },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            this.source = createPivotDataSource();
        }
    }
</script>

Number of decimal places for the cell's value.

<template>
    <JqxPivotGrid ref="myPivotGrid"
                  :source="source" :autoResize="true" />
</template>
<script>
    import JqxPivotGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxpivotgrid.vue';
    export default {
        components: {
            JqxPivotGrid
        },
        beforeCreate: function () {
            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: [
                            {   // Decimal Places
                                dataField: 'price', 'function': 'sum', text: 'sum',
                                formatSettings: {  decimalPlaces: 4, align: 'right' }
                            },
                            { dataField: 'price', 'function': 'count', text: 'count' },
                            {
                                dataField: 'quantity',
                                text: 'variance',
                                'function': 'var',
                                formatSettings: { decimalPlaces: 2 }
                            }
                        ]
                    }
                );
                return pivotDataSource;
            }
            this.source = createPivotDataSource();
        }
    }
</script>