Web Components 트리 그리드 페이지 번호 개요

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 IgcPaginatorComponent 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.

.gridSize {
    --ig-size: var(--ig-size-small);
}

<igc-tree-grid id="grid" class="gridSize" height="500px" width="100%" >
    <igc-paginator per-page="10">
    </igc-paginator>
</igc-tree-grid>

Usage

The IgcPaginatorComponent 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>

constructor() {
    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;
}

Paginator Component Demo

API References

Additional Resources

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