やりたい事
ag-gridを使ったcolumnをドラッグした際に、リロードしても保存されている状態にする
このスタックオーバーフローの質問がやりたい事のイメージ。（古いので参考程度に）
要するにリロードしてもセル移動を覚えていて欲しい。
https://stackoverflow.com/questions/51488241/ag-grid-how-to-save-and-reload-column-order
ag-gridについて
業務システムなどに向いているリッチなグリッドライブラリです。
一部機能は課金対象ですが、チェックボックスによる絞り込み、ソート、カラムの入れ替えなどの基本的な実装は無課金で出来ます。
ライブラリの名前的にAngularのライブラリに見えますが、VanillaJs、Angular、React、Vueに対応しています。今回はreact版を使っていきます。
公式
https://www.ag-grid.com/documentation/javascript/
方針
- ドラッグ終了時にcolumnデータを取得して、リロード用にlocalstrageにcolumnデータを保存
- グリッドデータの読み込みの際に、localstorageからcolumnデータを取得
ドラッグ終了時にcolumnデータを取得
グリッドイベントの[dragStopped](https://www.ag-grid.com/documentation/react/grid-events/#reference-columns
)を用いてドラッグ終了時に走るイベントhandleDragStoppedを作る。
getColumnStateでcolumnデータを取得し。localstorageに保存している。
複数の画面、テーブルなどを扱う際はlocalstorage保存時にkeyを一意に決まるようにした方がよいが、サンプルなのでmyColumnStateを使用。
グリッドデータの読み込みの際に、localstorageからcolumnデータを取得
localstorageにデータがある時だけ取って来るようにする。
発火のタイミングはgridReady時にした。
これにてリロードしてもculumnデータが保存されたままになる。
告知
Reactに関して初学者向けのチュートリアル記事をいくつか作っています。
是非学習の参考にして下さい。
【React+TypeScript】Netflixのクローンを作るチュートリアル
【 React Hooks入門】useStateを使って買い物リストを作るチュートリアル
React + TypeScriptでコネクト4を作った報告（クラスコンポーネント）
ReactでのCOVID-19トラッカー作成で学べる3つの事