Show field list when pivot table is empty in React Pivot Table component

24 May 2022 / 1 minute to read

When there are no fields in a pivot table’s row, column, value, and filter axes, a field list can still be displayed. To do so, use the dataBound event and call the onShowFieldList method as shown below.

Source

Preview

index.jsx

index.tsx

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 = {
            dataSource: pivotData,
        };
    }
    render() {
        return <PivotViewComponent ref={d => this.pivotObj = d} id='PivotView' height={350} dataSourceSettings={this.dataSourceSettings} dataBound={this.dataBound.bind(this)} showFieldList={true}><Inject services={[FieldList]}/></PivotViewComponent>;
    }
    dataBound() {
        if (this.pivotObj && this.pivotObj.dataSourceSettings.values.length === 0) {
            this.pivotObj.pivotFieldListModule.dialogRenderer.onShowFieldList();
        }
    }
}
;
ReactDOM.render(<App />, document.getElementById('pivotview'));

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 = {
    dataSource: pivotData as IDataSet[],
  }
  public pivotObj: PivotViewComponent;
  render() {
    return <PivotViewComponent  ref={d => this.pivotObj = d!} id='PivotView' height={350} dataSourceSettings={this.dataSourceSettings} dataBound={this.dataBound.bind(this)} showFieldList={true}><Inject services={[FieldList]} /></PivotViewComponent>
  }

  dataBound(): void {
    if (this.pivotObj && this.pivotObj.dataSourceSettings.values.length === 0) {
      (this.pivotObj.pivotFieldListModule.dialogRenderer as any).onShowFieldList();
    }
  }
};

ReactDOM.render(<App />, document.getElementById('pivotview'));