IgrGrid – エクスポートファイル名を指定したい

  • 公開日:
  • 最終更新日:

この記事では、エクスポートの開始時にファイル名をユーザー入力で設定する方法を紹介します。

IgrGrid の設定

IgrGridToolbarExporter のonExportStartedイベントをバインドすることで、エクスポート開始時にファイル名を指定させる処理をフックできます。

<IgrGrid ....>
  <IgrGridToolbar>
    <IgrGridToolbarActions>
      <IgrGridToolbarExporter exportCSV={true} exportExcel={true} onExportStarted={onExportStarted} />
    </IgrGridToolbarActions>
  </IgrGridToolbar>
....
</IgrGrid>

エクスポートの設定

onExportStartedでIgrExporterEventArgsDetailを受け取り、prompt() を使ってユーザーにファイル名を入力させます。キャンセルや空文字の場合は、エクスポートを中止できます。

import type { IgrExporterEventArgsDetail } from "@infragistics/igniteui-react-grids";

....

const onExportStarted = (args: CustomEvent<IgrExporterEventArgsDetail>) => {
  const reply = prompt("Please enter the file name for the export:", "my-exported-data");
  if (reply === null || reply.trim() === "") {
    args.detail.cancel = true;
    return;
  }
  args.detail.options.fileName = reply.trim();
};

実行結果

Export ボタンを押すと、下図のようなダイアログが表示されます。ここで入力したファイル名が、そのままダウンロードされる Excel または CSV ファイルの名前として使われます。

サンプルプログラムのダウンロード GitHub リポジトリはこちら

ダウンロード後、以下のコマンドで実行できます。

npm ci
npm run dev
Tagged: