Search results

Hide empty headers in React Pivot Table component

If the raw data for a particular field is not defined, it will be shown as ‘Undefined’ in the pivot table headers. You can hide those headers by setting the showHeaderWhenEmpty property to false in the pivot table.

For example, if the raw data for the field ‘Country’ is defined as “United Kingdom” and “State” is not defined means, it will be shown as “United Kingdom >> Undefined” in the header section. Here, you can hide those ‘Undefined’ header using the showHeaderWhenEmpty property.

By default, this property is set as true.

Source
Preview
index.tsx
index.jsx
import { FieldList, IDataOptions, IDataSet, Inject, PivotViewComponent } from '@syncfusion/ej2-react-pivotview';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { pivotNullData } from './datasource';

class App extends React.Component<{}, {}>{

  public dataSourceSettings: IDataOptions = {
        dataSource: pivotNullData as IDataSet[],
        expandAll: false,
        rows: [{ name: 'Country' }, { name: 'State'}],
        columns: [{ name: 'Product', showNoDataItems: true }, { name: 'Date' }],
        values: [{ name: 'Amount' }, { name: 'Quantity' }],
        showHeaderWhenEmpty: false
  }
  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 { pivotNullData } from './datasource';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.dataSourceSettings = {
            dataSource: pivotNullData,
            expandAll: false,
            rows: [{ name: 'Country' }, { name: 'State' }],
            columns: [{ name: 'Product', showNoDataItems: true }, { name: 'Date' }],
            values: [{ name: 'Amount' }, { name: 'Quantity' }],
            showHeaderWhenEmpty: false
        };
    }
    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'));