UXとパフォーマンスを向上させるためのトップ5のReactグリッド機能

UXとパフォーマンスを向上させるためのトップ5のReactグリッド機能

Reactデータグリッドを選択する際には、パフォーマンスと価格に加えて、実際のユーザーがそれをどのように操作するか、アプリの要件とユーザーの期待に一致させるために必要な機能も考慮する必要があります。高度なフィルタリング、状態永続性、キーボードナビゲーション、Excelへのエクスポートなどの機能は、単に必要というわけではありません。

8min read

Reactは、アプリケーションを構築するために世界中の開発者の間で最も使用されている Web フレームワークの 1 つです。現在までに、130万以上のWebサイトが利用しており、このテクノロジーを活用するチームやReactプログラマーの数は日々指数関数的に増加し続けています。理由は：

  • そのコンポーネントベースのアーキテクチャ
  • Flexibility
  • そして、ライブラリの豊富なエコシステム

All of this makes building interactive user interfaces fast and efficient. One essential UI component that developers often need is the React data grid, which is a robust table-like structure for displaying and manipulating data. To create the best apps with comprehensive grids, however, developers require comprehensive data grid features. But what are the top 5 React Grid features to look for in your React library?

This article will examine Ignite UI for React Grid and provide a list of the best React features and their corresponding use cases. So, here’s the functionality you need.

高度なフィルタリング – 複雑なフィルタ条件用

​Advanced Filtering は、Ignite UI for Reactやオペランドを使用してさまざまな条件で複雑なフィルタリング クエリを作成する機能を提供するため、テーブルの最高の機能のReactに挙げました。

フィルタリング条件とグループを作成したら、データをフィルタリングするために必要なのは、[適用]ボタンをクリックすることだけです。詳細フィルターを変更したが、変更を保持したくない場合は、[キャンセル] ボタンをクリックします。[フィルターのクリア] ボタンをクリックして、高度なフィルターをクリアすることもできます。

ユースケース

  • 定義された期間に発生した特定の値を超えるすべての売上を検索します。
  • ユーザーが特定の場所にある特定の製品の在庫を検索できるパネル。
  • 多数のトランザクションをフィルタリングする財務ダッシュボード。

これは、特定の基準を満たす特定の時点を過ぎたすべての日付をフィルタリングする方法に関する短いビデオです。

最高のReactグリッド機能の中での高度なフィルタリング

高度なフィルタリングを有効にするにはどうすればよいですか?

Reactグリッド機能の 1 つとして高度なフィルタリングが必要で、有効にする場合は、allowAdvancedFiltering入力プロパティを true に設定する必要があります。

<IgrGrid data={nwindData} autoGenerate={false} ref={gridRef} allowAdvancedFiltering={true}>

    <IgrGridToolbar></IgrGridToolbar>

</IgrGrid>

高度なフィルター処理では、advancedFilteringExpressionsTree入力プロパティに格納されるfilteringExpressionsTreeが生成されます。advancedFilteringExpressionsTreeプロパティを使用して、高度なフィルター処理の初期状態を設定できます。

const filteringTree: IgrFilteringExpressionsTree = {

    operator: FilteringLogic.And,

    filteringOperands: [

        {

            fieldName: "ProductID",

            condition: new IgrNumberFilteringOperand().condition("doesNotEqual"),

            searchVal: 1,

            ignoreCase: true,

        },

        {

            fieldName: "ProductName",

            conditionName: "startsWith",

            searchVal: "Ch",

            ignoreCase: true,

        }

    ]

};

<IgrGrid data={data} allowFiltering={true} advancedFilteringExpressionsTree={filteringTree}>

    <IgrGridToolbar>

        <IgrGridToolbarActions>

            <IgrGridToolbarAdvancedFiltering></IgrGridToolbarAdvancedFiltering>

        </IgrGridToolbarActions>

    </IgrGridToolbar>

    <IgrColumn field="ProductID" filterable={true} dataType="number"></IgrColumn>

    <IgrColumn field="ProductName" dataType="string" filterable={true}></IgrColumn>

状態の永続性 – グリッドビューの保存と復元

グリッドの状態を簡単に保存して復元しますか?グリッドの状態永続化機能を使用しますIgnite UI for React。適用した変更は保存され、ページがリロードされた後に復元されます。IgrGridState がReact IgrGrid に適用されると、GetState、GetStateAsString、ApplyState、および ApplyStateFromString メソッドが公開されます。これにより、あらゆるシナリオで状態の永続化を実現できます。これは、データの表示方法に関してユーザーが一貫性とカスタマイズを必要とするアプリに最適であるため、グリッド機能Reactトップ 5 に入っています。

ユースケース

  • 並べ替え、列のサイズ変更、フィルターの適用、および自動的に保存できる設定によるカスタマイズが必要なグリッドレイアウト用。
  • ユーザーが再度ログインした後も、フィルタリングしてカスタマイズされたタスクビューを同じままにしたいタスク管理アプリ。
  • ユーザーが経費レコードまたは定義された予算の特定の列構成を保存できる財務チームのレポートダッシュボード。
Reactの状態永続化サンプル

状態の永続化を有効にするには?

<IgrGrid>

    <IgrGridState ref={gridStateRef}></IgrGridState>

</IgrGrid>

// get an `IgrGridStateInfo` object, containing all features original state objects, as returned by the grid public API

const state: IgrGridStateInfo = gridStateRef.current.getState([]);

// get all features` state in a serialized JSON string

const stateString: string = gridStateRef.current.getStateAsString([]);

// get the sorting and filtering expressions

const sortingFilteringStates: IgrGridStateInfo = gridStateRef.current.getState(['sorting', 'filtering']);

キーボード ナビゲーション – 生産性とアクセシビリティを向上させるためのショートカット

データ量の多いReactアプリに関しては、キーボード ナビゲーションは、より高速なデータ入力と編集を可能にし、他のグリッド機能との対話にも使用されるため、グリッド機能React最も効率的なものの 1 つです。

Reactキーボード ナビゲーション機能は、並べ替えやグループ化のオプションなど、さまざまなキーボード操作をユーザーに提供します。これにより、グリッドのアクセシビリティが向上し、内部のあらゆるタイプの要素 (セル、行、列ヘッダー、ツールバー、フッターなど) をシームレスに移動できるようになります。Ignite UI for React Grid では、この機能はデフォルトで有効になっており、デフォルトの動作を簡単に上書きできます。

Reactグリッド機能とキーボードナビゲーション

ユースケース

  • ユーザーがチケットを迅速に処理する必要があるカスタマー サポート CRM の場合。
  • キーボード コマンドに依存してグリッド コンテンツをナビゲートするスクリーン リーダー ユーザーが使用するアクセシビリティ重視のアプリ。
  • キーボードだけで大量のデータを追加できるスプレッドシート形式の財務ツール。

さらに、ユーザーは組み込みイベントを利用してナビゲーション機能の多くをオーバーライドできるため、アプリのニーズに合わせてエクスペリエンスをより厳密に調整できます。

キーボードナビゲーションをカスタマイズする方法は?

<IgrGrid id="grid1" primaryKey="ProductID" onGridKeydown={customKeydown}>

</IgrGrid>

const customKeydown = (eventArgs: IgrGridKeydownEventArgs) => {

  const args = eventArgs.detail;

  const target= args.target;

  const evt = args.event;

  const type = args.targetType;

  if (type === 'dataCell' && target.editMode && evt.key.toLowerCase() === 'tab') {

      // 1. USER INPUT VALIDATION ON TAB

  }

  if (type === 'dataCell' && evt.key.toLowerCase() === 'enter') {

      // 2. CUSTOM NAVIGATION ON ENTER KEY PRESS

  }

}

Excelへのエクスポート – データの共有と分析

ReactグリッドのExcel にエクスポート機能を使用すると、グリッド データを Excel に直接すばやくエクスポートできます。この形式により、アプリの外部でのデータのフィルタリング、並べ替え、共有などのReact機能が可能になります。Ignite UI for Reactを使用する場合、データエクスポート機能はExcelExporterServiceクラスにカプセル化され、データはMS Excelテーブル形式でエクスポートされます。これを行う場合は、ExcelExporterService の Export メソッドを呼び出し、グリッドを簡単にエクスポートするために最初の引数として IgrGrid コンポーネントを渡す必要があります。

グリッド機能のトップReactの Excel へのエクスポート

ユースケース

  • ワンクリックでチームまたは関係者間でタスクの進捗状況を共有し、すべてのフィルターを保持します。
  • チーム会議のレポートを準備する。
  • マネージャーがフィルター処理された販売データをエクスポートする販売ダッシュボードの場合。

How to Export Grid with Frozen Column Headers?

function exportEventFreezeHeaders(args: IgrExporterEventArgs) {

    args.detail.options.freezeHeaders = true;

  }

<IgrGridToolbar>

  <IgrGridToolbarActions>

    <IgrGridToolbarExporter onExportStarted={exportEventFreezeHeaders}></IgrGridToolbarExporter>

  </IgrGridToolbarActions>

</IgrGridToolbar>

ピボットグリッド – 複雑な分析の簡素化

React Pivot Grid

​Ignite UI for Reactピボット グリッドを使用すると、ピボット テーブルにデータを表示できるため、ユーザーは提供されたデータセットに対して複雑な分析を実行できます。これは正確には機能ではありませんが、ユーザーが大量のデータを整理、要約、フィルタリングできるようにするために構築された完全なコンポーネントであり、後でクロステーブル形式で表示できます。行ディメンション、列ディメンション、集計、フィルターなどの主要なReactグリッド機能があります。

ユースケース

  • ​Revealスタイルのツール、または別のツールにエクスポートしたり SQL クエリを記述したりすることなく、アプリ内で直接データをスライスおよびダイシングする必要があるデータ アナリスト向けのカスタム データ ダッシュボードの場合。
  • 多次元ピボットテーブル構造でデータを構成および表示し、患者レコードを分析できる病院管理ダッシュボード。
  • カテゴリや場所などごとに在庫レベルをピボットする小売在庫アプリ。

ピボットグリッドを有効にする方法は?

基本的なピボット構成を次に示します。

const pivotConfiguration1: IgrPivotConfiguration = {

    columns: [

        new IgrPivotDateDimension({

            enabled: true,

            memberName: "Date",

        })

    ],

    rows: [

        {

            enabled: true,

            memberName: "SellerCity"

        },

        {

            enabled: true,

            memberName: "ProductName"

        }

    ],

    filters: [

        {

            enabled: true,

            memberName: "SellerName"

        }

    ],

    values: [

        {

            member: "ProductUnitPrice",

            displayName: "Amount of Sale",

            dataType: "currency",

            enabled: true,

            aggregate: {

                    aggregatorName: "SUM",

                    key: "SUM",

                    label: "Sum of Sale",

                }

        }

    ]

};

この構成では、各ディメンショングループの値を合計する 1 つの行、1 列、および 1 つの集計が定義されます。メンバーは、提供されたデータソースで使用可能なフィールドに一致します。

public data = [
[
    {
        ProductName: `Clothing`,
        ProductUnitPrice: 12.8,
        SellerName: `Stanley Brooker`,
        SellerCity: `Seattle`,
        Date: `2007-01-01T00:00:00`,
        Value: 94.4,
        NumberOfUnits: 282
    },

];

まとめ

​Reactデータ グリッドを選択するときは、パフォーマンスと価格に加えて、実際のユーザーがそれをどのように操作するか、アプリの要件とユーザーの期待に一致させるために必要な機能も考慮する必要があります。高度なフィルタリング、状態の永続性、キーボード ナビゲーション、Excel へのエクスポートなどの機能は、単なる必要ではありません。

これらは、単純なアプリケーションと複雑なアプリケーションの両方のさまざまなシナリオで、開発者の生産性の向上、ユーザー エクスペリエンスの向上、カスタマイズ性、スケーラブルなデータ管理を保証します。また、Pivot Grid の機能と組み合わせることで、これらすべてを将来にわたってアプリに備え、クリーンなコードを維持することができるため、Reactプロジェクトを簡単に進化させることができます。

React
デモを予約