Search results

Paging in JavaScript Pivot Table control

02 Feb 2023 / 10 minutes to read

Paging allows you to load large amounts of data that can be divided and displayed page by page in the pivot table. It can be enabled by setting the enablePaging property to true. It can be configured at code-behind by using the pageSettings property, during initial rendering of the component. The properties required are:

  • currentRowPage: Allows user to set the current row page number to be displayed in the pivot table.
  • currentColumnPage: Allows user to set the current column page number to be displayed in the pivot table.
  • rowPageSize: Allows user to set the total number of records to be displayed on each page of the pivot table’s row axis.
  • columnPageSize: Allows user to set the total number of records to be displayed on each page of the pivot table’s column axis.

Pager UI

When paging is enabled, a built-in pager UI appears at the bottom of the pivot table, allowing you to change the current page in the row and column axes by navigating to a desired page using the navigation buttons or an input text box, as well as change the page size via dropdown at runtime.

You can also change the position, visibility, compact view, and template of the row and column pagers by using the pagerSettings.

In order to see and use the pager UI, insert the Pager module into the pivot table.

Source
Preview
index.ts
index.html
Copied to clipboard
import { PivotView, Pager } from '@syncfusion/ej2-pivotview';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';

PivotView.Inject(Pager);

let remoteData: DataManager = new DataManager({
url: 'https://bi.syncfusion.com/northwindservice/api/orders',
adaptor: new WebApiAdaptor,
crossDomain: true
});
let pivotObj: PivotView = new PivotView({
dataSourceSettings: {
    type: 'JSON',
    dataSource: remoteData,
    expandAll: true,
    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' }],
    filters: []
},
width: '100%',
height: 350,
enablePaging: true,
pageSettings: {
    rowPageSize: 10,
    columnPageSize: 5,
    currentColumnPage: 1,
    currentRowPage: 1
},
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
},
gridSettings: { columnWidth: 120 },
});
pivotObj.appendTo('#PivotTable');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Pivot Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Pivot Grid Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-charts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-pivotview/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div>
            <div id='PivotTable'></div>
        </div>
    </div>
</body>

</html>

Show pager UI at top or bottom

You can display the pager UI at top or bottom of the pivot table by using the position property. To show the pager UI at top of the pivot table, set the position property in pagerSettings to Top.

By default, the pager UI appears at the bottom of the pivot table.

Source
Preview
index.ts
index.html
Copied to clipboard
import { PivotView, Pager } from '@syncfusion/ej2-pivotview';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';

PivotView.Inject(Pager);

let remoteData: DataManager = new DataManager({
url: 'https://bi.syncfusion.com/northwindservice/api/orders',
adaptor: new WebApiAdaptor,
crossDomain: true
});
let pivotObj: PivotView = new PivotView({
dataSourceSettings: {
    type: 'JSON',
    dataSource: remoteData,
    expandAll: true,
    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' }],
    filters: []
},
width: '100%',
height: 350,
enablePaging: true,
pageSettings: {
    rowPageSize: 10,
    columnPageSize: 5,
    currentColumnPage: 1,
    currentRowPage: 1
},
pagerSettings: {
    position: 'Top'
},
gridSettings: { columnWidth: 120 },
});
pivotObj.appendTo('#PivotTable');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Pivot Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Pivot Grid Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-charts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-pivotview/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div>
            <div id='PivotTable'></div>
        </div>
    </div>
</body>

</html>

Inverse pager

Toggles and displays row and column pager. To show the column pager on the left side of the pager UI, set the isInversed property in pagerSettings to true.

By default, the row pager is displayed on the left side of the pager UI, while the column pager is displayed on the right side.

Source
Preview
index.ts
index.html
Copied to clipboard
import { PivotView, Pager } from '@syncfusion/ej2-pivotview';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';

PivotView.Inject(Pager);

let remoteData: DataManager = new DataManager({
url: 'https://bi.syncfusion.com/northwindservice/api/orders',
adaptor: new WebApiAdaptor,
crossDomain: true
});
let pivotObj: PivotView = new PivotView({
dataSourceSettings: {
    type: 'JSON',
    dataSource: remoteData,
    expandAll: true,
    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' }],
    filters: []
},
width: '100%',
height: 350,
enablePaging: true,
pageSettings: {
    rowPageSize: 10,
    columnPageSize: 5,
    currentColumnPage: 1,
    currentRowPage: 1
},
pagerSettings: {
    isInversed: true
},
gridSettings: { columnWidth: 120 },
});
pivotObj.appendTo('#PivotTable');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Pivot Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Pivot Grid Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-charts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-pivotview/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div>
            <div id='PivotTable'></div>
        </div>
    </div>
</body>

</html>

Compact view

By hiding all except the previous and next navigation buttons, the pager UI can be displayed with the absolute minimum of paging options. The compact view can be enabled by setting the enableCompactView property in pagerSettings to true.

Source
Preview
index.ts
index.html
Copied to clipboard
import { PivotView, Pager } from '@syncfusion/ej2-pivotview';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';

PivotView.Inject(Pager);

let remoteData: DataManager = new DataManager({
url: 'https://bi.syncfusion.com/northwindservice/api/orders',
adaptor: new WebApiAdaptor,
crossDomain: true
});
let pivotObj: PivotView = new PivotView({
dataSourceSettings: {
    type: 'JSON',
    dataSource: remoteData,
    expandAll: true,
    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' }],
    filters: []
},
width: '100%',
height: 350,
enablePaging: true,
pageSettings: {
    rowPageSize: 10,
    columnPageSize: 5,
    currentColumnPage: 1,
    currentRowPage: 1
},
pagerSettings: {
    enableCompactView: true
},
gridSettings: { columnWidth: 120 },
});
pivotObj.appendTo('#PivotTable');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Pivot Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Pivot Grid Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-charts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-pivotview/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div>
            <div id='PivotTable'></div>
        </div>
    </div>
</body>

</html>

Show or hide paging option

By using the showRowPager and showColumnPager properties in pagerSettings, you can show or hide row and column pager separately in the pager UI.

In the following example, row pager has been disabled by setting the showRowPager property in pagerSettings to false.

Source
Preview
index.ts
index.html
Copied to clipboard
import { PivotView, Pager } from '@syncfusion/ej2-pivotview';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';

PivotView.Inject(Pager);

let remoteData: DataManager = new DataManager({
url: 'https://bi.syncfusion.com/northwindservice/api/orders',
adaptor: new WebApiAdaptor,
crossDomain: true
});
let pivotObj: PivotView = new PivotView({
dataSourceSettings: {
    type: 'JSON',
    dataSource: remoteData,
    expandAll: true,
    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' }],
    filters: []
},
width: '100%',
height: 350,
enablePaging: true,
pageSettings: {
    rowPageSize: 10,
    columnPageSize: 5,
    currentColumnPage: 1,
    currentRowPage: 1
},
pagerSettings: {
    showRowPager: false
},
gridSettings: { columnWidth: 120 },
});
pivotObj.appendTo('#PivotTable');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Pivot Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Pivot Grid Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-charts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-pivotview/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div>
            <div id='PivotTable'></div>
        </div>
    </div>
</body>

</html>

Show or hide page size

By using the showRowPageSize and showColumnPageSize properties in pagerSettings, you can show or hide “Rows per page” and “Columns per page” dropdown menu. The dropdown menu contains a list of pre-defined or user-defined page sizes, which will be displayed in the “Rows per page” and “Columns per page” dropdowns, allowing you to change the page size for the row and column axes at runtime.

Source
Preview
index.ts
index.html
Copied to clipboard
import { PivotView, Pager } from '@syncfusion/ej2-pivotview';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';

PivotView.Inject(Pager);

let remoteData: DataManager = new DataManager({
url: 'https://bi.syncfusion.com/northwindservice/api/orders',
adaptor: new WebApiAdaptor,
crossDomain: true
});
let pivotObj: PivotView = new PivotView({
dataSourceSettings: {
    type: 'JSON',
    dataSource: remoteData,
    expandAll: true,
    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' }],
    filters: []
},
width: '100%',
height: 350,
enablePaging: true,
pageSettings: {
    rowPageSize: 10,
    columnPageSize: 5,
    currentColumnPage: 1,
    currentRowPage: 1
},
pagerSettings: {
    showColumnPageSize: false,
    showRowPageSize: false
},
gridSettings: { columnWidth: 120 },
});
pivotObj.appendTo('#PivotTable');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Pivot Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Pivot Grid Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-charts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-pivotview/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div>
            <div id='PivotTable'></div>
        </div>
    </div>
</body>

</html>

Customize page size

By using the rowPageSizes and columnPageSizes properties in pagerSettings, you can specify a set of desired page sizes, which will be displayed in the “Rows per page” and “Columns per page” dropdowns, allowing you to change the page size for the row and column axes at runtime.

By default, the “Rows per page” dropdown have pre-defined page sizes of 10, 50, 100, and 200, while the “Columns per page” dropdown have pre-defined page sizes of 5, 10, 20, 50, and 100.

In the following example, the “Rows per page” dropdown is set with user-defined page sizes of 10, 20, 30, 40, and 50 and the “Columns per page” dropdown is set with user-defined page sizes of 5, 10, 15, 20, and 30.

Source
Preview
index.ts
index.html
Copied to clipboard
import { PivotView, Pager } from '@syncfusion/ej2-pivotview';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';

PivotView.Inject(Pager);

let remoteData: DataManager = new DataManager({
url: 'https://bi.syncfusion.com/northwindservice/api/orders',
adaptor: new WebApiAdaptor,
crossDomain: true
});
let pivotObj: PivotView = new PivotView({
dataSourceSettings: {
    type: 'JSON',
    dataSource: remoteData,
    expandAll: true,
    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' }],
    filters: []
},
width: '100%',
height: 350,
enablePaging: true,
pageSettings: {
    rowPageSize: 10,
    columnPageSize: 5,
    currentColumnPage: 1,
    currentRowPage: 1
},
pagerSettings: {
    columnPageSizes: [5, 10, 15, 20, 30],
    rowPageSizes: [10, 20, 30, 40, 50]
},
gridSettings: { columnWidth: 120 },
});
pivotObj.appendTo('#PivotTable');
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Pivot Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Pivot Grid Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-charts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-pivotview/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div>
            <div id='PivotTable'></div>
        </div>
    </div>
</body>

</html>

Template

The template property allows to change the appearance of the pager UI by displaying user-defined HTML elements instead of built-in HTML elements.

Source
Preview
index.ts
index.html
Copied to clipboard
import { PivotView, Pager } from '@syncfusion/ej2-pivotview';
import { DataManager, WebApiAdaptor } from '@syncfusion/ej2-data';
import { isNullOrUndefined } from '@syncfusion/ej2-base';
import { Pager as GridPager } from '@syncfusion/ej2-grids';

PivotView.Inject(Pager);

let remoteData: DataManager = new DataManager({
url: 'https://bi.syncfusion.com/northwindservice/api/orders',
adaptor: new WebApiAdaptor,
crossDomain: true
});

let rowPager: GridPager;
let columnPager: GridPager;

let pivotObj: PivotView = new PivotView({
dataSourceSettings: {
    type: 'JSON',
    dataSource: remoteData,
    expandAll: true,
    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' }],
    filters: []
},
width: '100%',
height: 350,
enablePaging: true,
pageSettings: {
    rowPageSize: 10,
    columnPageSize: 5,
    currentColumnPage: 1,
    currentRowPage: 1
},
pagerSettings: {
    template: '#template'
},
gridSettings: { columnWidth: 120 },
dataBound: function () {
    updateTemplate();
}
});
pivotObj.appendTo('#PivotTable');

function updateTemplate() {
if (!isNullOrUndefined(rowPager)) {
    rowPager.destroy();
    rowPager = null;
}
rowPager = new GridPager({
    pageSize: pivotObj.pageSettings.rowPageSize,
    totalRecordsCount: pivotObj.engineModule.rowCount,
    currentPage: pivotObj.pageSettings.currentRowPage,
    pageCount: 5,
    click: rowPageClick
});
rowPager.appendTo('#row-pager');
if (!isNullOrUndefined(columnPager)) {
    columnPager.destroy();
    columnPager = null;
}
columnPager = new GridPager({
    pageSize: pivotObj.pageSettings.columnPageSize,
    totalRecordsCount: pivotObj.engineModule.columnCount,
    currentPage: pivotObj.pageSettings.currentColumnPage,
    pageCount: 5,
    click: columnPageClick
});
columnPager.appendTo('#column-pager');
}

function rowPageClick(args: any) {
pivotObj.pageSettings.currentRowPage = args.currentPage;
pivotObj.refreshData();
}

function columnPageClick(args: any) {
pivotObj.pageSettings.currentColumnPage = args.currentPage;
pivotObj.refreshData();
}
Copied to clipboard
<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>EJ2 Pivot Grid</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript Pivot Grid Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-grids/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-charts/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.4.48/ej2-pivotview/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <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>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div>
            <div id='PivotTable'></div>
        </div>
    </div>
</body>

</html>