React Grid 仮想化とパフォーマンス

Ignite UI for React の IgrGrid コントロールは水平および垂直方向にコンテンツを仮想化します。

React Grid 仮想化とパフォーマンスの例

仮想化の有効化

IgrGrid は、ビューポートに表示されているデータのみを描画し、ユーザーがスクロール時に表示データを切り替えた際に、DOM 描画およびメモリ使用を最適化します。IgrGrid の width および height のデフォルト値は 100% です。コンテンツが利用可能なスペースにフィットせず、垂直方向または水平方向にスクロールバーが必要な場合に仮想化が有効になります。

ただし、IgrGrid の width または height を明示的に null 値に設定できます。つまり、関連するディメンションが項目の合計サイズに基づいて決定されます。スクロールバーが表示されず、すべての項目が相対するディメンション (width が null 値の場合は列で、height が null 値の場合は行) に描画されます。

データのサイズは以下によって決定されます。

垂直 (行) 仮想化の行の高さ。rowHeight オプションで決定されますがデフォルトは 50(px) です。
水平 (列) 仮想化の列幅 (ピクセル単位)。各列コンポーネントで明示的に幅を設定、または明示的に幅が設定されないすべての列に適用する IgrGrid の columnWidth オプションを設定できます。

ディメンションを設定せずにグリッドでデフォルト動作を適用する場合、ほとんどの場合は望ましいレイアウトになります。列幅は列カウント、幅が設定された列、および IgrGrid コンテナの計算幅に基づいて決定されます。グリッドは、割り当てる幅が 136px 未満になる以外はすべての列を利用可能なスペースに合わせようとします。その場合、割り当てられない幅を持つ列は 136px の最小幅に設定され、水平方向スクロールバーが表示されます。グリッドは水平方向に仮想化されます。

列幅をパーセンテージ (%) で明示的に設定する場合、ほとんどの場合に水平スクロールバーがない水平方向に仮想化されないグリッドを作成します。

仮想化の制限

Mac OS で「Show scrollbars only when scrolling」システムオプションを true (デフォルト値) に設定した場合、水平スクロールバーが表示されません。これは、IgrGrid の行コンテナーで、overflow が hidden に設定されているためです。オプションを「Always」に変更するとスクロールが表示されます。

FAQ

仮想化がで Grid でディメンションを設定する必要があるのはなぜですか?

描画する前にコンテナーおよび項目のサイズの情報がない場合に IgrGrid でランダムな位置にスクロールすると、スクロールバーの幅や高さの設定、表示項目の決定で誤りが発生します。ディメンションの推測がスクロールバーの誤操作となり、ユーザーエクスペリエンスを低下させます。そのため、仮想化を有効にするには、関連ディメンションを設定する必要があります。

API リファレンス

その他のリソース

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