AG GridでテーブルをTSV形式でexportする方法

公開日:

更新日:

gridRef.current.api.getDataAsCsvを利用する

example.js

1
2const gridRef = useRef();
3
4const getParamsCsv = (dataName) => {
5 const fileName = "AGGridTableData" + ".csv"
6  return {
7   columnSeparator: ",",
8   fileName: fileName
9  };
10};
11
12const getParamsTsv = (dataName) => {
13 const fileName = "AGGridTableData" + ".tsv"
14  return {
15   columnSeparator: "\t",
16   fileName: fileName
17  };
18};
19
20const agGridDownloadCsv = useCallback((dataName) => {
21  var params = getParamsCsv(dataName);
22  gridRef.current.api.exportDataAsCsv(params);
23}, []);
24
25const agGridDownloadTsv = useCallback((dataName) => {
26  var params = getParamsTsv(dataName);
27  gridRef.current.api.exportDataAsCsv(params);
28}, []);
29
30//途中省略
31
32<AgGridReact
33  ref={gridRef}
34/>

上記の様にgridRef.current.api.exportDataAsCsv()メソッドを利用します。

引数で渡すオブジェクトにcolumnSeparatorを任意の形で指定してあげれば、好きな文字でテーブルを分割してくれます。

上記の様な形のコードであれば何かボタンが押下された際にagGridDownloadTsv()もしくはagGridDownloadCsv()と呼び出してあげればダウンロードが走ります。

※参考記事: AGGrid公式サイト export機能の説明ページ

以上、AGGridテーブルを使用する際のTipsでした。

お役に立てましたら幸いです。

ご一読頂き、ありがとうございました。