IgrDataGrid: フィルタやソートの結果を反映した状態でエクセルに出力する

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

Ignite UI for React 製品に含まれる、Excel ライブラリを利用することで、データを Excel ファイルに出力することができます。今回は、IgrDataGrid でフィルタやソートなどを実施した結果（表示行、行の並び順）を反映して Excel ファイルに出力する例をご紹介します。

ポイントは、コードスニペットの 16 行目にある、dataIndexOfItem メソッドです。このメソッドを利用することで、データソースの任意の行が、グリッド上に存在しているのかどうかを判定することができます。（dataIndexOfItem メソッドの戻り値が -1 の場合、フィルタを実施するなどの理由でグリッド上に存在していないことになります。）下記コードスニペットでは、IgrDataGrid にバインドされているデータソースから、フィルタやソートを実施した結果を取り出し、Excel ファイルに出力しています。

public saveWorkbook() {
    
    const headers = Object.keys(this.grid.dataSource[0]);
    headers.pop();

    const wb = new Workbook(WorkbookFormat.Excel2007);
    const ws = wb.worksheets().add("Sheet1");

    for(let i=0; i<headers.length; i++){
        ws.rows(0).cells(i).value = headers[i];
    }
    
    for (let i = 0; i < this.grid.actualDataSource.actualCount; i++) {
        const ds: Array<any> = this.grid.dataSource;
        ds.forEach(dataRow =>{
            if(this.grid.dataIndexOfItem(dataRow) === i) {
                const xlRow = ws.rows(i + 1);
                for(let j=0; j<headers.length; j++){
                    xlRow.setCellValue(j, dataRow[headers[j]]);
                }
            }
        });
    }

    ExcelUtility.save(wb, "WorkbookSample");
}
react-excel-library-export-visible-rowsDownload
Tagged: