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

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

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

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

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

使用方法

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

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

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

API リファレンス

Our community is active and always welcoming to new ideas.

• Ignite UI for Web Components Forums
• Ignite UI for Web Components GitHub