React Grid Export to Excel サービス

    React Grid の Ignite UI for React Export to Excel サービスは、データを Excel へエクスポートできます。エクスポート機能は、ExcelExporterService クラスでカプセル化され、MS Excel テーブル形式でデータをエクスポートします。この形式ではフィルタリングやソートなどの機能が使用でき、ExcelExporterServiceExport メソッドを呼び出して最初の引数として IgrGrid コンポーネントを渡し、グリッドを簡単にエクスポートします。

    React Excel Exporter の例

    グループ化されたデータのエクスポート

    グループ化されたデータをエクスポートするには、IgrGrid を 1 つ以上の列でグループ化する必要があります。ブラウザーは、選択した列でグループ化された MSExcel 形式の IgrGrid コンポーネントからのデータを含む「ExportedDataFile.xlsx」という名前のファイルをダウンロードします。トピックのはじめに例があります。

    複数列ヘッダー グリッドのエクスポート

    定義された複数列ヘッダーを使用して IgrGrid をエクスポートできるようになりました。すべてのヘッダーは、IgrGrid に表示されるときに、エクスポートされた Excel ファイルに反映されます。エクスポートされたデータから定義された複数列ヘッダーを除外する場合は、ExporterOption IgnoreMultiColumnHeaderstrue に設定できます。

    [!Note] Excel テーブルは複数の列ヘッダーをサポートしていないため、エクスポートされた IgrGrid はテーブルとしてフォーマットされません。

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

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

    function exportEventFreezeHeaders(grid: IgrGridBaseDirective, args: IgrExporterEvent) {
        args.detail.options.freezeHeaders = true;
    }
    
    <IgrGridToolbar key="toolbar">
      <IgrGridToolbarActions key="toolbarActions">
        <IgrGridToolbarExporter key="exporting" exportStarted={exportEventFreezeHeaders}></IgrGridToolbarExporter>
      </IgrGridToolbarActions>
    </IgrGridToolbar>
    

    既知の問題と制限

    制限 説明
    ワークシートの最大サイズ Excel でサポートされているワークシートの最大サイズは、1,048,576 行 x 16,384 列です。
    セルのスタイル設定 Excel エクスポーター サービスは、セル コンポーネントに適用されたカスタム スタイルのエクスポートをサポートしていません。このようなシナリオでは、Excel ライブラリを使用することをお勧めします。

    API リファレンス

    • ExcelExporterService
    • ExcelExporterOptions
    • IgrGrid

    その他のリソース

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