ag-gridでcolumnの順序もリロードしても保存しておく(React)
こんにちは、フロントエンドエンジニアのてりーです。
僕の詳しいプロフィールはこちら
また、未経験から独学でフロントエンドエンジニアになる勉強方法をまとめたので、興味があれば是非！
やりたい事
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時にした。
これにてリロードしてもculumnデータが保存されたままになる。
関連記事
Reactを仕事で使いこなしたい人、Reactの知識に不安がある人に向けて、具体的な勉強方法をまとめました。
また1人でReactを独学している人はこちらの記事も併せて読みましょう！
Discussion