The pivot table provides a built-in Field List similar to Microsoft Excel. It allows you to add or remove fields and also rearrange them between different axes, including column, row, value, and filter along with filter and sort options dynamically at runtime.
The field list can be displayed in three different formats to interact with pivot table. They are:
To display the field list icon in pivot table UI, you need to set the showFieldList property to true. In order to display the field list dialog, click the field list icon at the top left corner of the pivot table.
The field list icon will be displayed at the top right corner of the pivot table, when grouping bar is enabled.
To use field list, you need to inject the FieldList module in pivot table.
import { FieldList, IDataOptions, IDataSet, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
class App extends React.Component<{}, {}>{
public dataSourceSettings: IDataOptions = {
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
dataSource: pivotData as IDataSet[],
expandAll: false,
allowLabelFilter: true,
allowValueFilter: true,
filters: [],
drilledMembers: [{ name: 'Country', items: ['France'] }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
}
public pivotObj: PivotViewComponent;
render() {
return <PivotViewComponent ref={d => this.pivotObj = d!} id='PivotView' height={350} dataSourceSettings={this.dataSourceSettings} showFieldList={true}><Inject services={[FieldList]} /></PivotViewComponent>
}
};
ReactDOM.render(<App />, document.getElementById('pivotview'));import { FieldList, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
class App extends React.Component {
constructor() {
super(...arguments);
this.dataSourceSettings = {
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
dataSource: pivotData,
expandAll: false,
allowLabelFilter: true,
allowValueFilter: true,
filters: [],
drilledMembers: [{ name: 'Country', items: ['France'] }],
formatSettings: [{ name: 'Amount', format: 'C0' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
};
}
render() {
return <PivotViewComponent ref={d => this.pivotObj = d} id='PivotView' height={350} dataSourceSettings={this.dataSourceSettings} showFieldList={true}><Inject services={[FieldList]}/></PivotViewComponent>;
}
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));The field list can be rendered in a static position, anywhere in web page layout, like a separate component. To do so, you need to set renderMode property to Fixed.
To make field list interact with pivot table, you need to use the updateView and update methods for data source update in both field list and pivot table simultaneously.
import { CalculatedField, PivotFieldListComponent, IDataOptions, IDataSet, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
const SAMPLE_CSS = `
.e-pivotview {
width: 58%;
height: 100%;
float: left;
}
.e-pivotfieldlist {
width: 42%;
height: 100%;
float: right;
}
.e-pivotfieldlist .e-static {
width: 100% !important;
}`;
class App extends React.Component<{}, {}>{
public dataSourceSettings: IDataOptions = {
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
dataSource: pivotData as IDataSet[],
expandAll: false,
filters: [],
formatSettings: [{ name: 'Amount', format: 'C0' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
}
public pivotObj: PivotViewComponent;
public fieldlistObj: PivotFieldListComponent;
render() {
return <div className="control-section">
<style>{SAMPLE_CSS}</style>
<PivotViewComponent id='PivotViewFieldList' ref={d => this.pivotObj = d!} enginePopulated={this.afterPivotPopulate.bind(this)} width={'99%'} height={'530'} gridSettings={{columnWidth: 140}}></PivotViewComponent>
<PivotFieldListComponent id='PivotFieldList' ref={d => this.fieldlistObj = d!} enginePopulated={this.afterPopulate.bind(this)} dataSourceSettings={this.dataSourceSettings} renderMode={"Fixed"} allowCalculatedField={true}><Inject services={[CalculatedField]} /></PivotFieldListComponent></div>
}
afterPopulate(): void {
if (this.fieldlistObj && this.pivotObj) {
this.fieldlistObj.updateView(this.pivotObj);
}
}
afterPivotPopulate(): void {
if (this.fieldlistObj && this.pivotObj) {
this.fieldlistObj.update(this.pivotObj);
}
}
rendereComplete(): void {
this.fieldlistObj.updateView(this.pivotObj);
}
};
ReactDOM.render(<App />, document.getElementById('pivotview'));import { CalculatedField, PivotFieldListComponent, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
const SAMPLE_CSS = `
.e-pivotview {
width: 58%;
height: 100%;
float: left;
}
.e-pivotfieldlist {
width: 42%;
height: 100%;
float: right;
}
.e-pivotfieldlist .e-static {
width: 100% !important;
}`;
class App extends React.Component {
constructor() {
super(...arguments);
this.dataSourceSettings = {
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
dataSource: pivotData,
expandAll: false,
filters: [],
formatSettings: [{ name: 'Amount', format: 'C0' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
};
}
render() {
return <div className="control-section">
<style>{SAMPLE_CSS}</style>
<PivotViewComponent id='PivotViewFieldList' ref={d => this.pivotObj = d} enginePopulated={this.afterPivotPopulate.bind(this)} width={'99%'} height={'530'} gridSettings={{ columnWidth: 140 }}></PivotViewComponent>
<PivotFieldListComponent id='PivotFieldList' ref={d => this.fieldlistObj = d} enginePopulated={this.afterPopulate.bind(this)} dataSourceSettings={this.dataSourceSettings} renderMode={"Fixed"} allowCalculatedField={true}><Inject services={[CalculatedField]}/></PivotFieldListComponent></div>;
}
afterPopulate() {
if (this.fieldlistObj && this.pivotObj) {
this.fieldlistObj.updateView(this.pivotObj);
}
}
afterPivotPopulate() {
if (this.fieldlistObj && this.pivotObj) {
this.fieldlistObj.update(this.pivotObj);
}
}
rendereComplete() {
this.fieldlistObj.updateView(this.pivotObj);
}
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));Also, you can display the field list dialog independently through other means. For example, you can invoke the field list dialog on an external button click. To do so, set renderMode property to Popup and since on button click, field list dialog will be invoked.
- Meanwhile, you can display the field list dialog over specific target element within a web page using
targetproperty. By default, thetargetvalue is “null”, which by default refers thedocument.bodyelement.- To make field list interact with pivot table, you need to use the updateView and update methods for data source update in both field list and pivot table simultaneously.
The below sample code illustrates the field list dialog invoked on an external button click.
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { CalculatedField, PivotFieldListComponent, IDataOptions, IDataSet, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
class App extends React.Component<{}, {}>{
public dataSourceSettings: IDataOptions = {
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
dataSource: pivotData as IDataSet[],
expandAll: false,
filters: [],
formatSettings: [{ name: 'Amount', format: 'C0' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
}
public pivotObj: PivotViewComponent;
public fieldlistObj: PivotFieldListComponent;
render() {
return <div><div className="control-section">
<PivotViewComponent id='PivotView' ref={d => this.pivotObj = d!} enginePopulated={this.afterPivotPopulate.bind(this)} height={350} gridSettings={{columnWidth: 140}}></PivotViewComponent>
<PivotFieldListComponent id='PivotFieldList' ref={d => this.fieldlistObj = d!} enginePopulated={this.afterPopulate.bind(this)} dataSourceSettings={this.dataSourceSettings} target='#PivotFieldList' renderMode={"Popup"} allowCalculatedField={true}><Inject services={[CalculatedField]} /></PivotFieldListComponent></div>
<div className='col-lg-3 property-section'><ButtonComponent cssClass='e-primary' onClick={this.btnClick.bind(this)}>Field List</ButtonComponent></div></div>
}
btnClick(): void {
this.fieldlistObj.dialogRenderer.fieldListDialog.show();
}
afterPopulate(): void {
if (this.fieldlistObj && this.pivotObj) {
this.fieldlistObj.updateView(this.pivotObj);
}
}
afterPivotPopulate(): void {
if (this.fieldlistObj && this.pivotObj) {
this.fieldlistObj.update(this.pivotObj);
}
}
rendereComplete(): void {
this.fieldlistObj.updateView(this.pivotObj);
}
};
ReactDOM.render(<App />, document.getElementById('pivotview'));import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { CalculatedField, PivotFieldListComponent, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotData } from './datasource';
class App extends React.Component {
constructor() {
super(...arguments);
this.dataSourceSettings = {
columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
dataSource: pivotData,
expandAll: false,
filters: [],
formatSettings: [{ name: 'Amount', format: 'C0' }],
rows: [{ name: 'Country' }, { name: 'Products' }],
values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }]
};
}
render() {
return <div><div className="control-section">
<PivotViewComponent id='PivotView' ref={d => this.pivotObj = d} enginePopulated={this.afterPivotPopulate.bind(this)} height={350} gridSettings={{ columnWidth: 140 }}></PivotViewComponent>
<PivotFieldListComponent id='PivotFieldList' ref={d => this.fieldlistObj = d} enginePopulated={this.afterPopulate.bind(this)} dataSourceSettings={this.dataSourceSettings} target='#PivotFieldList' renderMode={"Popup"} allowCalculatedField={true}><Inject services={[CalculatedField]}/></PivotFieldListComponent></div>
<div className='col-lg-3 property-section'><ButtonComponent cssClass='e-primary' onClick={this.btnClick.bind(this)}>Field List</ButtonComponent></div></div>;
}
btnClick() {
this.fieldlistObj.dialogRenderer.fieldListDialog.show();
}
afterPopulate() {
if (this.fieldlistObj && this.pivotObj) {
this.fieldlistObj.updateView(this.pivotObj);
}
}
afterPivotPopulate() {
if (this.fieldlistObj && this.pivotObj) {
this.fieldlistObj.update(this.pivotObj);
}
}
rendereComplete() {
this.fieldlistObj.updateView(this.pivotObj);
}
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));