ag-gridの列表示をCellRendrerを作成して変更する。

ag-gridの列表示をCellRendrerを作成して変更する。

ag-gridでは列の表示方法を変更することが可能です。
また、vue,react,angularなどを利用して作成することが可能となっています。
今回は、vueを使用して作成してみます。
コードの一部は、ag-gridの列幅をgrid幅に合わせて表示する。を流用しています。

CellRendererを作成

数値を3桁区切りで表示するCellRendererを作成してみます。

NumericFormat.vue

NumericFormat.vueを利用してみる。

importしたNumericFormatcolumnDefsの列定義情報に追加します。
今回数値を扱うために貯金列を追加しました。
作成したCellRendererは
cellRendererFramework`に指定することで利用することが可能です。

スポンサーリンク
  • このエントリーをはてなブックマークに追加
スポンサーリンク

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA