Paging in Angular Pivot Table

27 Aug 202624 minutes to read

Paging divides the Pivot Table data into manageable pages so the component can render large datasets efficiently. The row axis (members of the row fields) and the column axis (members of the column and value fields) are paginated independently. Users navigate rows and columns page by page using the built-in pager UI or custom controls.

To enable paging, set the enablePaging property to true (type boolean, default false).

Paging can be configured at initial render using the pageSettings property, which accepts the following options:

Property	Type	Default	Description
`currentRowPage`	`number`	`1`	The current row page number to display.
`currentColumnPage`	`number`	`1`	The current column page number to display.
`rowPageSize`	`number`	`10`	The number of records displayed on each page of the row axis.
`columnPageSize`	`number`	`5`	The number of records displayed on each page of the column axis.

The Virtualization and Paging features in the Pivot Table should not be enabled simultaneously. You can use either feature at a time, but not both together, as they are designed to handle data rendering differently and may conflict when used together.

When paging is enabled, a built-in pager UI appears at the bottom of the Pivot Table by default. The UI provides navigation buttons, a page-input box, and dropdowns for changing the page size on each axis.

You can change the position, visibility, compact view, and template of the row and column pagers using the pagerSettings property. The available sub-properties are summarized below:

Property	Type	Default	Description
`position`	`PagerPosition`	`Bottom`	Places the pager UI at the `Top` or `Bottom` of the Pivot Table.
`isInversed`	`boolean`	`false`	When `true`, swaps the column pager to the left and the row pager to the right.
`enableCompactView`	`boolean`	`false`	When `true`, shows only the previous and next navigation buttons.
`showRowPager`	`boolean`	`true`	Shows or hides the row pager.
`showColumnPager`	`boolean`	`true`	Shows or hides the column pager.
`showRowPageSize`	`boolean`	`true`	Shows or hides the “Rows per page” dropdown.
`showColumnPageSize`	`boolean`	`true`	Shows or hides the “Columns per page” dropdown.
`rowPageSizes`	`number[]`	`[10, 50, 100, 200]`	The list of page sizes offered in the “Rows per page” dropdown.
`columnPageSizes`	`number[]`	`[5, 10, 20, 50, 100]`	The list of page sizes offered in the “Columns per page” dropdown.
`template`	`string`	`''`	The ID of an HTML element that replaces the built-in pager UI.

In order to see and use the pager UI, inject the PagerService module into the Pivot Table by adding it to the @NgModule.providers section. The PagerService module is shipped with the @syncfusion/ej2-angular-pivotview package, so no additional package install is required.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview'



import { Component, OnInit } from '@angular/core';
import { IDataSet, PivotView, PagerSettings, PageSettings, PagerService } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { DataManager, WebApiAdaptor, Query, ReturnOption } from '@syncfusion/ej2-data';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';

@Component({
imports: [
        
        PivotViewAllModule,
        PivotFieldListAllModule
    ],


standalone: true,
    selector: 'app-container',
    template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings [width]=width [gridSettings]='gridSettings' enablePaging="true" [pageSettings]="pageSettings" [pagerSettings]="pagerSettings"></ejs-pivotview>`,
    providers: [PagerService]
})
export class AppComponent implements OnInit {
    public dataSourceSettings?: DataSourceSettingsModel;
    public remoteData?: DataManager;
    public width?: string;
    public gridSettings?: GridSettings;
    public pageSettings?: PageSettings;
    public pagerSettings?: PagerSettings;

    ngOnInit(): void {
        this.remoteData = new DataManager({
            url: 'https://bi.syncfusion.com/northwindservice/api/orders',
            adaptor: new WebApiAdaptor,
            crossDomain: true
        });
        this.width = '100%';
        this.pageSettings = {
            rowPageSize: 10,
            columnPageSize: 5,
            currentColumnPage: 1,
            currentRowPage: 1
        } as PageSettings;
        this.pagerSettings = {
            position: 'Bottom',
            enableCompactView: false,
            showColumnPager: true,
            showRowPager: true,
            columnPageSizes: [5, 10, 20, 50, 100],
            rowPageSizes: [10, 50, 100, 200],
            isInversed: false,
            showColumnPageSize: true,
            showRowPageSize: true
        } as PagerSettings;
        this.gridSettings = { columnWidth: 120 } as GridSettings;
        this.dataSourceSettings = {
            dataSource: this.remoteData,
            expandAll: true,
            filters: [],
            columns: [{ name: 'ProductName', caption: 'Product Name' }],
            rows: [{ name: 'ShipCountry', caption: 'Ship Country' }, { name: 'ShipCity', caption: 'Ship City' }],
            formatSettings: [{ name: 'UnitPrice', format: 'C0' }],
            values: [{ name: 'Quantity' }, { name: 'UnitPrice', caption: 'Unit Price' }]
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

The Pivot Table component lets you place the pager UI at the top or bottom of the Pivot Table by setting the position property within the pagerSettings configuration. By default the pager UI appears at the bottom; set position to 'Top' to place it above the Pivot Table.

The following example demonstrates how to configure the pager UI to appear at the top of the Pivot Table:

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview'



import { Component, OnInit } from '@angular/core';
import { IDataSet, PivotView, PagerSettings, PageSettings, PagerService } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { DataManager, WebApiAdaptor, Query, ReturnOption } from '@syncfusion/ej2-data';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';

@Component({
imports: [
        
        PivotViewAllModule,
        PivotFieldListAllModule
    ],


standalone: true,
    selector: 'app-container',
    template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings [width]=width [gridSettings]='gridSettings' enablePaging="true" [pageSettings]="pageSettings" [pagerSettings]="pagerSettings"></ejs-pivotview>`,
    providers: [PagerService]
})
export class AppComponent implements OnInit {
    public dataSourceSettings?: DataSourceSettingsModel;
    public remoteData?: DataManager;
    public width?: string;
    public gridSettings?: GridSettings;
    public pageSettings?: PageSettings;
    public pagerSettings?: PagerSettings;

    ngOnInit(): void {
        this.remoteData = new DataManager({
            url: 'https://bi.syncfusion.com/northwindservice/api/orders',
            adaptor: new WebApiAdaptor,
            crossDomain: true
        });
        this.width = '100%';
        this.pageSettings = {
            rowPageSize: 10,
            columnPageSize: 5,
            currentColumnPage: 1,
            currentRowPage: 1
        } as PageSettings;
        this.pagerSettings = {
            position: 'Top'
        } as PagerSettings;
        this.gridSettings = { columnWidth: 120 } as GridSettings;
        this.dataSourceSettings = {
            dataSource: this.remoteData,
            expandAll: true,
            filters: [],
            columns: [{ name: 'ProductName', caption: 'Product Name' }],
            rows: [{ name: 'ShipCountry', caption: 'Ship Country' }, { name: 'ShipCity', caption: 'Ship City' }],
            formatSettings: [{ name: 'UnitPrice', format: 'C0' }],
            values: [{ name: 'Quantity' }, { name: 'UnitPrice', caption: 'Unit Price' }]
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

By default, the row pager appears on the left side of the pager UI and the column pager on the right. To swap these positions, set the isInversed property to true within the pagerSettings configuration.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview'



import { Component, OnInit } from '@angular/core';
import { IDataSet, PivotView, PagerSettings, PageSettings, PagerService } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { DataManager, WebApiAdaptor, Query, ReturnOption } from '@syncfusion/ej2-data';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';

@Component({
imports: [
        
        PivotViewAllModule,
        PivotFieldListAllModule
    ],


standalone: true,
    selector: 'app-container',
    template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings [width]=width [gridSettings]='gridSettings' enablePaging="true" [pageSettings]="pageSettings" [pagerSettings]="pagerSettings"></ejs-pivotview>`,
    providers: [PagerService]
})
export class AppComponent implements OnInit {
    public dataSourceSettings?: DataSourceSettingsModel;
    public remoteData?: DataManager;
    public width?: string;
    public gridSettings?: GridSettings;
    public pageSettings?: PageSettings;
    public pagerSettings?: PagerSettings;

    ngOnInit(): void {
        this.remoteData = new DataManager({
            url: 'https://bi.syncfusion.com/northwindservice/api/orders',
            adaptor: new WebApiAdaptor,
            crossDomain: true
        });
        this.width = '100%';
        this.pageSettings = {
            rowPageSize: 10,
            columnPageSize: 5,
            currentColumnPage: 1,
            currentRowPage: 1
        } as PageSettings;
        this.pagerSettings = {
            isInversed: true
        } as PagerSettings;
        this.gridSettings = { columnWidth: 120 } as GridSettings;
        this.dataSourceSettings = {
            dataSource: this.remoteData,
            expandAll: true,
            filters: [],
            columns: [{ name: 'ProductName', caption: 'Product Name' }],
            rows: [{ name: 'ShipCountry', caption: 'Ship Country' }, { name: 'ShipCity', caption: 'Ship City' }],
            formatSettings: [{ name: 'UnitPrice', format: 'C0' }],
            values: [{ name: 'Quantity' }, { name: 'UnitPrice', caption: 'Unit Price' }]
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Compact view

The Pivot Table provides a compact view for the pager UI, displaying only the previous and next navigation buttons to minimize the interface. To enable the compact view, set the enableCompactView property to true within the pagerSettings configuration. This streamlined layout focuses on essential navigation controls, which is ideal for layouts requiring a simplified paging experience.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview'



import { Component, OnInit } from '@angular/core';
import { IDataSet, PivotView, PagerSettings, PageSettings, PagerService } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { DataManager, WebApiAdaptor, Query, ReturnOption } from '@syncfusion/ej2-data';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';

@Component({
imports: [
        
        PivotViewAllModule,
        PivotFieldListAllModule
    ],


standalone: true,
    selector: 'app-container',
    template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings [width]=width [gridSettings]='gridSettings' enablePaging="true" [pageSettings]="pageSettings" [pagerSettings]="pagerSettings"></ejs-pivotview>`,
    providers: [PagerService]
})
export class AppComponent implements OnInit {
    public dataSourceSettings?: DataSourceSettingsModel;
    public remoteData?: DataManager;
    public width?: string;
    public gridSettings?: GridSettings;
    public pageSettings?: PageSettings;
    public pagerSettings?: PagerSettings;

    ngOnInit(): void {
        this.remoteData = new DataManager({
            url: 'https://bi.syncfusion.com/northwindservice/api/orders',
            adaptor: new WebApiAdaptor,
            crossDomain: true
        });
        this.width = '100%';
        this.pageSettings = {
            rowPageSize: 10,
            columnPageSize: 5,
            currentColumnPage: 1,
            currentRowPage: 1
        } as PageSettings;
        this.pagerSettings = {
            enableCompactView: true
        } as PagerSettings;
        this.gridSettings = { columnWidth: 120 } as GridSettings;
        this.dataSourceSettings = {
            dataSource: this.remoteData,
            expandAll: true,
            filters: [],
            columns: [{ name: 'ProductName', caption: 'Product Name' }],
            rows: [{ name: 'ShipCountry', caption: 'Ship Country' }, { name: 'ShipCity', caption: 'Ship City' }],
            formatSettings: [{ name: 'UnitPrice', format: 'C0' }],
            values: [{ name: 'Quantity' }, { name: 'UnitPrice', caption: 'Unit Price' }]
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Show or hide paging option

The Pivot Table allows you to control the visibility of the row and column pagers in the pager UI using the showRowPager and showColumnPager properties within the pagerSettings configuration. By default, both row and column pagers are visible in the pager UI. To hide either the row pager or the column pager, set the corresponding property to false. This allows you to display only the necessary navigation controls based on your layout requirements.

The following code demonstrates how to hide the row pager by setting the showRowPager property to false:

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview'



import { Component, OnInit } from '@angular/core';
import { IDataSet, PivotView, PagerSettings, PageSettings, PagerService } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { DataManager, WebApiAdaptor, Query, ReturnOption } from '@syncfusion/ej2-data';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';

@Component({
imports: [
        
        PivotViewAllModule,
        PivotFieldListAllModule
    ],


standalone: true,
    selector: 'app-container',
    template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings [width]=width [gridSettings]='gridSettings' enablePaging="true" [pageSettings]="pageSettings" [pagerSettings]="pagerSettings"></ejs-pivotview>`,
    providers: [PagerService]
})
export class AppComponent implements OnInit {
    public dataSourceSettings?: DataSourceSettingsModel;
    public remoteData?: DataManager;
    public width?: string;
    public gridSettings?: GridSettings;
    public pageSettings?: PageSettings;
    public pagerSettings?: PagerSettings;

    ngOnInit(): void {
        this.remoteData = new DataManager({
            url: 'https://bi.syncfusion.com/northwindservice/api/orders',
            adaptor: new WebApiAdaptor,
            crossDomain: true
        });
        this.width = '100%';
        this.pageSettings = {
            rowPageSize: 10,
            columnPageSize: 5,
            currentColumnPage: 1,
            currentRowPage: 1
        } as PageSettings;
        this.pagerSettings = {
            showRowPager: false
        } as PagerSettings;
        this.gridSettings = { columnWidth: 120 } as GridSettings;
        this.dataSourceSettings = {
            dataSource: this.remoteData,
            expandAll: true,
            filters: [],
            columns: [{ name: 'ProductName', caption: 'Product Name' }],
            rows: [{ name: 'ShipCountry', caption: 'Ship Country' }, { name: 'ShipCity', caption: 'Ship City' }],
            formatSettings: [{ name: 'UnitPrice', format: 'C0' }],
            values: [{ name: 'Quantity' }, { name: 'UnitPrice', caption: 'Unit Price' }]
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Show or hide page size

The Pivot Table allows you to control the visibility of the “Rows per page” and “Columns per page” dropdowns in the pager UI using the showRowPageSize and showColumnPageSize properties within the pagerSettings configuration. These dropdowns display a list of predefined or user-defined page sizes, enabling you to adjust the number of rows or columns displayed per page at runtime. By default, both dropdowns are visible in the pager UI. To hide either the “Rows per page” or “Columns per page” dropdown, set the corresponding property to false.

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview'



import { Component, OnInit } from '@angular/core';
import { IDataSet, PivotView, PagerSettings, PageSettings, PagerService } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { DataManager, WebApiAdaptor, Query, ReturnOption } from '@syncfusion/ej2-data';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';

@Component({
imports: [
        
        PivotViewAllModule,
        PivotFieldListAllModule
    ],


standalone: true,
    selector: 'app-container',
    template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings [width]=width [gridSettings]='gridSettings' enablePaging="true" [pageSettings]="pageSettings" [pagerSettings]="pagerSettings"></ejs-pivotview>`,
    providers: [PagerService]
})
export class AppComponent implements OnInit {
    public dataSourceSettings?: DataSourceSettingsModel;
    public remoteData?: DataManager;
    public width?: string;
    public gridSettings?: GridSettings;
    public pageSettings?: PageSettings;
    public pagerSettings?: PagerSettings;

    ngOnInit(): void {
        this.remoteData = new DataManager({
            url: 'https://bi.syncfusion.com/northwindservice/api/orders',
            adaptor: new WebApiAdaptor,
            crossDomain: true
        });
        this.width = '100%';
        this.pageSettings = {
            rowPageSize: 10,
            columnPageSize: 5,
            currentColumnPage: 1,
            currentRowPage: 1
        } as PageSettings;
        this.pagerSettings = {
            showColumnPageSize: false,
            showRowPageSize: false
        } as PagerSettings;
        this.gridSettings = { columnWidth: 120 } as GridSettings;
        this.dataSourceSettings = {
            dataSource: this.remoteData,
            expandAll: true,
            filters: [],
            columns: [{ name: 'ProductName', caption: 'Product Name' }],
            rows: [{ name: 'ShipCountry', caption: 'Ship Country' }, { name: 'ShipCity', caption: 'Ship City' }],
            formatSettings: [{ name: 'UnitPrice', format: 'C0' }],
            values: [{ name: 'Quantity' }, { name: 'UnitPrice', caption: 'Unit Price' }]
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Customize page size

The Pivot Table allows you to specify a list of page sizes for the “Rows per page” and “Columns per page” dropdowns in the pager UI using the rowPageSizes and columnPageSizes properties within the pagerSettings configuration. By default, the “Rows per page” dropdown includes page sizes of 10, 50, 100, and 200, while the “Columns per page” dropdown includes page sizes of 5, 10, 20, 50, and 100. To define a different set of page sizes, assign an array of numbers to the rowPageSizes or columnPageSizes properties.

The following example sets the “Rows per page” dropdown with page sizes of 10, 20, 30, 40, and 50, and the “Columns per page” dropdown with page sizes of 5, 10, 15, 20, and 30:

app.component.ts
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview'



import { Component, OnInit } from '@angular/core';
import { IDataSet, PivotView, PagerSettings, PageSettings, PagerService } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { DataManager, WebApiAdaptor, Query, ReturnOption } from '@syncfusion/ej2-data';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';

@Component({
imports: [
        
        PivotViewAllModule,
        PivotFieldListAllModule
    ],


standalone: true,
    selector: 'app-container',
    template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings [width]=width [gridSettings]='gridSettings' enablePaging="true" [pageSettings]="pageSettings" [pagerSettings]="pagerSettings"></ejs-pivotview>`,
    providers: [PagerService]
})
export class AppComponent implements OnInit {
    public dataSourceSettings?: DataSourceSettingsModel;
    public remoteData?: DataManager;
    public width?: string;
    public gridSettings?: GridSettings;
    public pageSettings?: PageSettings;
    public pagerSettings?: PagerSettings;

    ngOnInit(): void {
        this.remoteData = new DataManager({
            url: 'https://bi.syncfusion.com/northwindservice/api/orders',
            adaptor: new WebApiAdaptor,
            crossDomain: true
        });
        this.width = '100%';
        this.pageSettings = {
            rowPageSize: 10,
            columnPageSize: 5,
            currentColumnPage: 1,
            currentRowPage: 1
        } as PageSettings;
        this.pagerSettings = {
            position: 'Bottom',
            enableCompactView: false,
            showColumnPager: true,
            showRowPager: true,
            columnPageSizes: [5, 10, 15, 20, 30],
            rowPageSizes: [10, 20, 30, 40, 50],
            isInversed: false,
            showColumnPageSize: true,
            showRowPageSize: true
        } as PagerSettings;
        this.gridSettings = { columnWidth: 120 } as GridSettings;
        this.dataSourceSettings = {
            dataSource: this.remoteData,
            expandAll: true,
            filters: [],
            columns: [{ name: 'ProductName', caption: 'Product Name' }],
            rows: [{ name: 'ShipCountry', caption: 'Ship Country' }, { name: 'ShipCity', caption: 'Ship City' }],
            formatSettings: [{ name: 'UnitPrice', format: 'C0' }],
            values: [{ name: 'Quantity' }, { name: 'UnitPrice', caption: 'Unit Price' }]
        };
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Template

The Pivot Table allows you to define a custom layout for the pager UI using the template property within the pagerSettings configuration. By default, the pager UI displays built-in navigation controls. To replace these with custom HTML elements, assign the ID of the custom elements to the template property. This enables you to create a unique pager interface that aligns with your application’s design requirements.

This following example shows how to create a custom template for both row and column pagers. First, include the necessary HTML code in your index.html file and assign its ID to the template property. Then, during the dataBound event, the Syncfusion Pager control is appended to the designated HTML elements. You can configure the pager by setting properties like pageSize, totalRecordsCount, and currentPage. When you click on a custom row or column pager, the currentRowPage and currentColumnPage properties in pageSettings are updated, enabling navigation with the custom pager.

app.component.ts
index.html
main.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { PivotViewAllModule, PivotFieldListAllModule } from '@syncfusion/ej2-angular-pivotview'



import { Component, OnInit, ViewChild } from '@angular/core';
import { PivotView, PagerSettings, PageSettings, PagerService } from '@syncfusion/ej2-angular-pivotview';
import { GridSettings } from '@syncfusion/ej2-pivotview/src/pivotview/model/gridsettings';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
import { Pager } from '@syncfusion/ej2-grids';
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { DataSourceSettingsModel } from '@syncfusion/ej2-pivotview/src/model/datasourcesettings-model';

@Component({
imports: [
        
        PivotViewAllModule,
        PivotFieldListAllModule
    ],


standalone: true,
    selector: 'app-container',
    template: `<ejs-pivotview #pivotview id='PivotView' height='350' [dataSourceSettings]=dataSourceSettings [width]=width [gridSettings]='gridSettings' enablePaging="true" [pageSettings]="pageSettings" [pagerSettings]="pagerSettings" (dataBound)='dataBound()'></ejs-pivotview>`,
    providers: [PagerService]
})
export class AppComponent implements OnInit {
    public dataSourceSettings?: DataSourceSettingsModel;
    public remoteData?: DataManager;
    public width?: string;
    public gridSettings?: GridSettings;
    public pageSettings?: PageSettings;
    public pagerSettings?: PagerSettings;
    public rowPager?: Pager;
    public columnPager?: Pager;

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

    dataBound() {
        this.updateTemplate();
    }

    updateTemplate() {
        if (!isNullOrUndefined(this.rowPager as Pager)) {
            this.rowPager?.destroy();
            this.rowPager = undefined;
        }
        this.rowPager = new Pager({
            pageSize: this.pivotGridObj?.pageSettings.rowPageSize,
            totalRecordsCount: this.pivotGridObj?.engineModule.rowCount,
            currentPage: this.pivotGridObj?.pageSettings.currentRowPage,
            pageCount: 5,
            click: this.rowPageClick.bind(this)
        });
        this.rowPager.appendTo('#row-pager');
        if (!isNullOrUndefined(this.columnPager as Pager)) {
            this.columnPager?.destroy();
            this.columnPager = undefined;
        }
        this.columnPager = new Pager({
            pageSize: this.pivotGridObj?.pageSettings.columnPageSize,
            totalRecordsCount: this.pivotGridObj?.engineModule.columnCount,
            currentPage: this.pivotGridObj?.pageSettings.currentColumnPage,
            pageCount: 5,
            click: this.columnPageClick.bind(this)
        });
        this.columnPager.appendTo('#column-pager');
    }

    rowPageClick(args: any) {
        this.pivotGridObj!.pageSettings.currentRowPage = args.currentPage;
    }

    columnPageClick(args: any) {
        this.pivotGridObj!.pageSettings.currentColumnPage = args.currentPage;
    }

    ngOnInit(): void {
        this.remoteData = new DataManager({
            url: 'https://bi.syncfusion.com/northwindservice/api/orders',
            adaptor: new WebApiAdaptor,
            crossDomain: true
        });
        this.width = '100%';
        this.pageSettings = {
            rowPageSize: 10,
            columnPageSize: 5,
            currentColumnPage: 1,
            currentRowPage: 1
        } as PageSettings;
        this.pagerSettings = {
            template: '#template'
        } as PagerSettings;
        this.gridSettings = { columnWidth: 120 } as GridSettings;
        this.dataSourceSettings = {
            dataSource: this.remoteData,
            expandAll: true,
            filters: [],
            columns: [{ name: 'ProductName', caption: 'Product Name' }],
            rows: [{ name: 'ShipCountry', caption: 'Ship Country' }, { name: 'ShipCity', caption: 'Ship City' }],
            formatSettings: [{ name: 'UnitPrice', format: 'C0' }],
            values: [{ name: 'Quantity' }, { name: 'UnitPrice', caption: 'Unit Price' }]
        };
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Syncfusion Angular Pivot Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
<meta name="author" content="Syncfusion" />
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
    <style>
        #loader {
            color: #008cff;
            font-family: 'Helvetica Neue', 'calibiri';
            font-size: 16px;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        .e-pivot-pager {
            display: flex;
        }
        .pager-label {
            color: #9e9e9e;
            margin-right: 10px;
        }
        #row-pager {
            margin-right: 10px;
        }
    </style>
</head>
<body style="margin-top: 125px">
    <script id="template" type="text/x-template">
        <div class="pager-label">Row Pager: </div>
        <div id="row-pager" class="e-pagertemplate"></div>
        <div class="pager-label">Column Pager: </div>
        <div id="column-pager" class="e-pagertemplate"></div>
    </script>
    <app-container>
        <div id='loader'>Loading....</div>
    </app-container>
</body>
</html>
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Search docs

Ask Syncfusion AI Assistant

Search docs

Ask Syncfusion AI Assistant

Paging in Angular Pivot Table

Compact view

Show or hide paging option

Show or hide page size

Customize page size

Template

See Also

Paging in Angular Pivot Table

Pager UI

Show pager UI at top or bottom

Inverse pager

Compact view

Show or hide paging option

Show or hide page size

Customize page size

Template

See Also