Premium

React Tree Grid エクスポート

Ignite UI for React Tree 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 リファレンス

IgrTreeGrid

その他のリソース

IgrTreeGrid

Additional Resources

Our community is active and always welcoming to new ideas.