Web Components Tree Grid Pagination Overview
The Ignite UI for Web Components Pagination feature in Web Components Tree Grid is used to split a large set of data into a sequence of pages that have similar content. React grid pagination improves user experience and data interaction. IgcTreeGridComponent pagination is configurable via a separate component projected in the grid tree by defining a IgcPaginator tag, similar to adding of a column. As in any Web Components table, the pagination in the Web Components Tree Grid supports template for custom pages.
Web Components Tree Grid Pagination Example
The following example represents IgcTreeGridComponent pagination and exposes the options usage of items per page and how paging can be enabled. The user can also quickly navigate through the IgcTreeGridComponent pages via "Go to last page" and "Go to first page" buttons.
export class OrdersTreeDataItem {
public constructor(init: Partial<OrdersTreeDataItem>) {
Object.assign(this, init);
}
public ID: number;
public ParentID: number;
public Name: string;
public Category: string;
public OrderDate: string;
public Units: number;
public UnitPrice: number;
public Price: number;
public Delivered: boolean;
}
export class OrdersTreeData extends Array<OrdersTreeDataItem> {
public constructor(items: Array<OrdersTreeDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new OrdersTreeDataItem(
{
ID: 1,
ParentID: -1,
Name: `Order 1`,
Category: ``,
OrderDate: `2010-02-17`,
Units: 1844,
UnitPrice: 3.73,
Price: 6884.38,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 101,
ParentID: 1,
Name: `Chocolate Chip Cookies`,
Category: `Cookies`,
OrderDate: `2010-02-17`,
Units: 834,
UnitPrice: 3.59,
Price: 2994.06,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 102,
ParentID: 1,
Name: `Red Apples`,
Category: `Fruit`,
OrderDate: `2010-02-17`,
Units: 371,
UnitPrice: 3.66,
Price: 1357.86,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 103,
ParentID: 1,
Name: `Butter`,
Category: `Diary`,
OrderDate: `2010-02-17`,
Units: 260,
UnitPrice: 3.45,
Price: 897,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 104,
ParentID: 1,
Name: `Potato Chips`,
Category: `Snack`,
OrderDate: `2010-02-17`,
Units: 118,
UnitPrice: 1.96,
Price: 231.28,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 105,
ParentID: 1,
Name: `Orange Juice`,
Category: `Beverages`,
OrderDate: `2010-02-17`,
Units: 261,
UnitPrice: 5.38,
Price: 1404.18,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 2,
ParentID: -1,
Name: `Order 2`,
Category: ``,
OrderDate: `2022-05-27`,
Units: 1831,
UnitPrice: 8.23,
Price: 15062.77,
Delivered: false
}),
new OrdersTreeDataItem(
{
ID: 201,
ParentID: 2,
Name: `Frozen Shrimps`,
Category: `Seafood`,
OrderDate: `2022-05-27`,
Units: 120,
UnitPrice: 20.45,
Price: 2454,
Delivered: false
}),
new OrdersTreeDataItem(
{
ID: 202,
ParentID: 2,
Name: `Ice Tea`,
Category: `Beverages`,
OrderDate: `2022-05-27`,
Units: 840,
UnitPrice: 7,
Price: 5880,
Delivered: false
}),
new OrdersTreeDataItem(
{
ID: 203,
ParentID: 2,
Name: `Fresh Cheese`,
Category: `Diary`,
OrderDate: `2022-05-27`,
Units: 267,
UnitPrice: 16.55,
Price: 4418.85,
Delivered: false
}),
new OrdersTreeDataItem(
{
ID: 204,
ParentID: 2,
Name: `Carrots`,
Category: `Vegetables`,
OrderDate: `2022-05-27`,
Units: 360,
UnitPrice: 2.77,
Price: 997.2,
Delivered: false
}),
new OrdersTreeDataItem(
{
ID: 205,
ParentID: 2,
Name: `Apple Juice`,
Category: `Beverages`,
OrderDate: `2022-05-27`,
Units: 244,
UnitPrice: 5.38,
Price: 1312.72,
Delivered: false
}),
new OrdersTreeDataItem(
{
ID: 3,
ParentID: -1,
Name: `Order 3`,
Category: ``,
OrderDate: `2022-08-04`,
Units: 1972,
UnitPrice: 3.47,
Price: 6849.18,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 301,
ParentID: 3,
Name: `Skimmed Milk 1L`,
Category: `Diary`,
OrderDate: `2022-08-04`,
Units: 1028,
UnitPrice: 3.56,
Price: 3659.68,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 302,
ParentID: 3,
Name: `Bananas 5 Pack`,
Category: `Fruit`,
OrderDate: `2022-08-04`,
Units: 370,
UnitPrice: 6.36,
Price: 2353.2,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 303,
ParentID: 3,
Name: `Cauliflower`,
Category: `Vegetables`,
OrderDate: `2022-08-04`,
Units: 283,
UnitPrice: 0.95,
Price: 268.85,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 304,
ParentID: 3,
Name: `White Chocolate Cookies`,
Category: `Cookies`,
OrderDate: `2022-08-04`,
Units: 291,
UnitPrice: 1.95,
Price: 567.45,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 4,
ParentID: -1,
Name: `Order 4`,
Category: ``,
OrderDate: `2023-01-04`,
Units: 1065,
UnitPrice: 5.56,
Price: 5923.5,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 401,
ParentID: 4,
Name: `Mini Milk Chocolate Cookie Bites`,
Category: `Cookies`,
OrderDate: `2023-01-04`,
Units: 68,
UnitPrice: 2.25,
Price: 153,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 402,
ParentID: 4,
Name: `Wild Salmon Fillets`,
Category: `Seafood`,
OrderDate: `2023-01-04`,
Units: 320,
UnitPrice: 16.15,
Price: 5168,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 403,
ParentID: 4,
Name: `Diet Lemonade`,
Category: `Beverages`,
OrderDate: `2023-01-04`,
Units: 437,
UnitPrice: 0.5,
Price: 218.5,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 404,
ParentID: 4,
Name: `Potatoes`,
Category: `Vegetables`,
OrderDate: `2023-01-04`,
Units: 240,
UnitPrice: 1.6,
Price: 384,
Delivered: true
}),
];
super(...newItems.slice(0));
}
}
}
tsimport 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcTreeGridComponent } from 'igniteui-webcomponents-grids/grids';
import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import "./index.css";
export class Sample {
private treeGrid: IgcTreeGridComponent
private _bind: () => void;
constructor() {
var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
this._bind = () => {
treeGrid.data = this.ordersTreeData;
}
this._bind();
}
private _ordersTreeData: OrdersTreeData = null;
public get ordersTreeData(): OrdersTreeData {
if (this._ordersTreeData == null)
{
this._ordersTreeData = new OrdersTreeData();
}
return this._ordersTreeData;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
WebTreeGridDescriptionModule.register(context);
}
return this._componentRenderer;
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample ig-typography">
<div class="container fill">
<igc-tree-grid
auto-generate="false"
name="treeGrid"
id="treeGrid"
id="treeGrid"
primary-key="ID"
foreign-key="ParentID">
<igc-paginator
per-page="10">
</igc-paginator>
<igc-column
field="ID"
header="Order ID">
</igc-column>
<igc-column
field="Name"
header="Order Product">
</igc-column>
<igc-column
field="Category"
header="Category">
</igc-column>
<igc-column
field="Units"
header="Units"
data-type="number">
</igc-column>
<igc-column
field="UnitPrice"
header="Unit Price"
data-type="number">
</igc-column>
<igc-column
field="Price"
header="Price"
data-type="number">
</igc-column>
<igc-column
field="OrderDate"
header="Order Date"
data-type="date">
</igc-column>
<igc-column
field="Delivered"
header="Delivered"
data-type="boolean">
</igc-column>
</igc-tree-grid>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
css
Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.
.gridSize {
--ig-size: var(--ig-size-small);
}
css<igc-tree-grid id="grid" class="gridSize" height="500px" width="100%" >
<igc-paginator per-page="10">
</igc-paginator>
</igc-tree-grid>
htmlUsage
The IgcPaginator component is used along with the IgcTreeGridComponent component in the example below, but you can use it with any other component in case paging functionality is needed.
<igc-tree-grid id="grid" className="gridSize">
<igc-paginator id="paginator" per-page="10">
</igc-paginator>
</igc-tree-grid>
htmlconstructor() {
var grid = this.grid = document.getElementById('grid') as IgcTreeGrid;
var paginator = this.paginator = document.getElementById('paginator') as IgcPaginatorComponent;
const selectOptions = [5, 15, 20, 50];
grid.data = this.data;
paginator.page = grid.page;
paginator.totalRecords = grid.totalRecords;
paginator.selectOptions = selectOptions;
}
tsPaginator Component Demo
export class OrdersTreeDataItem {
public constructor(init: Partial<OrdersTreeDataItem>) {
Object.assign(this, init);
}
public ID: number;
public ParentID: number;
public Name: string;
public Category: string;
public OrderDate: string;
public Units: number;
public UnitPrice: number;
public Price: number;
public Delivered: boolean;
}
export class OrdersTreeData extends Array<OrdersTreeDataItem> {
public constructor(items: Array<OrdersTreeDataItem> | number = -1) {
if (Array.isArray(items)) {
super(...items);
} else {
const newItems = [
new OrdersTreeDataItem(
{
ID: 1,
ParentID: -1,
Name: `Order 1`,
Category: ``,
OrderDate: `2010-02-17`,
Units: 1844,
UnitPrice: 3.73,
Price: 6884.38,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 101,
ParentID: 1,
Name: `Chocolate Chip Cookies`,
Category: `Cookies`,
OrderDate: `2010-02-17`,
Units: 834,
UnitPrice: 3.59,
Price: 2994.06,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 102,
ParentID: 1,
Name: `Red Apples`,
Category: `Fruit`,
OrderDate: `2010-02-17`,
Units: 371,
UnitPrice: 3.66,
Price: 1357.86,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 103,
ParentID: 1,
Name: `Butter`,
Category: `Diary`,
OrderDate: `2010-02-17`,
Units: 260,
UnitPrice: 3.45,
Price: 897,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 104,
ParentID: 1,
Name: `Potato Chips`,
Category: `Snack`,
OrderDate: `2010-02-17`,
Units: 118,
UnitPrice: 1.96,
Price: 231.28,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 105,
ParentID: 1,
Name: `Orange Juice`,
Category: `Beverages`,
OrderDate: `2010-02-17`,
Units: 261,
UnitPrice: 5.38,
Price: 1404.18,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 2,
ParentID: -1,
Name: `Order 2`,
Category: ``,
OrderDate: `2022-05-27`,
Units: 1831,
UnitPrice: 8.23,
Price: 15062.77,
Delivered: false
}),
new OrdersTreeDataItem(
{
ID: 201,
ParentID: 2,
Name: `Frozen Shrimps`,
Category: `Seafood`,
OrderDate: `2022-05-27`,
Units: 120,
UnitPrice: 20.45,
Price: 2454,
Delivered: false
}),
new OrdersTreeDataItem(
{
ID: 202,
ParentID: 2,
Name: `Ice Tea`,
Category: `Beverages`,
OrderDate: `2022-05-27`,
Units: 840,
UnitPrice: 7,
Price: 5880,
Delivered: false
}),
new OrdersTreeDataItem(
{
ID: 203,
ParentID: 2,
Name: `Fresh Cheese`,
Category: `Diary`,
OrderDate: `2022-05-27`,
Units: 267,
UnitPrice: 16.55,
Price: 4418.85,
Delivered: false
}),
new OrdersTreeDataItem(
{
ID: 204,
ParentID: 2,
Name: `Carrots`,
Category: `Vegetables`,
OrderDate: `2022-05-27`,
Units: 360,
UnitPrice: 2.77,
Price: 997.2,
Delivered: false
}),
new OrdersTreeDataItem(
{
ID: 205,
ParentID: 2,
Name: `Apple Juice`,
Category: `Beverages`,
OrderDate: `2022-05-27`,
Units: 244,
UnitPrice: 5.38,
Price: 1312.72,
Delivered: false
}),
new OrdersTreeDataItem(
{
ID: 3,
ParentID: -1,
Name: `Order 3`,
Category: ``,
OrderDate: `2022-08-04`,
Units: 1972,
UnitPrice: 3.47,
Price: 6849.18,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 301,
ParentID: 3,
Name: `Skimmed Milk 1L`,
Category: `Diary`,
OrderDate: `2022-08-04`,
Units: 1028,
UnitPrice: 3.56,
Price: 3659.68,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 302,
ParentID: 3,
Name: `Bananas 5 Pack`,
Category: `Fruit`,
OrderDate: `2022-08-04`,
Units: 370,
UnitPrice: 6.36,
Price: 2353.2,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 303,
ParentID: 3,
Name: `Cauliflower`,
Category: `Vegetables`,
OrderDate: `2022-08-04`,
Units: 283,
UnitPrice: 0.95,
Price: 268.85,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 304,
ParentID: 3,
Name: `White Chocolate Cookies`,
Category: `Cookies`,
OrderDate: `2022-08-04`,
Units: 291,
UnitPrice: 1.95,
Price: 567.45,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 4,
ParentID: -1,
Name: `Order 4`,
Category: ``,
OrderDate: `2023-01-04`,
Units: 1065,
UnitPrice: 5.56,
Price: 5923.5,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 401,
ParentID: 4,
Name: `Mini Milk Chocolate Cookie Bites`,
Category: `Cookies`,
OrderDate: `2023-01-04`,
Units: 68,
UnitPrice: 2.25,
Price: 153,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 402,
ParentID: 4,
Name: `Wild Salmon Fillets`,
Category: `Seafood`,
OrderDate: `2023-01-04`,
Units: 320,
UnitPrice: 16.15,
Price: 5168,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 403,
ParentID: 4,
Name: `Diet Lemonade`,
Category: `Beverages`,
OrderDate: `2023-01-04`,
Units: 437,
UnitPrice: 0.5,
Price: 218.5,
Delivered: true
}),
new OrdersTreeDataItem(
{
ID: 404,
ParentID: 4,
Name: `Potatoes`,
Category: `Vegetables`,
OrderDate: `2023-01-04`,
Units: 240,
UnitPrice: 1.6,
Price: 384,
Delivered: true
}),
];
super(...newItems.slice(0));
}
}
}
tsimport { IgcPropertyEditorPanelModule } from 'igniteui-webcomponents-layouts';
import 'igniteui-webcomponents-grids/grids/combined';
import { ComponentRenderer, PropertyEditorPanelDescriptionModule, WebTreeGridDescriptionModule } from 'igniteui-webcomponents-core';
import { IgcPropertyEditorPanelComponent, IgcPropertyEditorPropertyDescriptionComponent } from 'igniteui-webcomponents-layouts';
import { IgcTreeGridComponent, IgcPaginatorComponent, IgcPaginatorResourceStrings } from 'igniteui-webcomponents-grids/grids';
import { OrdersTreeDataItem, OrdersTreeData } from './OrdersTreeData';
import { IgcPropertyEditorPropertyDescriptionChangedEventArgs } from 'igniteui-webcomponents-layouts';
import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import { defineAllComponents } from 'igniteui-webcomponents';
import { ModuleManager } from 'igniteui-webcomponents-core';
defineAllComponents();
import "./index.css";
ModuleManager.register(
IgcPropertyEditorPanelModule
);
export class Sample {
private propertyEditor: IgcPropertyEditorPanelComponent
private sizeEditor: IgcPropertyEditorPropertyDescriptionComponent
private treeGrid: IgcTreeGridComponent
private paginator: IgcPaginatorComponent
private _paginatorResourceStrings1: IgcPaginatorResourceStrings | null = null;
public get paginatorResourceStrings1(): IgcPaginatorResourceStrings {
if (this._paginatorResourceStrings1 == null)
{
var paginatorResourceStrings1: IgcPaginatorResourceStrings = {} as IgcPaginatorResourceStrings;
paginatorResourceStrings1.igx_paginator_label = "Records per page";
this._paginatorResourceStrings1 = paginatorResourceStrings1;
}
return this._paginatorResourceStrings1;
}
private _bind: () => void;
constructor() {
var propertyEditor = this.propertyEditor = document.getElementById('PropertyEditor') as IgcPropertyEditorPanelComponent;
var sizeEditor = this.sizeEditor = document.getElementById('SizeEditor') as IgcPropertyEditorPropertyDescriptionComponent;
this.webTreeGridSetGridSize = this.webTreeGridSetGridSize.bind(this);
var treeGrid = this.treeGrid = document.getElementById('treeGrid') as IgcTreeGridComponent;
var paginator = this.paginator = document.getElementById('paginator') as IgcPaginatorComponent;
this._bind = () => {
propertyEditor.componentRenderer = this.renderer;
propertyEditor.target = this.treeGrid;
sizeEditor.changed = this.webTreeGridSetGridSize;
treeGrid.data = this.ordersTreeData;
paginator.resourceStrings = this.paginatorResourceStrings1;
}
this._bind();
}
private _ordersTreeData: OrdersTreeData = null;
public get ordersTreeData(): OrdersTreeData {
if (this._ordersTreeData == null)
{
this._ordersTreeData = new OrdersTreeData();
}
return this._ordersTreeData;
}
private _componentRenderer: ComponentRenderer = null;
public get renderer(): ComponentRenderer {
if (this._componentRenderer == null) {
this._componentRenderer = new ComponentRenderer();
var context = this._componentRenderer.context;
PropertyEditorPanelDescriptionModule.register(context);
WebTreeGridDescriptionModule.register(context);
}
return this._componentRenderer;
}
public webTreeGridSetGridSize(sender: any, args: IgcPropertyEditorPropertyDescriptionChangedEventArgs): void {
var newVal = (args.newValue as string).toLowerCase();
var grid = document.getElementById("treeGrid");
grid.style.setProperty('--ig-size', `var(--ig-size-${newVal})`);
}
}
new Sample();
ts<!DOCTYPE html>
<html>
<head>
<title>Sample | Ignite UI | Web Components | infragistics</title>
<meta charset="UTF-8" />
<link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
<link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" />
<link rel="stylesheet" href="/src/index.css" type="text/css" />
</head>
<body>
<div id="root">
<div class="container sample ig-typography">
<div class="options vertical">
<igc-property-editor-panel
name="PropertyEditor"
id="PropertyEditor"
description-type="WebTreeGrid"
is-horizontal="true"
is-wrapping-enabled="true">
<igc-property-editor-property-description
name="SizeEditor"
id="SizeEditor"
label="Grid Size:"
value-type="EnumValue"
drop-down-names="Small, Medium, Large"
drop-down-values="Small, Medium, Large">
</igc-property-editor-property-description>
</igc-property-editor-panel>
</div>
<div class="container fill">
<igc-tree-grid
auto-generate="false"
name="treeGrid"
id="treeGrid"
id="treeGrid"
primary-key="ID"
foreign-key="ParentID">
<igc-paginator
name="paginator"
id="paginator"
per-page="10">
</igc-paginator>
<igc-column
field="ID"
header="Order ID">
</igc-column>
<igc-column
field="Name"
header="Order Product">
</igc-column>
<igc-column
field="Category"
header="Category">
</igc-column>
<igc-column
field="Units"
header="Units"
data-type="number">
</igc-column>
<igc-column
field="UnitPrice"
header="Unit Price"
data-type="number">
</igc-column>
<igc-column
field="Price"
header="Price"
data-type="number">
</igc-column>
<igc-column
field="OrderDate"
header="Order Date"
data-type="date">
</igc-column>
<igc-column
field="Delivered"
header="Delivered"
data-type="boolean">
</igc-column>
</igc-tree-grid>
</div>
</div>
</div>
<!-- This script is needed only for parcel and it will be excluded for webpack -->
<% if (false) { %><script src="src/index.ts"></script><% } %>
</body>
</html>html/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */
#treeGrid {
--ig-size: var(--ig-size-medium);
}
css
API References
Additional Resources
- Virtualization and Performance
- Filtering
- Sorting
- Summaries
- Column Moving
- Column Pinning
- Column Resizing
- Selection
Our community is active and always welcoming to new ideas.