🦁

ag-gridでcolumnの順序もリロードしても保存しておく(React)

2 min read

やりたい事

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版を使っていきます。

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+TypeScript】Netflixのクローンを作るチュートリアル
【 React Hooks入門】useStateを使って買い物リストを作るチュートリアル
React + TypeScriptでコネクト4を作った報告(クラスコンポーネント)
ReactでのCOVID-19トラッカー作成で学べる3つの事


技術ブログではフロントエンドの情報を中心に発信しています。
技術ブログ
Twitter