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でした。
お役に立てましたら幸いです。
ご一読頂き、ありがとうございました。
目次