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

やりたい事

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つの事


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

Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the compare bar
Compare
Compare ×
Let's Compare! Continue shopping