Angular

Search results

Row and Column in Angular Pivot Table component

08 Apr 2021 / 22 minutes to read

Width and Height

Allows end user to set the pivot table’s height and width by using height and width properties in pivot table respectively. The supported formats to set height and width properties are,

Pixel: For example - 100, 200, “100px”, “200px”.
Percentage: For example - “100%”, “200%“.
Auto: It is applicable for height property alone in-order to render the pivot table beyond its parent container height without vertical scrollbar. The parent container here would show its vertical scrollbar as soon as the component reaches beyond its dimension.

The pivot table will not be displayed less than 400px, since it’s the minimum width of the component.

Source

Preview

app.component.ts

app.module.ts

import { Component, OnInit } from '@angular/core';
import { IDataOptions } from '@syncfusion/ej2-angular-pivotview';
import { Pivot_Data } from './datasource.ts';

@Component({
  selector: 'app-container',
  // specifies the template string for the pivot table component
  template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings width=width></ejs-pivotview>`
})
export class AppComponent implements OnInit {
public width: string;
public dataSourceSettings: IDataOptions;

ngOnInit(): void {

    this.width = '100%';

    this.dataSourceSettings = {
        dataSource: Pivot_Data,
        expandAll: false,
        drilledMembers: [{ name: 'Country', items: ['France'] }],
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        formatSettings: [{ name: 'Amount', format: 'C0' }],
        filters: []
    };
}
}

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 { }

Row Height

Allows end user to set the height of each pivot table rows commonly using the rowHeight property in gridSettings.

By default, the rowHeight property is set as 36 pixels for desktop layout and 48 pixels for mobile layout. The height of the column headers alone may vary when grouping bar feature is enabled.

In the below code sample, the rowHeight property is set as 60 pixels.

Source

Preview

app.component.ts

app.module.ts

import { Component, OnInit } from '@angular/core';
import { IDataOptions } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { Pivot_Data } from './datasource.ts';

@Component({
  selector: 'app-container',
  // specifies the template string for the pivot table component
  template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings
  [gridSettings]='gridSettings' width=width></ejs-pivotview>`
})
export class AppComponent implements OnInit {
public width: string;
public dataSourceSettings: IDataOptions;
public gridSettings: GridSettings;

ngOnInit(): void {

    this.width = '100%';

    this.dataSourceSettings = {
        dataSource: Pivot_Data,
        expandAll: false,
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        formatSettings: [{ name: 'Amount', format: 'C0' }],
        filters: []
    };

    this.gridSettings = {
        rowHeight: 60
    } as GridSettings;
}
}

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 { }

Column Width

Allows end user to set the width of each pivot table columns commonly using the columnWidth property in gridSettings.

By default, the columnWidth property is set as 110 pixels to each columns except the first column. For first column, 250 pixels and 200 pixels are set respectively with and without grouping bar.

In the below example, the columnWidth property is set as 200 pixels.

Source

Preview

app.component.ts

app.module.ts

import { Component, OnInit } from '@angular/core';
import { IDataOptions } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { Pivot_Data } from './datasource.ts';

@Component({
  selector: 'app-container',
  // specifies the template string for the pivot table component
  template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings
  [gridSettings]='gridSettings' width=width></ejs-pivotview>`
})
export class AppComponent implements OnInit {
public width: string;
public dataSourceSettings: IDataOptions;
public gridSettings: GridSettings;

ngOnInit(): void {

    this.width = '100%';

    this.dataSourceSettings = {
        dataSource: Pivot_Data,
        expandAll: false,
        drilledMembers: [{ name: 'Country', items: ['France'] }],
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        formatSettings: [{ name: 'Amount', format: 'C0' }],
        filters: []
    };

    this.gridSettings = {
        columnWidth: 120
    } as GridSettings;
}
}

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 { }

Reorder

Allows end user to reorder a particular column header from one index to another index within the pivot table through drag-and-drop option. It can be enabled by setting the allowReordering property in gridSettings to true.

Source

Preview

app.component.ts

app.module.ts

import { Component, OnInit } from '@angular/core';
import { IDataOptions } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { Pivot_Data } from './datasource.ts';

@Component({
  selector: 'app-container',
  // specifies the template string for the pivot table component
  template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings
  [gridSettings]='gridSettings' width=width></ejs-pivotview>`
})
export class AppComponent implements OnInit {
public width: string;
public dataSourceSettings: IDataOptions;
public gridSettings: GridSettings;

ngOnInit(): void {

    this.width = '100%';

    this.dataSourceSettings = {
        dataSource: Pivot_Data,
        expandAll: false,
        drilledMembers: [{ name: 'Country', items: ['France'] }],
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        formatSettings: [{ name: 'Amount', format: 'C0' }],
        filters: []
    };

    this.gridSettings = {
        allowReordering: true
    } as GridSettings;
}
}

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 { }

Column Resizing

Allows end user to resize the columns by clicking and dragging the right edge of the column header. While dragging, the width of the respective column will be resized immediately. To enable column resizing option, set the allowResizing property in gridSettings to true.

By default, the column resizing option is enabled. In RTL mode, user can click and drag the left edge of the header cell to resize the column.

Source

Preview

app.component.ts

app.module.ts

import { Component, OnInit } from '@angular/core';
import { IDataOptions } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { Pivot_Data } from './datasource.ts';

@Component({
  selector: 'app-container',
  // specifies the template string for the pivot table component
  template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings
  [gridSettings]='gridSettings' width=width></ejs-pivotview>`
})
export class AppComponent implements OnInit {
public width: string;
public dataSourceSettings: IDataOptions;
public gridSettings: GridSettings;

ngOnInit(): void {

    this.width = '100%';

    this.dataSourceSettings = {
        dataSource: Pivot_Data,
        expandAll: false,
        drilledMembers: [{ name: 'Country', items: ['France'] }],
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        formatSettings: [{ name: 'Amount', format: 'C0' }],
        filters: []
    };

    this.gridSettings = {
        allowResizing: true
    } as GridSettings;
}
}

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 { }

Text Wrap

Allows end user to wrap the cell content to the next line when it exceeds the boundary of the cell width. To enable text wrap, set the allowTextWrap property in gridSettings to true.

Source

Preview

app.component.ts

app.module.ts

import { Component, OnInit } from '@angular/core';
import { IDataOptions } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { Pivot_Data } from './datasource.ts';

@Component({
  selector: 'app-container',
  // specifies the template string for the pivot table component
  template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings
  [gridSettings]='gridSettings' width=width></ejs-pivotview>`
})
export class AppComponent implements OnInit {
public width: string;
public dataSourceSettings: IDataOptions;
public gridSettings: GridSettings;

ngOnInit(): void {

    this.width = '100%';

    this.dataSourceSettings = {
        dataSource: Pivot_Data,
        expandAll: false,
        drilledMembers: [{ name: 'Country', items: ['France'] }],
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        formatSettings: [{ name: 'Amount', format: 'C0' }],
        filters: []
    };

    this.gridSettings = {
        allowTextWrap: true
    } as GridSettings;
}
}

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 { }

Grid Lines

Allows end user to display cell border for each cells using gridLines property in gridSettings.

Available mode of grid lines are:

Modes	Actions
Both	Displays both the horizontal and vertical grid lines.
None	No grid lines are displayed.
Horizontal	Displays the horizontal grid lines only.
Vertical	Displays the vertical grid lines only.
Default	Displays grid lines based on the theme.

By default, pivot table renders grid lines in Both mode.

Source

Preview

app.component.ts

app.module.ts

import { Component, OnInit } from '@angular/core';
import { IDataOptions } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { Pivot_Data } from './datasource.ts';

@Component({
  selector: 'app-container',
  // specifies the template string for the pivot table component
  template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings
  [gridSettings]='gridSettings' width=width></ejs-pivotview>`
})
export class AppComponent implements OnInit {
public width: string;
public dataSourceSettings: IDataOptions;
public gridSettings: GridSettings;

ngOnInit(): void {

    this.width = '100%';

    this.dataSourceSettings = {
        dataSource: Pivot_Data,
        expandAll: false,
        drilledMembers: [{ name: 'Country', items: ['France'] }],
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        formatSettings: [{ name: 'Amount', format: 'C0' }],
        filters: []
    };

    this.gridSettings = {
        gridLines: 'Vertical'
    } as GridSettings;
}
}

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 { }

Selection

Selection provides an option to highlight a row or a column or a cell. It can be done through simple mouse down or arrow keys. To enable selection in the pivot table, set the allowSelection property in gridSettings to true.

The pivot table supports two types of selection that can be set using type property in selectionSettings. The selection types are:

Single: It is set by default, and it only allows selection of a single row or a column or a cell.
Multiple: Allows you to select multiple rows or columns or cells. To perform multi-selection, press and hold “CTRL” key and click the desired rows or cells. To select range of rows or cells, press and hold the “SHIFT” key and click the rows or columns or cells.

Source

Preview

app.component.ts

app.module.ts

import { Component, OnInit } from '@angular/core';
import { IDataOptions } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { Pivot_Data } from './datasource.ts';

@Component({
  selector: 'app-container',
  // specifies the template string for the pivot table component
  template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings
  [gridSettings]='gridSettings' width=width></ejs-pivotview>`
})
export class AppComponent implements OnInit {
public width: string;
public dataSourceSettings: IDataOptions;
public gridSettings: GridSettings;

ngOnInit(): void {

    this.width = '100%';

    this.dataSourceSettings = {
        dataSource: Pivot_Data,
        expandAll: false,
        drilledMembers: [{ name: 'Country', items: ['France'] }],
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        formatSettings: [{ name: 'Amount', format: 'C0' }],
        filters: []
    };

    this.gridSettings = {
        allowSelection: true,
        selectionSettings: { type: 'Multiple' }
    } as GridSettings;
}
}

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 { }

Selection Mode

The pivot table supports four types of selection mode that can be set using mode in selectionSettings. The selection modes are:

Row: It is set by default, and allows user to select only rows.
Column: Allows user to select only columns.
Cell: Allows user to select only cells.
Both: Allows user to select rows and columns at the same time.

Source

Preview

app.component.ts

app.module.ts

import { Component, OnInit } from '@angular/core';
import { IDataOptions } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { Pivot_Data } from './datasource.ts';

@Component({
  selector: 'app-container',
  // specifies the template string for the pivot table component
  template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings
  [gridSettings]='gridSettings' width=width></ejs-pivotview>`
})
export class AppComponent implements OnInit {
public width: string;
public dataSourceSettings: IDataOptions;
public gridSettings: GridSettings;

ngOnInit(): void {

    this.width = '100%';

    this.dataSourceSettings = {
        dataSource: Pivot_Data,
        expandAll: false,
        drilledMembers: [{ name: 'Country', items: ['France'] }],
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        formatSettings: [{ name: 'Amount', format: 'C0' }],
        filters: []
    };

    this.gridSettings = {
        allowSelection: true,
        selectionSettings: { mode: 'Both' }
    } as GridSettings;
}
}

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 { }

Cell Selection Mode

The pivot table supports two types of cell selection mode that can be set using cellSelectionMode in selectionSettings. The cell selection modes are:

Flow: It is set by default. The range of cells are selected between the start index and end index that includes in-between cells of rows.
Box: Range of cells are selected from the start and end column indexes that includes in-between cells of rows within the range.

Source

Preview

app.component.ts

app.module.ts

import { Component, OnInit } from '@angular/core';
import { IDataOptions } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { Pivot_Data } from './datasource.ts';

@Component({
  selector: 'app-container',
  // specifies the template string for the pivot table component
  template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings
  [gridSettings]='gridSettings' width=width></ejs-pivotview>`
})
export class AppComponent implements OnInit {
public width: string;
public dataSourceSettings: IDataOptions;
public gridSettings: GridSettings;

ngOnInit(): void {

    this.width = '100%';

    this.dataSourceSettings = {
        dataSource: Pivot_Data,
        expandAll: false,
        drilledMembers: [{ name: 'Country', items: ['France'] }],
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        formatSettings: [{ name: 'Amount', format: 'C0' }],
        filters: []
    };

    this.gridSettings = {
        allowSelection: true,
        selectionSettings: { cellSelectionMode: 'Box', type: 'Multiple', mode: 'Cell' }
    } as GridSettings;
}
}

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 { }

Cell selection requires mode property in selectionSettings to be Cell or Both, and type property should be Multiple.

Changing background color of the selected cell

The background-color of the selected cell can be changed using built-in CSS names. To do so, please refer to the code sample below, which shows that the selected cells are changed to a green yellow color.

Source

Preview

app.component.ts

app.module.ts

app.component.css

import { Component, OnInit } from '@angular/core';
import { IDataOptions } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { Pivot_Data } from './datasource.ts';

@Component({
  selector: 'app-container',
  // specifies the template string for the pivot table component
  template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings
  [gridSettings]='gridSettings' width=width></ejs-pivotview>`,
  styleUrls: ['app/app.component.css'],
})
export class AppComponent implements OnInit {
public width: string;
public dataSourceSettings: IDataOptions;
public gridSettings: GridSettings;

ngOnInit(): void {

    this.width = '100%';

    this.dataSourceSettings = {
        dataSource: Pivot_Data,
        drilledMembers: [{ name: 'Country', items: ['France'] }],
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        formatSettings: [{ name: 'Amount', format: 'C0' }],
        filters: []
    };

    this.gridSettings = {
        allowSelection: true,
        selectionSettings: { cellSelectionMode: 'Box', type: 'Multiple', mode: 'Cell' }
    } as GridSettings;
}
}

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 { }

/* csslint ignore:start */

.e-pivotview .e-cellselectionbackground,
.e-pivotview .e-selectionbackground,
.e-pivotview .e-grid .e-rowsheader.e-selectionbackground,
.e-pivotview .e-grid .e-columnsheader.e-selectionbackground { 
    background-color: greenYellow !important; 
}
/* csslint ignore:end */

Event

CellSelected

The event cellSelected is triggered when cell selection gets completed. It provides selected cells information with its corresponding column and row headers. It has following parameters - selectedCellsInfo, currentCell and target. This event allows user to view selected cells information and user can pass those selected cells information to any external component for data binding.

Source

Preview

app.component.ts

app.module.ts

import { Component, OnInit } from '@angular/core';
import { IDataOptions, PivotCellSelectedEventArgs, GridSettings } from '@syncfusion/ej2-angular-pivotview';
import { Pivot_Data } from './datasource.ts';

@Component({
  selector: 'app-container',
  // specifies the template string for the pivot table component
  template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings width=width [gridSettings]=gridSettings (cellSelected)='cellSelected($event)'></ejs-pivotview>`
})
export class AppComponent implements OnInit {
public dataSourceSettings: IDataOptions;
public width: string;
public gridSettings: GridSettings;

ngOnInit(): void {
    this.width = '100%';

    this.dataSourceSettings = {
        dataSource: Pivot_Data,
        expandAll: false,
        drilledMembers: [{ name: 'Country', items: ['France'] }],
        formatSettings: [{ name: 'Amount', format: 'C2', useGrouping: false,
                minimumSignificantDigits: 1, maximumSignificantDigits: 3 }],
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        filters: []
    };

    this.gridSettings = {
        allowSelection: true,
        selectionSettings: { mode: 'Both', type: 'Multiple' }
    } as GridSettings;
},

cellSelected(args: PivotCellSelectedEventArgs){
    //args.selectedCellsInfo -> get selected cells information.
    //args.pivotValues -> get the pivot values of the pivot table.
},
}

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 { }

CellSelecting

The event cellSelecting triggers before cell gets selected gets completed. It provides selected cells information with its corresponding column and row headers. It has following parameters - currentCell, data and cancel.

Source

Preview

app.component.ts

app.module.ts

import { Component, OnInit } from '@angular/core';
import { IDataOptions, PivotCellSelectedEventArgs, GridSettings } from '@syncfusion/ej2-angular-pivotview';
import { Pivot_Data } from './datasource.ts';

@Component({
  selector: 'app-container',
  // specifies the template string for the pivot table component
  template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings width=width [gridSettings]=gridSettings (cellSelecting)='cellSelecting($event)'></ejs-pivotview>`
})
export class AppComponent implements OnInit {
public dataSourceSettings: IDataOptions;
public width: string;
public gridSettings: GridSettings;

ngOnInit(): void {
    this.width = '100%';

    this.dataSourceSettings = {
        dataSource: Pivot_Data,
        expandAll: false,
        drilledMembers: [{ name: 'Country', items: ['France'] }],
        formatSettings: [{ name: 'Amount', format: 'C2', useGrouping: false,
                minimumSignificantDigits: 1, maximumSignificantDigits: 3 }],
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        filters: []
    };

    this.gridSettings = {
        allowSelection: true,
        selectionSettings: { mode: 'Both', type: 'Multiple' }
    } as GridSettings;
},

cellSelecting(args: PivotCellSelectedEventArgs){
    //args.selectedCellsInfo -> get selected cells information.
    //args.pivotValues -> get the pivot values of the pivot table.
},
}

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 { }

Clip Mode

The clip mode provides options to display its overflow cell content in the pivot table. It can be configured using the clipMode property in gridSettings. The pivot table supports three types of clip modes which are:

Clip: Truncates the cell content when it overflows its area.
Ellipsis: Displays ellipsis when the cell content overflows its area.
EllipsisWithTooltip: Displays ellipsis when the cell content overflows its area, also it will display the tooltip while hover on ellipsis is applied.

By default, clipMode value is set to Ellipsis.

Source

Preview

app.component.ts

app.module.ts

import { Component, OnInit } from '@angular/core';
import { IDataOptions } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { Pivot_Data } from './datasource.ts';

@Component({
  selector: 'app-container',
  // specifies the template string for the pivot table component
  template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings
  [gridSettings]='gridSettings' width=width></ejs-pivotview>`
})
export class AppComponent implements OnInit {
public width: string;
public dataSourceSettings: IDataOptions;
public gridSettings: GridSettings;

ngOnInit(): void {

    this.width = '100%';

    this.dataSourceSettings = {
        dataSource: Pivot_Data,
        expandAll: false,
        drilledMembers: [{ name: 'Country', items: ['France'] }],
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        formatSettings: [{ name: 'Amount', format: 'C0' }],
        filters: []
    };

    this.gridSettings = {
        clipMode: 'Clip'
    } as GridSettings;
}
}

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 { }

Cell Template

User can customize the pivot table cell element by using the cellTemplate property in pivot table The cellTemplate property accepts either an HTML string or the element’s ID, which can be used to append additional HTML elements to showcase each cell with custom format.

In this demo, the revenue cost for each year is represented with trend icons.

Source

Preview

app.component.ts

app.module.ts

import { Component, ViewChild, OnInit } from '@angular/core';
import { IDataOptions, PivotView, IAxisSet, IFieldOptions, PivotViewComponent } from '@syncfusion/ej2-angular-pivotview';
import { renewableEnergy } from './datasource.ts';

@Component({
  selector: 'app-container',
  // specifies the template string for the pivot table component
  template: `<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings (dataBound)='trend()' width=width height=height [cellTemplate]=cellTemplate></ejs-pivotview>`
})

export class AppComponent implements OnInit {

public width: string;
public height: number;
public dataSourceSettings: IDataOptions;
public cellTemplate: string;

@ViewChild('pivotview', {static: false})
public pivotGridObj: PivotViewComponent;

trend(): void {
    let cTable: HTMLElement[] = [].slice.call(document.getElementsByClassName("e-table"));
    let colLen: number = this.pivotGridObj.pivotValues[3].length;
    let cLen: number = cTable[3].children[0].children.length;
    let rLen: number = cTable[3].children[1].children.length;
    let rowIndx: number;

    for (let k: number = 0; k < rLen; k++) {
        if (this.pivotGridObj.pivotValues[k] && this.pivotGridObj.pivotValues[k][0] !== undefined) {
            rowIndx = ((this.pivotGridObj.pivotValues[k][0]) as IAxisSet).rowIndex;
            break;
        }
    }
    let rowHeaders: HTMLElement[] = [].slice.call(cTable[2].children[1].querySelectorAll('td'));
    let rows: IFieldOptions[] = this.pivotGridObj.dataSourceSettings.rows as IFieldOptions[];
    if (rowHeaders.length > 1) {
        for (let i: number = 0, Cnt = rows; i < Cnt.length; i++) {
            let fields: any = {};
            let fieldHeaders: any = [];
            for (let j: number = 0, Lnt = rowHeaders; j < Lnt.length; j++) {
                let header: any = rowHeaders[j];
                if (header.className.indexOf('e-gtot') === -1 && header.className.indexOf('e-rowsheader') > -1 && header.getAttribute('fieldname') === rows[i].name) {
                    var headerName = rowHeaders[j].getAttribute('fieldname') + '_' + rowHeaders[j].textContent;
                    fields[rowHeaders[j].textContent] = j;
                    fieldHeaders.push(rowHeaders[j].textContent);
                }
            }
            if (i === 0) {
                for (let rnt: number = 0, Lnt = fieldHeaders; rnt < Lnt.length; rnt++) {
                    if (rnt !== 0) {
                        let row: number = fields[fieldHeaders[rnt]];
                        let prevRow: number = fields[fieldHeaders[rnt - 1]];
                        for (let j: number = 0, ci = 1; j < cLen && ci < colLen; j++ , ci++) {
                            let node: HTMLElement = cTable[3].children[1].children[row].childNodes[j] as HTMLElement;
                            let prevNode: HTMLElement = cTable[3].children[1].children[prevRow].childNodes[j] as HTMLElement;
                            let ri: any = undefined;
                            let prevRi: any = undefined;
                            if (node) {
                                ri = node.getAttribute("index");
                            }
                            if (prevNode) {
                                prevRi = prevNode.getAttribute("index");
                            }
                            if (ri && ri < [].slice.call(this.pivotGridObj.pivotValues).length) {
                                if ((this.pivotGridObj.pivotValues[prevRi][ci] as IAxisSet).value > (this.pivotGridObj.pivotValues[ri][ci]  as IAxisSet).value &&
                                 node.querySelector('.tempwrap')) {
                                    let trendElement: HTMLElement = node.querySelector('.tempwrap');
                                    trendElement.className = trendElement.className.replace('sb-icon-neutral', 'sb-icon-loss');
                                } else if ((this.pivotGridObj.pivotValues[prevRi][ci]  as IAxisSet).value < (this.pivotGridObj.pivotValues[ri][ci]  as IAxisSet).value &&
                                 node.querySelector('.tempwrap')) {
                                    let trendElement: HTMLElement = node.querySelector('.tempwrap');
                                    trendElement.className = trendElement.className.replace('sb-icon-neutral', 'sb-icon-profit');
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

ngOnInit(): void {

    this.width = "100%";
    this.height = 350;

    this.cellTemplate = '<span class="tempwrap sb-icon-neutral e-icons"></span>';

    this.dataSourceSettings = {
        dataSource: renewableEnergy,
        expandAll: true,
        enableSorting: true,
        drilledMembers: [{ name: 'Year', items: ['FY 2015', 'FY 2017', 'FY 2018'] }],
        formatSettings: [{ name: 'ProCost', format: 'C0' }],
        rows: [
            { name: 'Year', caption: 'Production Year' }
        ],
        columns: [
            { name: 'EnerType', caption: 'Energy Type' },
            { name: 'EneSource', caption: 'Energy Source' }
        ],
        values: [
            { name: 'ProCost', caption: 'Revenue Growth' }
        ],
        filters: []
    };
}
 }

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 { }

Events

QueryCellInfo

The event queryCellInfo triggers while rendering row and value cells in the pivot table. It allows the user to customize the element of the current cell. It has the following parameters:

cell - It holds the current cell info
data - It holds entire row data
column - It holds column information for the current cell
pivotview - It holds pivot instance

Source

Preview

app.component.ts

app.module.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataOptions } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { Pivot_Data } from './datasource.ts';

@Component({
  selector: 'app-container',
  // specifies the template string for the pivot table component
  template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings
  [gridSettings]='gridSettings' (enginePopulated)='enginePopulated($event)' width=width></ejs-pivotview>`
})
export class AppComponent implements OnInit {
public width: string;
public dataSourceSettings: IDataOptions;
public gridSettings: GridSettings;
public columnGrandTotalIndex;
public rowGrandTotalIndex;

@ViewChild('pivotview', { static: false })
public pivotGridObj: PivotView;

queryCell(args: any): void {
    (this.pivotGridObj.renderModule as any).rowCellBoundEvent(args);
    //triggers for every cell
}

enginePopulated(args: any): void {
   this.pivotGridObj.grid.queryCellInfo = this.queryCell.bind(this);
}

ngOnInit(): void {

    this.width = '100%';

    this.dataSourceSettings = {
        dataSource: Pivot_Data,
        expandAll: false,
        drilledMembers: [{ name: 'Country', items: ['France'] }],
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        formatSettings: [{ name: 'Amount', format: 'C0' }],
        filters: []
    };

    this.gridSettings = {
        columnWidth: 140,
    } as GridSettings;
}
}

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 { }

HeaderCellInfo

The event headerCellInfo triggers while rendering the header cells in the pivot table. It allows the user to customize the element of the current header cell. It has the following parameters:

node - It holds the current header cell info

Source

Preview

app.component.ts

app.module.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { IDataOptions } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { Pivot_Data } from './datasource.ts';

@Component({
  selector: 'app-container',
  // specifies the template string for the pivot table component
  template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings
  [gridSettings]='gridSettings' (enginePopulated)='enginePopulated($event)' width=width></ejs-pivotview>`
})
export class AppComponent implements OnInit {
public width: string;
public dataSourceSettings: IDataOptions;
public gridSettings: GridSettings;
public columnGrandTotalIndex;
public rowGrandTotalIndex;

@ViewChild('pivotview', { static: false })
public pivotGridObj: PivotView;

headerCell(args: any): void {
    (this.pivotGridObj.renderModule as any).columnCellBoundEvent(args);
    //triggers for every cell
},

enginePopulated(args: any): void {
   this.pivotGridObj.grid.headerCellInfo = this.headerCell.bind(this);
},

ngOnInit(): void {

    this.width = '100%';

    this.dataSourceSettings = {
        dataSource: Pivot_Data,
        expandAll: false,
        drilledMembers: [{ name: 'Country', items: ['France'] }],
        columns: [{ name: 'Year', caption: 'Production Year' }, { name: 'Quarter' }],
        values: [{ name: 'Sold', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
        rows: [{ name: 'Country' }, { name: 'Products' }],
        formatSettings: [{ name: 'Amount', format: 'C0' }],
        filters: []
    };

    this.gridSettings = {
        columnWidth: 140,
    } as GridSettings;
}
}

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 { }

CellClick

The event cellClick triggers while clicking a cell in the pivot table. For instance, using this event end-user can either add or remove styles, edit value and also perform any other DOM manipulations. It has the following parameters:

currentCell - It holds the current cell information.
data - It holds the clicked cell’s data like axis, formatted text, actual text, row header, column header and value informations.

Source

Preview

app.component.ts

app.module.ts

import { Component, OnInit } from '@angular/core';
import { IDataOptions, CellClickEventArgs } from '@syncfusion/ej2-angular-pivotview';
import { noData } from './datasource.ts';

@Component({
  selector: 'app-container',
  template: `<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings width=width height='350' (cellClick)='cellClick($event)'></ejs-pivotview>`
})
export class AppComponent implements OnInit {
public dataSourceSettings: IDataOptions;
public width: string;
public height: number;
cellClick(args: CellClickEventArgs) {
    //trigger for evey cell click in pivot table
}
ngOnInit(): void {
    this.width = '100%';

    this.dataSourceSettings = {
    dataSource: noData,
    expandAll: true,
    formatSettings: [{ name: 'Amount', format: 'C0' }],
    columns: [{ name: 'Date', showNoDataItems: true}],
    values: [{ name: 'Quantity', caption: 'Units Sold' }, { name: 'Amount', caption: 'Sold Amount' }],
    rows: [{ name: 'Country'}, { name: 'State'}],
    filters: []
    };
}
}

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 { }

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!