Premium

React Hierarchical Grid エクスポート

Ignite UI for React Hierarchical Grid は、Grid Toolbar Exporter コンポーネントを介してデータエクスポート機能を提供します。表示されたデータを Excel、CSV、または PDF 形式でエクスポートできます。Excel エクスポートは、フィルタリングやソートなどの機能をサポートする MS Excel テーブル形式を使用します。エクスポートを有効にするには、IgrGridToolbarExporter をグリッドのツールバー内に配置します。デフォルトでは、すべてのエクスポート形式が有効になっています。

React エクスポートの例

固定された列ヘッダーを使用してグリッドをエクスポートする

デフォルトでは、Excel エクスポーターサービスは、スクロール可能な (固定されていない) 列ヘッダーを使用してグリッドをエクスポートします。多くのシナリオでは、エクスポートされた Excel ファイルの上部にすべてのヘッダーを固定し、ユーザーがレコードをスクロールしても常に表示されるようにしたい場合があります。これを実現するには、ExporterOption FreezeHeaders を true に設定します。

PDF エクスポートには、ドキュメントの上部に列ヘッダー行が自動的に含まれるため、読者がファイルを開いたり印刷したりしても同じコンテキストが保持されます。

IgrGridToolbarExporter is also configured to demonstrate how you can control which export formats are available to end users. Use the toolbar exporter options to toggle Excel, CSV, or PDF buttons:

export-excel, export-csv, export-pdf
exportExcel, exportCsv, exportPdf
ExportExcel, ExportCsv, ExportPdf

エクスポートするコンテンツのカスタマイズ

上記の例では、Excel Exporter サービスはすべての使用可能なデータをエクスポートします。行または列全体のエクスポートをしない方が良い場合があります。これを実現するには、それぞれ各列と各行に対して発生する columnExporting および rowExporting イベントをサブスクライブし、イベント引数オブジェクトの cancel プロパティを true に設定してイベントをキャンセルします。

以下の例では、ヘッダーが「Age」で、インデックスが 1 の場合、エクスポートから列を除外します。

function exportEventFreezeHeaders(args: IgrExporterEventArgs) {
    args.detail.options.freezeHeaders = true;
  }

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

API リファレンス

Limitation	Description
Hierarchy levels	The excel exporter service can create up to 8 levels of hierarchy.
Max worksheet size	The maximum worksheet size supported by Excel is 1,048,576 rows by 16,384 columns.
Exporting pinned columns	In the exported Excel file, the pinned columns will not be frozen but will be displayed in the same order as they appear in the grid.
Wide PDF layouts	Very wide grids can force PDF columns to shrink to fit the page. Apply column widths or hide low-priority fields before exporting to keep the document legible.

その他のリソース

IgrHierarchicalGrid

Additional Resources

Our community is active and always welcoming to new ideas.