| Name | Type | Default |
|---|---|---|
| source | any | null |
|
Gets or sets pivot source adapter used to supply data to the pivot grid.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid}
source={this.state.source} autoResize={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| localization | any | null |
|
Gets or sets the localization object used to localize the text elements of the pivot grid.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid}
source={this.state.source} autoResize={true} localization={this.state.localization}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| scrollBarsEnabled | boolean | true |
|
Gets or sets whether the scrollbars of the pivot grid are enabled or disabled.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid}
source={this.state.source} autoResize={true} scrollBarsEnabled={false}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| selectionEnabled | boolean | true |
|
Gets or sets whether selection in the pivot grid is enabled or disabled.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid}
source={this.state.source} autoResize={true} selectionEnabled={false}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| multipleSelectionEnabled | boolean | true |
|
Gets or sets whether the multiple selection in the pivot grid is enabled or disabled.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid}
source={this.state.source} autoResize={true} multipleSelectionEnabled={false}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| treeStyleRows | boolean | true |
|
Gets or sets the rows of the pivot grid are displayed as a tree structure or using classic OLAP style.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid}
source={this.state.source} autoResize={true} treeStyleRows={false}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| autoResize | boolean | false |
|
Gets or sets if the size of pivot grid adjusts automatically to display the entire content.
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid}
source={this.state.source} autoResize={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| itemsRenderer | (pivotItem: PivotGridItemsRenderer['pivotItem']) => string | null |
|
Interface PivotGridItemsRenderer {
Custom rendering function used to render the pivot rows and columns. The function should return a string which is valid HTML.
pivotItem?: any; } /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid}
source={this.state.source} autoResize={true} itemsRenderer={this.state.itemsRenderer}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| cellsRenderer | (pivotCell: PivotGridCellsRenderer['pivotCell']) => string | null |
|
Interface PivotGridCellsRenderer {
Custom rendering function used to render the pivot cells. The function should return a string which is valid HTML.
pivotCell?: any; } /* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid}
source={this.state.source} autoResize={true} cellsRenderer={this.state.cellsRenderer}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
Events |
||
| pivotitemexpanding | Event | |
|
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
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid} onPivotitemexpanding={this.onPivotitemexpanding}
source={this.state.source} autoResize={true}
/>
);
}
private onPivotitemexpanding(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| pivotitemexpanded | Event | |
|
This event is triggered after a pivot item is expanded.
Code examples
Bind to the
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid} onPivotitemexpanded={this.onPivotitemexpanded}
source={this.state.source} autoResize={true}
/>
);
}
private onPivotitemexpanded(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| pivotitemcollapsing | Event | |
|
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
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid} onPivotitemcollapsing={this.onPivotitemcollapsing}
source={this.state.source} autoResize={true}
/>
);
}
private onPivotitemcollapsing(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| pivotitemcollapsed | Event | |
|
This event is triggered after a pivot item is collapsed.
Code examples
Bind to the
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid} onPivotitemcollapsed={this.onPivotitemcollapsed}
source={this.state.source} autoResize={true}
/>
);
}
private onPivotitemcollapsed(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| sortchanging | Event | |
|
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
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid} onSortchanging={this.onSortchanging}
source={this.state.source} autoResize={true}
/>
);
}
private onSortchanging(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| sortchanged | Event | |
|
This event is triggered after the sorting order has changed.
Code examples
Bind to the
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid} onSortchanged={this.onSortchanged}
source={this.state.source} autoResize={true}
/>
);
}
private onSortchanged(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| sortremoving | Event | |
|
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
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid} onSortremoving={this.onSortremoving}
source={this.state.source} autoResize={true}
/>
);
}
private onSortremoving(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| sortremoved | Event | |
|
This event is triggered after the sorting has been removed.
Code examples
Bind to the
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid} onSortremoved={this.onSortremoved}
source={this.state.source} autoResize={true}
/>
);
}
private onSortremoved(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| pivotitemselectionchanged | Event | |
|
This event is triggered after the selection of a pivot item has changed.
Code examples
Bind to the
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid} onPivotitemselectionchanged={this.onPivotitemselectionchanged}
source={this.state.source} autoResize={true}
/>
);
}
private onPivotitemselectionchanged(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| pivotcellmousedown | Event | |
|
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
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid} onPivotcellmousedown={this.onPivotcellmousedown}
source={this.state.source} autoResize={true}
/>
);
}
private onPivotcellmousedown(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| pivotcellmouseup | Event | |
|
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
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid} onPivotcellmouseup={this.onPivotcellmouseup}
source={this.state.source} autoResize={true}
/>
);
}
private onPivotcellmouseup(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| pivotcellclick | Event | |
|
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
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid} onPivotcellclick={this.onPivotcellclick}
source={this.state.source} autoResize={true}
/>
);
}
private onPivotcellclick(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| pivotcelldblclick | Event | |
|
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
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid} onPivotcelldblclick={this.onPivotcelldblclick}
source={this.state.source} autoResize={true}
/>
);
}
private onPivotcelldblclick(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| pivotitemmousedown | Event | |
|
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
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid} onPivotitemmousedown={this.onPivotitemmousedown}
source={this.state.source} autoResize={true}
/>
);
}
private onPivotitemmousedown(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| pivotitemmouseup | Event | |
|
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
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid} onPivotitemmouseup={this.onPivotitemmouseup}
source={this.state.source} autoResize={true}
/>
);
}
private onPivotitemmouseup(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| pivotitemclick | Event | |
|
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
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid} onPivotitemclick={this.onPivotitemclick}
source={this.state.source} autoResize={true}
/>
);
}
private onPivotitemclick(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| pivotitemdblclick | Event | |
|
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
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid} onPivotitemdblclick={this.onPivotitemdblclick}
source={this.state.source} autoResize={true}
/>
);
}
private onPivotitemdblclick(e: Event): void {
alert('do something...');
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
Methods |
||
| Name | Arguments | Return Type |
| getInstance | ||
|
Returns the instance of the pivot grid component
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public componentDidMount(): void {
this.myPivotGrid.current!.getInstance();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid}
source={this.state.source} autoResize={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| refresh | ||
|
Refreshes the content of the pivot grid component
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public componentDidMount(): void {
this.myPivotGrid.current!.refresh();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid}
source={this.state.source} autoResize={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| getPivotRows | ||
|
Return the pivot rows of the pivot grid
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public componentDidMount(): void {
this.myPivotGrid.current!.getPivotRows();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid}
source={this.state.source} autoResize={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| getPivotColumns | ||
|
Return the pivot columns of the pivot grid
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public componentDidMount(): void {
this.myPivotGrid.current!.getPivotColumns();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid}
source={this.state.source} autoResize={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| getPivotCells | ||
|
Return the pivot cells of the pivot grid
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public componentDidMount(): void {
this.myPivotGrid.current!.getPivotCells();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid}
source={this.state.source} autoResize={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| Name | Type | Default |
|---|---|---|
| type | string | pivotGrid |
|
Gets or sets the type of the pivot designer - pivotGrid or pivotChart.
|
||
| target | any | null |
|
Gets or sets the instance of the widget component controlled by the pivot designer component.
|
||
Methods |
||
| Name | Arguments | Return Type |
| refresh | ||
|
Refreshes the content of the pivot designer component.
|
||
| Name | Type | Default |
|---|---|---|
| pivotRow | PivotGridItem | null |
|
The row of the pivot cell.
|
||
| pivotColumn | PivotGridItem | null |
|
The column of the pivot cell.
|
||
| Name | Type | Default |
|---|---|---|
| prefix | string | null |
|
Optional text that appears at the start of the formatted string.
|
||
| sufix | string | null |
|
Optional text that appears at the end of the formatted string.
|
||
| decimalSeparator | string | . |
|
Separator for the decimal point in the cell's value.
|
||
| thousandsSeparator | string | , |
|
Separator for the thousands in the cell's value.
|
||
| decimalPlaces | number | 2 |
|
Number of decimal places for the cell's value.
|
||
| negativeWithBrackets | boolean | false |
|
Determines if negative numbers will be displayed in brackets () or with a negative sign - .
|
||
| Name | Type | Default |
|---|---|---|
Methods |
||
| Name | Arguments | Return Type |
| hitTest | point | |
|
Returns the pivot cell at the corresponding position if exists
|
||
| clear | ||
|
Clears all pivot cells
|
||
| setCellValue | pivotRow, pivotColumn, value | |
|
Sets the value of a pivot cell
|
||
| getCellValue | pivotRow, pivotColumn | |
|
Gets the value of a pivot cell
|
||
| drillThroughCell | pivotRow, pivotColumn | |
|
Drills through a pivot cells and returns the respective source data records
|
||
| selectCell | pivotRow, pivotColumn | |
|
Selects a pivot cell
|
||
| unselectCell | pivotRow, pivotColumn | |
|
Unselects a pivot cell
|
||
| clearSelection | ||
|
Clears the selection of all selected pivot cells
|
||
| isCellSelected | pivotRow, pivotColumn | |
|
Checks if a pivot cell is selected
|
||
| getSelectedCellsCount | ||
|
Returns the number of selected cells
|
||
| getSelectedCells | ||
|
Returns an array of all selected cells
|
||
| getNextCell | pivotCell, position | |
|
Returns the cell left, right, above or below a specific pivot cell
|
||
| Name | Type | Default |
|---|---|---|
| resizable | boolean | true |
|
Gets or sets if the collection of pivot items is resizable.
|
||
| sortable | boolean | true |
|
Gets or sets if the collection of pivot items is sortable.
|
||
| showExpandCollapseButtons | boolean | true |
|
Gets or sets if expand/collapse buttons are visible.
|
||
| parentPivotGrid | object | null |
|
Returns a reference to the parent pivot grid instance.
|
||
| items | Array<PivotGridItem> | [] |
|
Returns an array of all child pivot items.
|
||
| valueItems | Array<PivotGridItem> | [] |
|
Returns an array of all child pivot value items.
|
||
| isHidden | boolean | false |
|
Returns true if the pivot items collection is hidden.
|
||
Methods |
||
| Name | Arguments | Return Type |
| show | ||
|
Makes the pivot items collection visible
|
||
| hide | ||
|
Hides the pivot items collection
|
||
| refresh | ||
|
Refreshes the content of the pivot items collection
|
||
| getHierarchyDepth | ||
|
Returns the depth of the collection
|
||
| autoResize | autoResizeMode | |
|
Auto resizes the pivot items collection.
autoResizeMode: "default", "fitAll", "fitItemContent" |
||
| getSortItem | ||
|
Returns the sort item of the collection
|
||
| getSortOrder | ||
|
Returns the sort order of the collection
|
||
| sortBy | pivotItem, order | |
|
Sorts the items collection
|
||
| removeSort | ||
|
Removes the sort order of the collection
|
||
| selectItem | pivotItem | |
|
Selects a pivot item
|
||
| unselectItem | pivotItem | |
|
Clears the selection of a pivot item
|
||
| clearSelection | ||
|
Clears the selection of all items in the collection
|
||
| getSelectedItems | ||
|
Returns all selected items in an array
|
||
| Name | Type | Default |
|---|---|---|
| dataField | string | null |
|
The dataField in the data source used for this pivot field.
|
||
| text | string | null |
|
The text which will appear in the pivot designer when using this field.
|
||
| align | string | null |
|
Text alignment when the value of this field is displayed on the pivot rows or pivot columns.("left", "center", "right")
|
||
| className | string | null |
|
Name of style to use when displaying this field on the pivot rows or columns.
|
||
| classNameSelected | string | null |
|
Name of style to use when displaying this field on the pivot rows or columns and column or row is selected.
|
||
| Name | Type | Default |
|---|---|---|
| dataField | string | null |
|
The dataField in the data source used for this pivot filter field.
|
||
| text | string | null |
|
The text which will appear in the pivot designer when using this field.
|
||
| filterFunction | (value: any) => boolean | null |
|
Implementation of the filtering function used to skip/filter records from the data source. The function should return true if the record should be filtered, otherwise false.
|
||
| Name | Type | Default |
|---|---|---|
| isExpanded | boolean | false |
|
Returns true if the pivot item is expanded.
|
||
| isHidden | boolean | false |
|
Returns true if the pivot item is hidden.
|
||
| isSelected | boolean | false |
|
Returns true if the pivot item is hidden.
|
||
| parentItem | PivotGridItem | null |
|
Returns a reference to the parent item.
|
||
| hierarchy | any | null |
|
Returns a reference to the parent rows or columns hierarchy.
|
||
| parentPivotGrid | object | null |
|
Returns a reference to the parent pivot grid instance.
|
||
| items | Array<PivotGridItem> | [] |
|
Returns an array of all child pivot items.
|
||
| valueItems | Array<PivotGridItem> | [] |
|
Returns an array of all child pivot value items.
|
||
Methods |
||
| Name | Arguments | Return Type |
| getWidth | ||
|
Gets the width of the pivot item
|
||
| getDisplayWidth | ||
|
Gets the displayed width of the pivot item
|
||
| autoResize | ||
|
Auto resizes the pivot item
|
||
| getHeight | ||
|
Gets the height of the pivot item
|
||
| getDisplayHeight | ||
|
Gets the displayed height of the pivot item
|
||
| setHeight | height | |
|
Sets the height of the pivot item
|
||
| expand | ||
|
Expands the pivot item so all sub-items will be visible
|
||
| collapse | ||
|
Collapses the pivot item so all sub-items will be invisible
|
||
| Name | Type | Default |
|---|---|---|
| resizable | boolean | true |
|
Gets or sets if the collection of pivot items is resizable.
|
||
| sortable | boolean | true |
|
Gets or sets if the collection of pivot items is sortable.
|
||
| showExpandCollapseButtons | boolean | true |
|
Gets or sets if expand/collapse buttons are visible.
|
||
| parentPivotGrid | object | null |
|
Returns a reference to the parent pivot grid instance.
|
||
| items | Array<PivotGridItem> | [] |
|
Returns an array of all child pivot items.
|
||
| valueItems | Array<PivotGridItem> | [] |
|
Returns an array of all child pivot value items.
|
||
| isHidden | boolean | false |
|
Returns true if the pivot items collection is hidden.
|
||
Methods |
||
| Name | Arguments | Return Type |
| show | ||
|
Makes the pivot items collection visible
|
||
| hide | ||
|
Hides the pivot items collection
|
||
| refresh | ||
|
Refreshes the content of the pivot items collection
|
||
| getHierarchyDepth | ||
|
Returns the depth of the collection
|
||
| autoResize | autoResizeMode | |
|
Auto resizes the pivot items collection.
autoResizeMode: "default", "fitAll", "fitItemContent" |
||
| getSortItem | ||
|
Returns the sort item of the collection
|
||
| getSortOrder | ||
|
Returns the sort order of the collection
|
||
| sortBy | pivotItem, sortOrder | |
|
Sorts the items collection
|
||
| removeSort | ||
|
Removes the sort order of the collection
|
||
| selectItem | pivotItem | |
|
Selects a pivot item
|
||
| unselectItem | pivotItem | |
|
Clears the selection of a pivot item
|
||
| clearSelection | ||
|
Clears the selection of all items in the collection
|
||
| getSelectedItems | ||
|
Returns all selected items in an array
|
||
| Name | Type | Default |
|---|---|---|
| pivotValuesOnRows | boolean | false |
|
Determines whether the pivot values will be displayed on rows or columns.
|
||
| rows | Array<PivotGridField> | [] |
|
A list of data fields which will be used to build the pivot rows.
|
||
| columns | Array<PivotGridField> | [] |
|
A list of data fields which will be used to build the pivot columns.
|
||
| values | Array<PivotGridValueField> | [] |
|
A list of data fields which will be used to build the pivot values.
|
||
| filters | Array<PivotGridFilterField> | [] |
|
A list of filters to apply on the source records while building the pivot table.
|
||
| theme | string | '' |
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid}
source={this.state.source} autoResize={true} theme={'material'}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| Name | Type | Default |
|---|---|---|
| dataField | string | null |
|
The dataField in the data source used for this pivot field.
|
||
| function | any | null |
|
The data aggregation function to use when calculating the cells values. You can either use the name of one of the built in functions like 'sum', 'count', 'min', 'max', 'product', 'average' or provide the implementation of your own function.
|
||
| text | string | null |
|
The text which will appear in the pivot designer when using this field.
|
||
| align | string | null |
|
Text alignment when the value of this field is displayed on the pivot rows or pivot columns.
|
||
| className | string | null |
|
Name of style to use when displaying this field on the pivot rows or columns.
|
||
| classNameSelected | string | null |
|
Name of style to use when displaying this field on the pivot rows or columns and column or row is selected.
|
||
| cellsClassName | string | null |
|
Name of style to use when displaying the cells of this pivot value field.
|
||
| cellsClassNameSelected | string | null |
|
Name of style to use when displaying this cells this pivot value field when the cells are selected.
|
||
| formatSettings | PivotGridCellFormatting | {} |
|
|
||
| Name | Type | Default |
|---|---|---|
| x | number | null |
|
X coordinate
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid}
source={this.state.source} autoResize={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||
| y | number | null |
|
Y coordinate
/* tslint:disable */
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import 'jqwidgets-scripts/jqwidgets/styles/jqx.base.css';
import JqxPivotGrid, { IPivotGridProps, jqx } from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpivotgrid';
class App extends React.PureComponent<{}, IPivotGridProps> {
private myPivotGrid = React.createRef<JqxPivotGrid>();
constructor(props: {}) {
super(props);
const createPivotDataSource = function () {
// prepare sample data
const data = new Array();
const firstNames = [ 'Andrew', 'Nancy', 'Shelley', 'Regina', 'Yoshi' ];
const lastNames = [ 'Fuller', 'Davolio', 'Burke', 'Murphy', 'Nagase' ];
const productNames = [ 'Black Tea', 'Green Tea', 'Caffe Espresso', 'Doubleshot Espresso', 'Caffe Latte' ];
const priceValues = ['2.25', '1.5', '3.0', '3.3', '4.5'];
for (let i = 0; i < 50; i++) {
const row = {};
const productindex = Math.floor(Math.random() * productNames.length);
const price = parseFloat(priceValues[productindex]);
const quantity = 1 + Math.round(Math.random() * 10);
row['firstname'] = firstNames[Math.floor(Math.random() * firstNames.length)];
row['lastname'] = lastNames[Math.floor(Math.random() * lastNames.length)];
row['productname'] = productNames[productindex];
row['price'] = price;
row['quantity'] = quantity;
row['total'] = price * quantity;
data[i] = row;
}
// create a data source and data adapter
const source =
{
localdata: data,
datatype: 'array',
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
const dataAdapter = new jqx.dataAdapter(source);
dataAdapter.dataBind();
// create a pivot data source from the dataAdapter
const pivotDataSource = new jqx.pivot(
dataAdapter,
{
customAggregationFunctions: {
'var': function (values) {
if (values.length <= 1)
return 0;
// sample's mean
let mean = 0;
for (let i = 0; i < values.length; i++)
mean += values[i];
mean /= values.length;
// calc squared sum
let ssum = 0;
for (let i = 0; i < values.length; i++)
ssum += Math.pow(values[i] - mean, 2)
// calc the variance
const variance = ssum / values.length;
return variance;
}
},
pivotValuesOnRows: false,
rows: [{ dataField: 'firstname' }, { dataField: 'lastname' }],
columns: [{ dataField: 'productname' }],
filters: [
{
dataField: 'productname',
filterFunction: function (value) {
if (value == 'Black Tea' || value == 'Green Tea')
return true;
return false;
}
}
],
values: [
{ dataField: 'price', 'function': 'sum', text: 'sum', formatSettings: { prefix: '$', decimalPlaces: 2, align: 'right' } },
{ dataField: 'price', 'function': 'count', text: 'count' },
{
dataField: 'quantity',
text: 'variance',
'function': 'var',
formatSettings: { decimalPlaces: 2 }
}
]
}
);
return pivotDataSource;
}
const source = createPivotDataSource();
}
public render() {
return (
<JqxPivotGrid ref={this.myPivotGrid}
source={this.state.source} autoResize={true}
/>
);
}
}
ReactDOM.render(<App />, document.querySelector('#app') as HTMLElement);
|
||