Angular 계층적 그리드 페이징

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. Hierarchical 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 Hierarchical Grid supports template for custom pages.

Angular Pagination Example

The following example represents Hierarchical 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 Hierarchical 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 Hierarchical Grid to enable paging:

<igx-hierarchical-grid #hierarchicalGrid [data]="data" [height]="'500px'" [width]="'100%'">
    <igx-paginator [perPage]="10">
    </igx-paginator>
</igx-hierarchical-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-hierarchical-grid component in the example below, but you can use it with any other component in case paging functionality is needed.

<igx-hierarchical-grid>
    <igx-column *ngFor="let c of hColumns" [field]="c.field">
    </igx-column>
    <igx-row-island [key]="'childData'" [autoGenerate]="true">
        <igx-row-island [key]="'childData'" [autoGenerate]="true">
            <igx-paginator *igxPaginator></igx-paginator>
        </igx-row-island>
        <igx-paginator *igxPaginator></igx-paginator>
    </igx-row-island>
    <igx-row-island [key]="'childData2'" [autoGenerate]="true">
        <igx-paginator *igxPaginator></igx-paginator>
    </igx-row-island>

    <igx-paginator></igx-paginator>
</igx-hierarchical-grid>

Paginator Configuration within child grids

IgxHierarchicalGrid의 하위 그리드가 구현되는 방식과 DI 범위 작동 방식에 대한 특정 제한으로 인해 igx-row-island 태그 내부에 페이지네이터 구성 요소를 정의할 때 항상 페이지네이터 자체에서 IgxPaginator 지시어를 사용해야 합니다. 이렇게 하면 하위 그리드에 참조로 올바른 페이지네이터 인스턴스가 있는지 확인됩니다.

<igx-hierarchical-grid>
    ...
    <igx-row-island>
        ...
        <igx-grid-toolbar *igxPaginator>
           ...
        </igx-grid-toolbar>
    </igx-row-island>
    ...
</igx-hierarchical-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 Hierarchical 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';

Following the simplest approach, we create a new theme that extends the paginator-theme and accepts the $text-color, $background-color and the $border-color parameters.

$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

Instead of hardcoding the color values like we just did, we can achieve greater flexibility in terms of colors by using the palette and color functions. Please refer to Palettes topic for detailed guidance on how to use them.

마지막 단계는 각각 해당 테마가 있는 구성 요소 믹스인을 포함하는 것입니다.

@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

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.