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

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

    React Tree Grid ページネーションの例

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

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    このサンプルが気に入りましたか? 完全な Ignite UI for Reactツールキットにアクセスして、すばやく独自のアプリの作成を開始します。無料でダウンロードできます。

    .gridSize {
    --ig-size: var(--ig-size-small);
}
css
    <IgrTreeGrid className="gridSize" height="500px" width="100%">
    <IgrPaginator key="paginator" perPage="10">
    </IgrPaginator>
</IgrTreeGrid>
tsx

    使用方法

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

    const selectOptions = [5, 15, 20, 50];

<IgrTreeGrid className="gridSize">
    <IgrPaginator key="paginator" perPage={10} page={1} selectOptions={selectOptions}>
    </IgrPaginator>
</IgrTreeGrid>
tsx

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

    EXAMPLE
    DATA
    TSX
    CSS
    Edit in:

    Ignite UI for React | CTA Banner

    API リファレンス

    その他のリソース

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