ag-Gridに入門

JavaScriptで高機能でエクセルライクなUI/UXを実現できるライブラリ、ag-Gridを発見した。日本語の情報が少ないので、自分のためと誰かのために、使えそうな機能やapiの使い方をのせておく。

Grid API

gridOptions.api.メソッド名で使用

すべての行を取得

//forEachNode(callback)を使う場合
gridOptions.api.forEachNode( function(rowNode, index) {
    console.log(rowNode.data);
})

行の追加・更新・削除

api.updateRowData(transaction)でデータの更新や削除ができる。transactionにわたすパラメータは、公式サイト参照。

//追加の場合
let newData = {};
for (let key in columnDefs) {
  newData[columnDefs[key]['headerName']] = "";
}
gridOptions.api.updateRowData({add: [newData]});

終わりに

ag-Gridをもっと使いこなせるようになったらさらに情報を追加していく。