Hide empty headers in Angular Pivotview component
27 Sep 20233 minutes to read
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.
import { Component } from '@angular/core';
import { IDataOptions, IDataSet, PivotView, FieldListService } from '@syncfusion/ej2-angular-pivotview';
import { pivotNullData } from './datasource';
@Component({
selector: 'app-container',
providers: [FieldListService],
// specifies the template string for the pivot table component
template: `<div style="height: 480px;"><ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings showFieldList='true' width=width></ejs-pivotview></div>`
})
export class AppComponent {
public width?: string;
public dataSourceSettings?: IDataOptions;
ngOnInit(): void {
this.width = '100%';
this.dataSourceSettings = {
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
};
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview';
import { AppComponent } from './app.component';
/**
* Module
*/
@NgModule({
imports: [
BrowserModule,
PivotViewAllModule,
PivotFieldListAllModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';
import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);