IgrGrid – クリップボードへのコピー時に列ヘッダを含めない

Ignite UI for React のグリッドコンポーネント、IgrGrid では、セルを選択した状態で、キーボードから Ctrl + C または ⌘ Command + C を押すことで、選択されたセルの内容をクリップボードにコピーすることができます。

例えば以下のように表示・セル選択されている IgrGrid にて、Ctrl + C または ⌘ Command + C を押すと、

以下の内容のテキストが、クリップボードにコピーされます。

氏名	年齢
ボブ	30
アリス	25

このとき、既定では上記のとおり列ヘッダの内容も一緒にコピーされます。しかし場合によっては、列ヘッダは含めず、選択したセルの内容だけコピーされるようにしたい、という要件があるかもしれません。

そのような場合は以下の手順で、IgrGrid からクリップボードにコピーされる内容から、列ヘッダの内容を除外することができます。

まず以下のように初期化した IgrClipboardOptions オブジェクトを用意します。ここで copyHeaders プロパティに false を指定していますが、これが列ヘッダの内容をコピーしない指定となります。

...
const clipboardOptions: IgrClipboardOptions = {
  enabled: true,
  copyHeaders: false,
  copyFormatters: true,
  separator: "\t",
};
...

こうして用意した IgrClipboardOptions オブジェクトを、IgrGrid の clipboardOptions パラメーターに渡します。

<IgrGrid ...
    clipboardOptions={clipboardOptions}
    >
    ...

以上で、IgrGrid 上でセル選択の上、キーボードから Ctrl + C または ⌘ Command + C を押したときに、列ヘッダの内容は含まれず、選択されたセルの内容だけがクリップボードにコピーされるようになります。

ボブ	30
アリス	25