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

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

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

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

氏名	年齢
ボブ	30
アリス	25

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

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

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

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

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

<igc-grid id="grid1">
    ...

const grid = document.querySelector("#grid1") as IgcGridComponent;
...
grid.clipboardOptions = clipboardOptions;

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

ボブ	30
アリス	25