React グリッド / テーブルのページネーション

    表形式のテーブル UI は、多くの Web 製品で一般的に使用されています。表形式のテーブル UI を最初から作成するのは簡単ではありませんが、Ignite UI for React グリッドを使用すると、テーブル UI の作成が簡単になり、大量のローカル データまたはリモート データを React グリッドにバインドするのも簡単です。グリッドはデフォルトで仮想化されているため、大きなデータ セットを表示するためにテーブルのページネーションを含める必要はありません。これは主に、UI で複雑なデータを整理する最も効率的な方法のために使用されます。テーブルのページネーションを使用すると、データを設定された行数で表示できるため、ユーザーは実際にスクロールバーを必要とせずに、データをスクロールできます。テーブルのページネーション UI には通常、現在のページ、合計ページ、クリック可能な [前へ] と [次へ] の矢印/ボタンなどが含まれ、ユーザーは次のようにページをめくることができます:

    行のページングは、IsPagerVisible プロパティを設定することにより、Ignite UI for React データ テーブル / データ グリッド内で有効になります。さらに、pageSize を設定することで、表示される行の最大数を制限できます。

    React 行のページングの例

    概要

    UX の観点から、テーブルのページネーションには長所と短所があります。UX Matters の最近の記事による、テーブルのページネーションの良い面と悪い面の分類です:

    テーブルのページネーションの利点:

    • ユーザーの選択を制限します。
    • クリック数は測定可能です。

    テーブルのページネーションの欠点:

    • ユーザーはまだスクロールする必要があります。
    • ページャーの作業と動作はサイトごとに異なります。
    • UI コントロールが多すぎると、混乱する可能性があります。
    • ユーザーは、ページネーションが遅くて面倒だと考えています。
    • ユーザーはページネーション コントロールに気付かない場合があります。
    • ページの読み込みが遅い場合があります。
    • アクションがページに適用されるのか、データ セット全体に適用されるのか、ユーザーは混乱します。

    Ignite UI React グリッドを使用すると、開発者はページングを追加できますが、グリッドにはデフォルトで無限スクロールが組み込まれているため、グリッドにページャーを追加するのではなく、無限 (または仮想) スクロールをお勧めします。デフォルトのユーザー エクスペリエンスとして仮想化された無限スクロールを使用すると、次のことが可能になります:

    • スクロール操作によってページングされるデータの量を制御しながら、最高のパフォーマンスを実現。
    • すべてのコンテンツをスクロールするための自然なアプローチ。
    • すべてのインタラクションはエンド ユーザーに明確です。
    • モバイル UX での自然なインタラクションにマップします。

    React グリッド/ページの同期

    ユーザーがソートやグループ化などのグリッドを操作し、グリッドで React Pager を有効にした場合、次の関数を使用して、React ページネーション データが React テーブル表示と同期されるようにする必要があります。

    • applySorts
    • applyGroups
    • applyFilters

    API リファレンス