IgxGrid に CSVファイルを読み込む

IgxGrid それ自体には、CSVファイルを読み込む機能はありませんが、FileReader を組み合わせることで、CSVファイル読み込み機能を実現することができます。大まかな処理の流れとしては、以下のようになります。

1. ファイル選択ダイアログを配置してCSVファイルを選択する
2. FileReader を使ってCSVファイルを読み込む
3. 読み込んだCSVデータを配列データに変換する
4. 配列データを IgxGrid にバインドする

注意
1 – 3 の処理は IgxGrid の機能にはないので、ご自身で実装する必要があることに注意してください。ここに掲載している実装を参考いただくことは問題ありませんが、CSV読み込みを実現するための最低限のコードであり、あらゆるパターンで動作することを保証するものではありません。

1. ファイル選択ダイアログを配置してCSVファイルを選択する

<input type=”file”> を配置します。

<input #input type="file" accept=".csv" (change)="handleFiles(input.files)">

<div style="width: 100vw; height: 90vh;">
  <igx-grid #grid
            [locale]="'ja-JP'"
            [data]="data">
    <igx-column *ngFor="let column of columns"
                [field]="column.field"
                [dataType]="column.dataType"
                [editable]="true">
    </igx-column>
  </igx-grid>
</div>

ファイル選択ダイアログでCSVファイルを選択すると change イベントが発生するのでイベントハンドラでファイルを処理します。

  handleFiles(files: FileList): void {
    // https://developer.mozilla.org/ja/docs/Web/API/File/Using_files_from_web_applications
    if (files.length !== 1) {
      alert('複数ファイルは読み込めません');
      return;
    }
    this.importCsv(files[0]);
  }

2. FileReader を使ってCSVファイルを読み込む

FileReader オブジェクトを生成してファイルを読み込みます。

  private importCsv(file: File): void {
    const reader = new FileReader();
    // https://developer.mozilla.org/ja/docs/Web/API/FileReader/onload
    reader.onload = () => {
      // https://developer.mozilla.org/ja/docs/Web/API/FileReader/result#%E4%BE%8B
      // CSV -> 配列に変換して igx-grid にバインド
      this.data = this.csvToArray(reader.result as string);
    };
    // https://developer.mozilla.org/ja/docs/Web/API/FileReader/onerror
    reader.onerror = () => {
      reader.abort();
    };
    // https://developer.mozilla.org/ja/docs/Web/API/FileReader/readAsText
    reader.readAsText(file);
  }

3. 読み込んだCSVデータを配列データに変換する
4. 配列データを igx-grid にバインドする

FileReader で読み込みが完了すると reader.result で読み込みデータが取得できるので、配列データに変換します。変換したデータを IgxGrid のデータとしてバインドします。

・・・
    reader.onload = () => {
      // https://developer.mozilla.org/ja/docs/Web/API/FileReader/result#%E4%BE%8B
      // CSV -> 配列に変換して igx-grid にバインド
      this.data = this.csvToArray(reader.result as string);
    };
・・・

  // CSVテキストを変換する方法は様々あり、以下の実装は一例にすぎず、完全なものではありません。
  // あらかじめご了承ください。
  private csvToArray(text: string): any[] {
    // 改行コードで行分割
    const rows = text.split(/\r\n|\n/);
    if (rows.length === 0) {
      return [];
    }

    // １行目はヘッダー行とみなして捨てる
    rows.shift();

    const data = [];
    for (const row of rows) {
      if (!row) {
        continue;
      }

      // タブコードでセル分割
      const cells = row.split('\t');

      const rowObj = {};
      for (const [index, cell] of cells.entries()) {
        // 列定義を取得
        const column = this.columns[index];
        let value;

        // データタイプに応じて簡易的な型変換を行う
        switch (column.dataType) {
          case 'number': {
            value = Number(cell);
            break;
          }
          case 'date': {
            value = new Date(cell);
            break;
          }
          case 'boolean': {
            value = cell.toLowerCase() === 'true';
            break;
          }
          default: {
            value = cell;
            break;
          }
        }
        // 列のフィールド名に応じた値をセット
        rowObj[column.field] = value;
      }

      data.push(rowObj);
    }

    return data;
  }

なお、CSVデータの変換処理は、独自に実装してもよいですが、ライブラリなどを使用するほうが良いかもしれません。

実行結果

igx-grid-csv-import フォルダ直下に sample.csv を用意しておいたので、これを読み込んでみます。

•