Angular Tree Grid Pagination
Pagination is used to split a large set of data into a sequence of pages that have similar content. Angular table pagination improves user experience and data interaction. Tree Grid pagination is configurable via a separate component projected in the grid tree by defining a igx-paginator tag, similar to adding of a column. As in any Angular Table, the pagination in the Tree Grid supports template for custom pages.
Angular Pagination Example
The following example represents Tree Grid pagination and exposes the options usage of items per page and how paging can be enabled. The user can also quickly navigate through the Tree Grid pages via "Go to last page" and "Go to first page" buttons.
Adding a igx-paginator component will control whether the feature is present, you can enable/disable it by using a simple *ngIf with a toggle property. The perPage input controls the visible records per page. Let’s update our Tree Grid to enable paging:
<igx-tree-grid #treeGrid [data]="data" [height]="'500px'" [width]="'100%'">
<igx-paginator [perPage]="10">
</igx-paginator>
</igx-tree-grid>
본보기:
<igx-paginator #paginator [totalRecords]="20">
<igx-paginator-content>
<div id="numberPager" style="justify-content: center;">
<button [disabled]="paginator.isFirstPage" (click)="paginator.previousPage()" igxButton="flat">
PREV
</button>
<span>
Page {{paginator.page}} of {{paginator.totalPages}}
</span>
<button [disabled]="paginator.isLastPage" (click)="paginator.nextPage()" igxButton="flat">
NEXT
</button>
</div>
</igx-paginator-content>
</igx-paginator>
Usage
The igx-paginator component is used along with the igx-tree-grid component in the example below, but you can use it with any other component in case paging functionality is needed.
<igx-tree-grid #treeGrid [data]="data">
<igx-paginator #paginator [(page)]="treeGrid.page" [totalRecords]="treeGrid.length" [(perPage)]="10"
[selectOptions]="selectOptions">
</igx-paginator>
</igx-tree-grid>
Paginator Component Demo
Remote Paging
Remote paging can be achieved by declaring a service, responsible for data fetching and a component, which will be responsible for the Grid construction and data subscription. For more detailed information, check the Tree Grid Remote Data Operations topic.
스타일링
To get started with styling the paginator, we need to import the index file, where all the theme functions and component mixins live:
@use "igniteui-angular/theming" as *;
// IMPORTANT: Prior to Ignite UI for Angular version 13 use:
// @import '~igniteui-angular/lib/core/styles/themes/index';
가장 간단한 방법을 따라, 우리는 를paginator-theme 확장하고 와$text-color$background-color 매개변수를 수용하는 새로운 테마를 만듭니다.$border-color
$dark-paginator: paginator-theme(
$text-color: #d0ab23;,
$background-color: #231c2c,
$border-color: #d0ab23;
);
As seen, the paginator-theme only controls colors for the paging container, but does not affect the buttons in the pager UI. To style those buttons, let's create a new icon button theme:
$dark-button: icon-button-theme(
$foreground: #d0ab23,
$hover-foreground: #231c2c,
$hover-background: #d0ab23,
$focus-foreground: #231c2c,
$focus-background: #d0ab23,
$disabled-foreground: #9b7829
);
Note
우리가 방금 한 것처럼 색상 값을 하드코딩하는 대신, andpalette 함수를 사용color 해 색상 측면에서 더 큰 유연성을 얻을 수 있습니다. 사용 방법에 대한 자세한 안내는 해당 주제를 참고Palettes 해 주세요.
마지막 단계는 각각 해당 테마가 있는 구성 요소 믹스인을 포함하는 것입니다.
@include css-vars($dark-paginator);
.igx-grid-paginator__pager {
@include css-vars($dark-button);
}
Note
We include the created icon-button-theme within .igx-paginator__pager, so that only the paginator buttons would be styled. Otherwise other icon buttons in the grid would be affected too.
Note
If the component is using an Emulated ViewEncapsulation, it is necessary to penetrate this encapsulation using ::ng-deep in order to style the components which are inside the paging container, like the button:
@include css-vars($dark-paginator);
:host {
igx-paginator {
::ng-deep {
@include css-vars($dark-button);
}
}
}
Demo
API References
Additional Resources
우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.
GitHub