CSV / Excel エクスポート
downloadCsv / exportCsv と、ライブラリ非依存の getExportData
エクスポートは命令的ハンドル(ref)から呼びます。CSV は組み込みで、Excel(xlsx)などは getExportData() の返す整形済みデータを任意のライブラリに渡して生成します(スプレッドシートライブラリは同梱しません)。
デモ
CSV
const gridRef = useRef<SpreadsheetGridHandle<Row>>(null);
// ファイルとしてダウンロード(BOM 付き・Excel でそのまま開ける)
gridRef.current?.downloadCsv('products.csv');
// 文字列が欲しい場合
const csv = gridRef.current?.exportCsv({ delimiter: '\t' }); // TSV も可出力範囲(scope)
| scope | 対象 |
|---|---|
'view'(既定) | フィルター / ソート適用後のビュー行全体(スクロール位置に依存しない) |
'raw' | 元の全行(フィルター / ソートを無視) |
'selection' | セル範囲選択中の行 |
'rendered' | 仮想化で現在描画中の行のみ(スクロール依存) |
列は表示中の列を表示順で出力し、valueFormatter 適用前の生値ではなく表示値ベースの整形が使われます(formatClipboardValue があればそれが優先)。
行の除外(isRowExportable)
props の isRowExportable で「コピー(Ctrl/Cmd+C の TSV)/ exportCsv / getExportData」の対象行を絞れます。false を返した行は出力から行ごと除かれます(表示・選択・貼り付けには影響しません)。表示上の詰め物行(プレースホルダなど)を出力から外す用途を想定しています。
<SpreadsheetGrid
rows={rows}
columns={columns}
rowKeyGetter={(row) => row.id}
// プレースホルダ行はコピー / CSV / getExportData の出力から除く
isRowExportable={(row) => !row.isPlaceholder}
/>ctx.viewRowIndex はフィルター / ソート適用後のビュー行 index(scope 'raw' のみ元 rows 配列の index)、ctx.rowKey は rowKeyGetter の値です。
ラベル行(見出し行)を含める(includeLabelRows)
ラベル行(labelRow)は既定では出力に含みません(scope 'raw' でもデータ行として出ません)。includeLabelRows: true を渡すと、見出しを 1 行として出力します(exportText 未指定なら getLabel の文字列を先頭列に、他列は空)。
gridRef.current?.downloadCsv('products.csv', { includeLabelRows: true });
const data = gridRef.current?.getExportData({ includeLabelRows: true });
// data.rowKinds[i] === 'label' で見出し行を判別 → Excel 側で結合セル / 太字を当てるExcel(xlsx)など
const data = gridRef.current?.getExportData(); // { columns, rows(2 次元セル) }
// ExcelJS / SheetJS / hucre など任意のライブラリでブックを組み立てるgetExportData() は純粋関数的にデータだけを返すため、複数シートは scope 別・グリッド別に呼び出して組み立てられます。詳細なセル型は API リファレンス を参照してください。