Web Components Grid ページネーションの概要

    Web Components Grid の Ignite UI for Web Components ページネーション機能は、大量のデータセットを類似したコンテンツを持つ一連のページに分割するために使用されます。React グリッドのページネーションにより、ユーザー エクスペリエンスとデータ操作が向上します。IgcGridComponent ページネーションは、列の追加と同様に、IgcPaginator タグを定義することにより、グリッド ツリーに投影された別のコンポーネントを介して構成できます。他の Web Components テーブルと同様に、Web Components Grid のページネーションはカスタム ページのテンプレートをサポートしています。

    Web Components Grid ページネーションの例

    次の例は IgcGridComponent のページネーションを表し、ページごとの項目のオプションの使用法とページングを有効にする方法を公開します。ユーザーは、[最後のページに移動] ボタンと [最初のページに移動] ボタンを使用して IgcGridComponent ページをすばやく移動することもできます。

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

    グループ化によるページング

    グループ行は、データ行とともにページング プロセスに関係します。それらは各ページのページ サイズにカウントされます。折りたたまれた行はページング プロセスに含まれません。

    ページングとグループ化の統合については、グループ化のトピックで説明しています。

    使用方法

    以下の例では、IgcPaginator コンポーネントを IgcGridComponent コンポーネントと一緒に使用していますが、ページング機能が必要な場合は、他のコンポーネントと一緒に使用できます。

    <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;
    }
    

    ページネーター コンポーネントのデモ

    API リファレンス

    その他のリソース

    コミュニティに参加して新しいアイデアをご提案ください。