やりたい事

ag-gridを使ったcolumnをドラッグした際に、リロードしても保存されている状態にする。

（ドラッグ画像）

ag-gridについて

業務システムなどに向いているリッチなグリッドライブラリです。
一部機能は課金対象ですが、チェックボックスによる絞り込み、ソート、カラムの入れ替えなどの基本的な実装は無課金で出来ます。

ライブラリの名前的にAngularのライブラリに見えますが、VanillaJs、Angular、React、Vueに対応しています。今回はreact版を使っていきます。

doc(react):https://www.ag-grid.com/documentation/javascript/

方針

• ドラッグ終了時にcolumnデータを取得して、リロード用にlocalstrageにcolumnデータを保存
• グリッドデータの読み込みの際に、localstorageからcolumnデータを取得

ドラッグ終了時にcolumnデータを取得

グリッドイベントのdragStoppedを用いてドラッグ終了時に走るイベントhandleDragStoppedを作る。

getColumnStateでcolumnデータを取得し。localstorageに保存している。
複数の画面、テーブルなどを扱う際はlocalstorage保存時にkeyを一意に決まるようにした方がよいが、サンプルなのでmyColumnStateを使用。

グリッドデータの読み込みの際に、localstorageからcolumnデータを取得

localstorageにデータがある時だけ取って来るようにする。
発火のタイミングはgridReady時にした。

記事化
https://zenn.dev/gunners6518/articles/b947e213c56138