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

    The Ignite UI for Web Components Pagination feature in Web Components 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. IgcGridComponent 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 Grid supports template for custom pages.

    Web Components Grid Pagination Example

    The following example represents IgcGridComponent pagination and exposes the options usage of items per page and how paging can be enabled. The user can also quickly navigate through the IgcGridComponent pages via "Go to last page" and "Go to first page" buttons.

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

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

    Paging with Group By

    그룹 행은 데이터 행과 함께 페이징 프로세스에 참여합니다. 각 페이지의 페이지 크기에 포함됩니다. 축소된 행은 페이징 프로세스에 포함되지 않습니다.

    페이징과 그룹화 기준 간의 통합은 그룹화 기준 항목에 설명되어 있습니다.

    Usage

    The IgcPaginatorComponent component is used along with the IgcGridComponent component in the example below, but you can use it with any other component in case paging functionality is needed.

    <igc-grid id="grid" className="gridSize">
    <igc-paginator id="paginator" per-page="10">
    </igc-paginator>
</igc-grid>

    constructor() {
    var grid = this.grid = document.getElementById('grid') as IgcGrid;
    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

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