はじめに

ag-gridがとても優秀だと言う話を聞いたので試しに使ってみる。
設定できることが多かったので自分用にまとめておきます。

各種準備

ag-gridを使用するプロジェクトの準備

ng new testAppでプロジェクトを作成する。
ng g component ag-grid-sampleでAg-grid使うコンポーネントを作成しておく。

必要パッケージのインストール

以下のコマンドでインストール。

npm install ag-grid  
npm install ag-grid-angular

今回使うのは'ag-grid-angular'ですが、'ag-grid'が無いと警告が出るためどちらも入れてます。

使うまでの準備

'angular-cli.json'の"apps","styleｓ"に以下の2つを追記する。
今回は長くなるので抜粋です。

"apps": [
  {
    "styles": [
      "../node_modules/ag-grid/dist/styles/ag-grid.css",
      "../node_modules/ag-grid/dist/styles/theme-fresh.css"
    ],

'app.module.ts'のNgModeleの'imports'に'AgGridModule.withComponents([])'を追記します。
([])の中身は特に書かなくても動くみたいなので特に書かないでおく。

import { AgGridModule } from 'ag-grid-angular/main';

@NgModule({
  declarations: [
    AppComponent,
    AgGridTestComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AgGridModule.withComponents([])
  ],
  providers: [],
  bootstrap: [AppComponent]
})

使ってみる

まずはソースコードから。
ag-grid-test.component.ts

export class AgGridTestComponent implements OnInit {
    public gridOptions: GridOptions;

    constructor() { }

    ngOnInit() {
        const self = this;
        this.gridOptions = <GridOptions>{};

        // Gridの設定を記述
        this.gridOptions.columnDefs = [
            // 一区切りで一列設定
            {
                headerName: 'CheckBox',
                checkboxSelection: true // チェックボックス表示
            },
            {
                headerName: 'ID' // Header
                , field: 'id' // データの名前
                , width: 200 // 幅
                , editable: false // 編集不可
            },
            {
                headerName: 'Name'
                , field: 'name'
                , width: 200
            },
            {
                headerName: 'Button'
                , field: 'button'
                , width: 200
                // セルの中にボタンを作成してみる
                , cellRenderer: (params) => {
                    const element = document.createElement('button');
                    console.log(params);
                    element.innerHTML = params.value;
                    element.addEventListener('click', () => {
                        window.alert('クリックしたボタンは' + params.value + 'ボタンです。');
                    });
                    return element;
                }
            },{
                headerName: 'Other'
                , field: 'other'
                , width: 200
            }
        ];
        this.gridOptions.rowData = [
            {id: 100, name: 'Bob', button:'ボタン1', other: 'その他'}
            , {id: 200, name: 'Mike', button:'ボタン2', other: '<a href="https://www.google.co.jp/" target="brank">リンクを作ってみる</a>'}
            , {id: 300, name: 'Anne', button:'ボタン3',other:''}
        ];
        this.gridOptions.rowSelection = 'multiple'; //複数選択が出来るように指定
        this.gridOptions.suppressRowClickSelection = true;  // チェックボックス以外クリックで反応するか
    }
}

ag-grid-test.component.html

<ag-grid-angular
    #agGrid style="width: 100%; height: 200px;" class="ag-fresh"
    [gridOptions]="gridOptions"
></ag-grid-angular>

インポートはテンプレにimport { GridOptions } from 'ag-grid';を追加すれば動くはず。
colmunDefsでGridの設定を定義して、rowDataに表示するデータを記述すれば良い。
ちなみに今回の設定は以下の通り。

チェックボックスを表示し、複数選択可能
チェックボックス以外をクリックしてもチェックボックス反転なし
ID列は編集不可
Button列のボタンはクリックするとボタン名を表示

最後に

とりあえず作成してみました。
一旦コードは載せましたが、動くものはどう載せていいかわからないので、いつか解決すれば公開します。
その内もっと色んな機能を使えればなーと思います。

ag-gridを使ってみる