Classic Layout in Angular Pivot Table component

15 Dec 20246 minutes to read

NOTE

The classic layout supports only relational data sources and operates exclusively with client-side engine.

The classic layout in the Syncfusion Pivot Table offers a structured, tabular presentation of data, improving both readability and usability. In this layout, fields in the row axis are displayed side by side in separate columns, making data interpretation and analysis easier. By default, grand totals appear at the end of all rows, while subtotals are placed in a separate row beneath each group. All other features of the pivot table, such as filtering, sorting, drag-and-drop, expand/collapse functionality, and more, remain the same as in the compact layout, which serves as the default hierarchical format of the pivot table.

To enable the classic layout, set the layout property in the gridSettings of the Pivot Table to Tabular.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule, FieldListService } from '@syncfusion/ej2-angular-pivotview'
import { Component, OnInit } from '@angular/core';
import { IDataOptions, IDataSet } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { Pivot_Data } from './datasource';
import { Browser } from '@syncfusion/ej2-base';

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

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

        this.gridSettings = {
            columnWidth: Browser.isDevice ? 100 : 120,
            layout: 'Tabular'
        } as GridSettings;

        this.dataSourceSettings = {
            dataSource: Pivot_Data as IDataSet[],
            enableSorting: true,
            columns: [{ name: 'Year' }, { name: 'Quarter' }],
            rows: [
                { name: 'Product_Categories', caption: 'Product Categories' },
                { name: 'Products' },
                { name: 'Order_Source', caption: 'Order Source' },
            ],
            formatSettings: [{ name: 'Amount', format: 'C0' }],
            drilledMembers: [
                { name: 'Product_Categories', items: ['Accessories', 'Bikes'] },
                { name: 'Products', delimiter: '##', items: ['Accessories##Helmets'] },
            ],
            filterSettings: [
                {
                    name: 'Products',
                    type: 'Exclude',
                    items: ['Cleaners', 'Fenders'],
                },
            ],
            expandAll: false,
            values: [
                { name: 'Sold', caption: 'Units Sold' },
                { name: 'Amount', caption: 'Sold Amount' },
            ],
            filters: [],
        };
    }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Limitations

• Subtotals at the “Top” position are not supported for row subtotals.
• The following row and column customization options are currently unavailable for row headers (frozen columns):
  1. Column resizing
  2. Auto-fit
  3. Grid lines
• The following features are not currently supported in the pivot table:
  1. Grouping using the Grouping UI for row headers
  2. Hiding row subtotals
  3. Column subtotals at the “Top” position
  4. Exporting
  5. Values on the row axis
  6. Pivot Chart