notebook

都内でWEB系エンジニアやってます。

ag-Gridで最初から知っておいたほうが良かったこと

かれこれ結構な年月かかわらせて頂いているので実装するにあたってのこれはーみたいなのが溜まってきたのでここいらで吐き出しておきます

簡単にできる割に体験が良いもの、軽い気持ちでやったら後々苦労するものなど

tooltip

設定されたカラムでカーソルをあわせたまましばらく待つとtitle的なものが表示される機能

文字量が多く途中で途切れてしまっているときとかに有用です

columnDefにtooltipFieldもしくはtooltipValueGetterを設定するだけなのでできるだけつけてあげたほうが親切ですね

v20からカスタムコンポーネントを適用できるようになったのでさらに自由度がましています(ブラウザのtitle相当のツールチップも今までどおりgridOptions.enableBrowserTooltips = trueを指定することで可能)

ag-Grid: Components - Tooltip Component

www.ag-grid.com

context

いわゆるag-Grid内でグローバルに参照できる値たちをもたせることができる機能

params.dataをいじってどうのこうのという感じの無理やりな実装方法を避けられる

セルのデータのコールバックや、カスタムセルのレンダリング時などに渡ってくる値以外にデータを渡したいときに使う用だと思っています

使えそうなパターンだと以前記事に書いたデータの差分とってなにかやりたいときとかに使えそうです

ag-Grid Features: Context Object

www.ag-grid.com

ag-Gridで任意のデータをコールバックで使いたい - notebook

swfz.hatenablog.com

これを知らないときに無理やりparams.dataの中身に表示と関係ないデータを追加して実装するという暴挙にでてたのでこれで安心

無知は死!

CSV Export

よくあるCSVダウンロード機能

実装も簡単だしあって困ることはないので大体は実装しちゃって良い気がします

ただセルのテンプレートで凝ったことやったりしているとCSV用のValueを用意するる必要が出てくるので要件次第かも…

CSV Export: Core Feature of our Datagrid

www.ag-grid.com

sizeColumnsToFit

データの中身の長さによって自動で列幅を調整してくれるAPIから呼べるメソッド

API経由で呼び出すだけでOKなのでサイズ調整が必要なくなるので楽です

ag-Grid Reference Guide: Grid API

www.ag-grid.com

Quick Filter

グリッド上の全データに対してフィルタをかけてくれる機能

サンプルがあるのでそれを見ていただくのが一番わかりやすいと思います

やろうと思えば各列でquickFilterが検索対象とするデータをcallbackで設定できる

複雑なことをしないのであればデフォルトでも結構使えます、この機能はおそらく開発側よりも使う側にあると嬉しいかなと思います

内容的には表の中のデータから検索してくれるってだけですが、わざわざフィルタを開いて入力してーっていう手間がないのと直感的にわかりやすい

単純に便利だと思うのでこれは最初から入れていて良いと思っています

Quick Filter: Core Feature of our Datagrid

www.ag-grid.com

StatusBar

エンタープライズ機能だけど一応

Status Bar: Enterprise Grade Feature of our Datagrid

www.ag-grid.com

レンジ選択(エンタープライズ)との組み合わせで設定だけでエクセルみたいな事ができる

「選択範囲の合計は○です」といった感じの挙動

エンタープライズ持っているならとりあえず入れておいて良いのでは?と思います

まとめ

実際に書き出してみたらサンプルのリンク貼るだけでになってしまいました

1つ1つは記事にするまでもないかなという感じだったのですが公式ドキュメントを毎度検索してこれできるかなーと探すのもたいへんではあるので誰かのお役に立てればと思います