AG Grid（Licenseはfreeのまま）でセルの値をクリップボードにコピーする方法
公開日:
更新日:
AG Gridのライセンスに関して
AG Gridには無料版と有料版の二種類があります。無料版では扱っていない機能がいくつか存在します。
その機能の中の一つにクリップボードへのコピー（Clipboard）が含まれています。
そのため無料版のままではセルの値をコピーできないのか？と思ったのですが一つの解決方法を教えてもらったので共有させて頂きます。
対応策:AG Gridテーブルの設定でreadOnlyEditをTrueにする
解決方法のステップとしては下記になります。
①テーブルを編集可能にする
まずはテーブルを編集可能にしてしまいます。
example.js
1const defaultColDef = useMemo(() => {
2 return {
3 editable: true
4 };
5 }, []);
6
7//途中省略
8
9 <AgGridReact
10 defaultColDef = {defaultColDef}
11 />AgGridReactコンポーネントにdefaultColDefというpropsを渡します
defaultColDefは全カラムに適用される設定です。ここでeditable: trueとしてあげることでテーブルが編集可能になります。ただこれだけだとテーブルが編集可能になってしまいデータが自由に書き変わってしまいます。
デモ
②テーブルの設定で「readOnlyEdit」をTrueにする
example.js
1const defaultColDef = useMemo(() => {
2 return {
3 editable: true
4 };
5 }, []);
6
7//途中省略
8
9 <AgGridReact
10 defaultColDef = {defaultColDef}
11 readOnlyEdit={true}
12 />最後はAgGridReactコンポーネントにreadOnlyEditというpropsをtrueにして渡します。
こうすることでテーブルは「編集することはできるが値の更新ができない」状態になります。この状態だとセル内のデータをクリップボードにコピーすることが可能です。
デモ (readOnlyEdit適用後)
※参考記事: AGGrid公式サイト readOnlyEditの説明ページ
以上、AGGridテーブルを使用する際のTipsでした。
お役に立てましたら幸いです。
ご一読頂き、ありがとうございました。