新機能: Ignite UI for React 18.3.0 リリース

Infragisticsでは、お客様の開発体験に最適なコンポーネントを提供するよう常に努力しています。また、本日のIgnite UI for React 18.3.0 には、新しいReact Data Grid が含まれています。React Data GridはIgnite UIファミリーの一部であり、Angular、Web Components、およびBlazor Data Gridsと同様に、同じ設計、動作、UX、および機能を共有しています。これにより、開発チームはAngular、Blazor、Web Components、またはReactをシームレスに切り替えることができ、Reactで変化する要件に迅速に対応できるようになります。

Ignite UI for React 18.3.0 リリースでリリースされるすべてのデータ グリッド機能の概要を説明します。React Gridの機能は次のとおりです。

• ヘッダーテンプレート
• セルテンプレート
• データ バインディング
• 複雑なデータバインディング
• 折りたたみ可能な列グループ
• 列の非表示
• 列の並べ替えと移動
• 列の固定
• 列のサイズ変更
• 列のタイプ
• 条件付きスタイル設定
• 表示密度
• 編集
• グリッドセルの編集React
• カスケードコンボ
• 行の追加
• 行編集
• Export to Excel Service
• フィルタリング
• Reactグリッドの高度なフィルタリング
• Excel スタイルのフィルタリング
• グループ化
• ライブデータ/リアルタイム更新
• マスターディテール
• キーボードナビゲーション
• 複数列ヘッダーの概要
• 複数行レイアウト
• Pagination
• リモート・データ操作
• 行アクション
• 行ドラッグ
• 行の固定
• 検索フィルター
• 選択
• セル選択
• 列の選択
• 行の選択
• サイズ
• 仕分け
• 概要
• 仮想化とパフォーマンス
• ツールバー
• テーマ設定

Reactデータグリッド

新しいReact Data Gridコンポーネントは、データを表形式ですばやく簡単に表示するために使用されます。データグリッドは、データ編集、選択、フィルタリング、ソート、グループ化、ピン留め、ページング、テンプレート、列移動、エクスポートなどの機能が満載の最新のグリッドコンポーネントです。Ignite UI for React年に出荷した以前のグリッドと比較して、新しいデータ グリッドには、大幅に多くの機能、豊富な API、組み込みのテーマがあります。

ヘッダーテンプレート

ヘッダーテンプレートは、Ignite UI for ReactIgrGridで列ヘッダーの外観や挙動をカスタマイズできます。

セルテンプレート

セルテンプレートは、Ignite UI for ReactIgrGrid内のセルの外観や挙動をカスタマイズすることを可能にします。

折りたたみ可能な列グループ

Ignite UIのReactグリッドの折りたたみ可能な列グループ機能を使用すると、Reactグリッド内の複数のレベルのネストされた列と列グループをグループ化し、これらのグループを折りたたんだり展開したりしてデータの視覚化とナビゲーションを向上させるオプションを提供することで、列グループを整理および管理できます。

列の非表示

Ignite UI for Reactには列を非表示にするUIが組み込まれており、Reactグリッドツールバーを使用して列の表示状態を変更できます。開発者は、必要に応じてページ内の任意の場所で列非表示UIを柔軟に定義できます。Reactグリッド列の非表示機能は、グリッドのサイズを小さくし、冗長なフィールドをタブで移動する必要をなくしたい場合に特に便利です。

列の並べ替えと移動

Ignite UIのReactグリッド列移動機能を使用すると、列の並べ替えをすばやく簡単に行うことができます。これは、Column Moving API を使用するか、マウスまたはタッチ ジェスチャを使用してヘッダーを別の位置にドラッグ アンド ドロップすることで実行できます。Reactグリッドでは、ピン留めされた列とピン留めされていない列、および複数列ヘッダーに対しても列移動を有効にできます。

列の固定

Ignite UI for Reactのカラムピンニングは、エンドユーザーが特定のカラム順序でカラムをロックすることを可能にします。その結果、横スクロールしながらIgrGridを見ることができます。Reactグリッドには組み込みの列ピン留めUIがあり、IgrGridのツールバーから使って列のピン状態を変更できます。さらに、カスタムUIを定義し、カラムピン機能を使ってカラムのピン状態を変更することもできます。

列のサイズ変更

Ignite UIのReactグリッド列サイズ変更機能を使用すると、ユーザーはグリッドの列の幅を簡単に調整できます。デフォルトでは、ドラッグサイズ変更操作が有効になっている間、一時的なサイズ変更インジケーターが表示されます。いくつかのサイズ変更オプションを使用できます – ピクセル/パーセンテージでの列のサイズ変更、列のサイズ変更の制限、ダブルクリックで列のサイズを自動調整、初期化時に列のサイズを自動調整します。

列のタイプ

Ignite UI for ReactIgrGridはカラムデータ型のデフォルト処理を提供し、それに基づいてデフォルトテンプレートと編集テンプレートの外観が確認されます。サポートされるカラムデータ型:

• Number
• Siring
• Date
• Boolean
• 通貨
• Percent 

条件付きスタイル設定

Ignite UIのReactグリッドコンポーネントを使用すると、行レベルまたはセルレベルでカスタムスタイルを設定できます。グリッド条件付きスタイル設定機能は、特定の基準を満たすデータを視覚的に強調または強調表示し、ユーザーがグリッド内の重要な情報や傾向を簡単に識別できるようにします。

表示密度

Ignite UIのReactグリッド表示密度を使用すると、ユーザーはグリッド内のデータの間隔とレイアウトを制御できます。密度を変更することで、大量のコンテンツを操作する際のユーザーエクスペリエンスを大幅に向上させることができます。次の 3 つのディスプレイ密度オプションから選択できます。

• 居心地
• 快適
• コンパクト

編集

Ignite UIのReactグリッド セル編集機能を使用すると、レコードの作成、更新、削除などのデータ操作を簡単に実行できます。React Grid には、これらの操作の実行方法をカスタマイズできる強力な公開 API が用意されています。データ操作フェーズは次のとおりです。

• グリッドセルの編集React

Ignite UIのReactグリッドセル編集機能は、Reactグリッドコンポーネント内の個々のセルのコンテンツの優れたデータ操作機能を提供し、CRUD操作Reactための強力なAPIが付属しています。これは、スプレッドシート、データテーブル、データグリッドなどのアプリの基本的な機能であり、ユーザーは特定のセル内のデータを追加、編集、または更新できます。デフォルトでは、Ignite UI for React内のグリッドはセルの編集で使用されます。デフォルトのセル編集テンプレートにより、列のデータタイプ「フォームの上部」に基づいて異なるエディターがあります。さらに、データ更新アクション用の独自のカスタムテンプレートを定義し、変更のコミットと破棄のデフォルトの動作を上書きできます。

• カスケードコンボ

Ignite UIの編集機能では、カスケードコンボボックスコンポーネントを使用できます。先行するコンボボックスで値を選択すると、ユーザーは次のコンボボックスコンポーネント内で選択に関連するデータのみReact受け取ることになります。

• 行の追加

​IgrGridは、インライン行加算によるデータ操作を便利に行える方法と、React CRUD操作のための強力なAPIを提供します。グリッドのテンプレートで編集アクションを有効にしたIgrActionStripコンポーネントを追加し、行にカーソルを合わせて提供されたボタンを使い、「ALT" + +"」を押して行を生成します。UIを追加する行をスポーンさせます。

• 行編集

​IgrGridはインライン編集を通じてデータ操作を便利に行える方法と、React CRUD操作のための強力なAPIを提供します。行をクリックしてEnterキーを押すか、変更が必要な行をマウスでダブルクリックするだけでも構いません。

• バッチ編集(近日公開予定)

Export to Excel Service

Ignite UIのReact Grid Excel ExporterサービスはExcelへのエクスポートが可能です。データエクスポート機能はExcelExporterServiceclassにカプセル化され、データはMS Excelのテーブル形式でエクスポートされます。この形式により、フィルタリングやソートなどの機能が可能になります。これを行うには、グリッドを簡単にエクスポートするためにExportメソッド ofExcelExporterServiceを呼び出し、Gridコンポーネントを最初の引数として渡す必要があります。

フィルタリング

Ignite UIのReactグリッドフィルタリングは、特定の条件や条件に基づいてデータを選択的に表示または隠すことができる機能です。バウンドされたデータコンテナがあり、そこからはIgrGridComponentが豊富なフィルタリングAPIとすべてのフィルタリング機能を提供します。ここで利用可能なフィルタリングタイプは3つあります:

• Reactグリッドの高度なフィルタリング

Ignite UIのReactグリッドの高度なフィルタリングを使用すると、Reactグリッドのすべての列にフィルタリング条件を使用してさまざまなグループを作成できるダイアログを提供することで、データを操作できます。

• Excel スタイルのフィルタリング

React Grid は、Excel に似たフィルタリング UI を提供する Excel スタイルのフィルタリング機能を公開します。これにより、大規模なデータセットを操作するプロセスが簡素化されます。主なアイデアは、無関係なエントリを排除しながら、最も関連性の高いデータをフィルタリングできるようにすることです。

グループ化

ReactグリッドのグループバイIgnite UI for React動作は、列の値に基づいてグループ化されたデータ行を作成します。グループByIgrGridでは、階層構造でグループを可視化できます。グループ化されたデータ行は展開または折りたたみ可能で、UIやAPIを通じてグループ化の順序を変更することができます。Row Selectを有効にすると、グループ行の最も左側の領域に「Group By row」セレクターが表示されます。rowSelectionプロパティが単一に設定されている場合、チェックボックスは無効化され、選択が置かれたグループを示すだけのインサインとして機能します。もし therowSelection propertyが複数に設定されている場合、行ごとにグループセレクターをクリックすると、そのグループに属するすべてのレコードが選択されます。

ライブデータ/リアルタイム更新

グリッド内のIgnite UI for Reactライブデータ更新機能は、グリッド内に表示されるデータのリアルタイムまたはほぼリアルタイムの更新を可能にします。これは、株式市場のトラッカーやライブスポーツスコア、IoT(モノのインターネット)ダッシュボードなど、データが常に変化するアプリで非常に有用です。IgrGrid秒間に数千件の更新を処理しつつ、ユーザーとのやり取りにも対応可能です。

Master-Detail

​IgrGridコンポーネントは、特定の行の内容を展開・折りたたむことで追加詳細を表示する詳細テンプレートを指定することをサポートしています。指定すれば、各レコードはマスターとして機能し、拡張すると現在のレコードのコンテキストデータを含むカスタマイズ可能な詳細テンプレートが表示されます。

このモードは、マスター/ディテール スタイル データを階層構造で表示する必要がある場合に便利です。

キーボードナビゲーション

Ignite UIのReactグリッドキーボードナビゲーション機能は、ユーザーに多様なキーボード操作を提供します。これによりアクセスしやすさが向上しIgrGridセル、行、列ヘッダー、ツールバー、フッターなどのあらゆる要素をユーザーがナビゲートできるようになります。この機能はデフォルトで有効化されており、開発者はデフォルトの動作を簡単に上書きすることができます。

ナビゲーションがW3Cのアクセシビリティ基準に準拠し、使いやすいように縮小されましたIgrGrid。

現在、IgrGridは以下のタブストップを導入しています:

• GroupBy または Toolbar 領域(有効な場合)。
• Grid header.
• Grid body.
• Column summaries (if enabled).
• グリッドペジネータ(有効な場合)。

複数列ヘッダーの概要

Ignite UIのReactグリッドマルチカラムヘッダー機能では、共通のマルチヘッダーの下にカラムを配置してグループ化できます。各多列ヘッダーグループは、他のグループや列の組み合わせを表すIgrGridもありました。この機能は、横スクロールが煩雑な大規模なデータセットを扱う際に特に有用です

Multi-row Layout

Ignite UIの「Reactグリッド多行レイアウト」機能は、IgrGridのレンダリング機能を拡張します。この機能は、単一のデータレコードを複数の可視行に分割することを可能にします。

Pagination

Ignite UIのReactグリッドページネーション機能は、大量のデータを類似した内容のページの連続に分割するために使われます。グリッドページ付けReactユーザー体験とデータインタラクションを向上させますIgrGridページ化は、グリッドツリーに投影される別のコンポーネントで、カラムを追加するのと同様にaIgrPaginator tagを定義して設定できます。Reactテーブルと同様に、Reactグリッドのページはカスタムページのテンプレートをサポートしています。

リモート・データ操作

デフォルトでは、IgrGridはデータ操作を行うために独自のロジックを使用します。

これらの作業は遠隔で実行し、特定の入力やイベントを利用して得られたデータをIgrGrid​IgrGridに伝えることができます。

行アクション

Ignite UI for ReactのコンポーネントIgrGridCRUDを行/セルコンポーネントや行のピンニングにIgrActionStrip利用・利用する機能を提供します。アクションストリップコンポーネントはこれらの操作のためにあらかじめ定義されたUIコントロールをホストできます。

行ドラッグ

Ignite UI for ReactIgrGrid行ドラッグはrootIgrGrid componentで初期化され、rowDraggableinputから設定可能です。行ドラッグを有効にすると、ユーザーは行のドラッグを開始できる行ドラッグハンドルを利用できます。

行の固定

ReactIgrGridでは、グリッドの上または下に1行または複数行をピン留めできます。行ピンは、エンドユーザーが特定の順序で行をピン留めし、垂直スクロールしても常に見える特別な領域に複製できますIgrGrid。Material UI Gridには組み込みの行ピン留めUIがあり、コンテキストIgrActionStripofIgrGridでコンポーネントを初期化することで有効になります。さらに、Row Pinning APIを使ってカスタムUIを定義し、行のピン状態を変更することもできます。

検索フィルター

Reactグリッドサーチは、データ収集の中から値を見つけるプロセスを可能にします。この機能の設定を簡単にし、検索入力ボックス、ボタン、キーボードナビゲーションなどの便利な機能で実装することで、さらに優れたユーザー体験を実現しています。ブラウザはネイティブにコンテンツ検索機能を提供していますが、ほとんどの場合、IgrGrid表示外の列や行を仮想化しています。この場合、ネイティブグリッドサーチは仮想化されたセルのデータ検索を行えません。なぜなら、それらはDOMの一部でないためです。Ignite UI for React Materialのテーブルベースのグリッドを拡張し、仮想化されたコンテンツから検索できるAPIを導入しましたIgrGrid。

選択

Ignite UI for ReactIgrGridを使えば、さまざまなイベントやリッチAPI、あるいはシングルセレクトのような単純なマウス操作で簡単にデータを選択できます。

セル選択 

Ignite UIのReactグリッド セル選択は、豊富なデータ選択機能を有効にし、グリッド コンポーネントで強力な API を提供します。React Grid は、次の 3 つの選択モードをサポートしています。

–グリッド複数セル選択

– Grid Single Selection

–グリッド [選択なし]

列の選択 

Ignite UIの選択機能は、ワンクリックで列全体を選択してハイライトする簡略かつExcelのような方法を提供します。入力columnSelectionから有効化できます。豊富なAPIのおかげで、選択状態の操作、選択された分数からのデータ抽出、データ解析操作、可視化が容易に行えます。

行の選択 

React Gridの行選択機能により、ユーザーは1行または複数の行をインタラクティブに選択、ハイライト、または選択解除できます。選択モードは複数ありますIgrGrid:ノンセレクション、複数セレクション、シングルセレクション

Sizing

React Gridのサイズ調整機能は、レスポンシブで使いやすいグリッドインターフェースを作成する上で重要な要素です。Reactグリッドサイズ機能により、ユーザーはグリッドのwidthおよびheightを調整し、異なる画面サイズ、コンテンツ、ユーザーの好みに合わせて調整できます。IgrGridの枠やパッドサイズについては、幅・高さのサイズ計算、つまりボーダーボックスのサイズ測定に反映されます。すべての状況で適用されます。

仕分け

Reactグリッドのデータソート機能はカラム単位で有効化されており、ソート可能なカラムとソート不可のカラムを混IgrGrid持つことができます。Reactソート操作を行うことで、指定された条件に基づいてレコードの表示順を変更することができます。

概要

React Gridのサマリー機能は、グループフッターとして各列レベルで機能します。Reactグリッドサマリーは強力な機能で、ユーザーがカラム内のデータの種類やカスタムテンプレートを実装することで、別のコンテナでカラム情報を閲覧できるようにしています。これはカラム内のデータの種類やカスタムテンプレートを実装することでIgrGrid。

仮想化とパフォーマンス

Ignite UI for Reactでは、theIgrGrid controlはそのコンテンツを垂直・水平の両方に仮想化します。

ツールバー

Ignite UI for ReactツールバーはReactグリッド内のUI操作のためのコンテナです。ReactツールバーはReactコンポーネントの上部、すなわちIgrGrid水平サイズに合っています。ツールバーコンテナは任意のカスタムコンテンツやあらかじめ定義されたUIコントロールセットをホストできます。Reactグリッドのデフォルトセットは以下の通りです:

• 列の非表示
• 列の固定
• Excelのエクスポート
• 高度なフィルタリング

ツールバーと事前定義された UI コンポーネントは、Reactイベントをサポートし、開発者向けに API を公開します。

テーマ設定

当社のReactグリッドは、ブランドアイデンティティに合わせて簡単にカスタマイズできます。定義済みのテーマとパレットに加えて、一連の CSS カスタム プロパティを使用して、データ グリッドの外観をさらにカスタマイズできます。

ラップ

私たちは、パフォーマンスを向上させ、安定性の向上を提供するために、継続的なスケジュールで新機能をリリースし続けており、最高のReact UIツールキットと関連する洞察を提供して、より多くのノウハウを提供することに取り組んでいます。

このリリースの各部分の詳細がありますので、こちらでご確認いただけます。

• Ignite UI for React – GitHub

詳細については、以下をご覧ください。

• Discordチャンネル
• GitHub ディスカッション
• README
• YouTubeチャンネル
• Twitter

最後に、私たちのコントロールで何かクールなものを作るときは、必ずお知らせください。