ag-gridを使ってみる

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

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

## 必要パッケージのインストール
以下のコマンドでインストール。  

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

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

``` json
"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([])'を追記します。
([])の中身は特に書かなくても動くみたいなので特に書かないでおく。

```typescript
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**

```typescript
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**

```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列のボタンはクリックするとボタン名を表示

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