notebook

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

angularでag-gridを使う(導入編)

Angular JavaScript ag-Grid

ag-gridというライブラリがとても便利でお世話になっているので導入から使い方の備忘録を残していく

ライセンスを購入すればだいたいなんでもできるというくらい色々機能がある(正直使いこなせていない感はある)

JavaScript Grid

www.ag-grid.com

angularのバージョン: 4.0.0

ag-gridのバージョン: 14.2.0

install

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

設定

  • app.module.ts

AgGridModuleをNgModuleに組み込む

ag-gridのセルの描画をカスタマイズするためのコンポーネントを作った場合は作ったコンポーネントをwithComponentsの中に追加していく

まずはシンプルな状態で作るので空で

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

@NgModule({
  declarations:[
  .....
  .....
  .....
  ]
  imports: [
    .....
    .....
    AgGridModule.withComponents([]),
    .....
    .....

apps.stylesにスタイルを追加する

テーマごとのcssと共通のcssがある

  "apps":[
    {
      .....
      .....
      "styles": [
        .....
        "../node_modules/ag-grid/dist/styles/ag-grid.css",
        "../node_modules/ag-grid/dist/styles/theme-fresh.css",
        "../node_modules/ag-grid/dist/styles/theme-material.css",
        "../node_modules/ag-grid/dist/styles/theme-blue.css",
        "../node_modules/ag-grid/dist/styles/theme-dark.css",
        "../node_modules/ag-grid/dist/styles/theme-bootstrap.css"
        .....
        .....

実装

適当にコンポーネント生成する

npx ng g component sample-grid

最低限のコードはこんな感じ

カラム定義はformなどと一緒でts側で行うパターンとhtml側で行うパターンがある

個人的にはhtml側に書くのがスッキリして読みやすいと思っているが一部apiがts側からでないと定義できないものがあった.....

  • sample-grid.component.ts
import { Component, OnInit } from '@angular/core';
import {GridOptions} from 'ag-grid';

@Component({
  selector: 'app-sample-grid',
  templateUrl: './sample-grid.component.html',
  styleUrls: ['./sample-grid.component.scss']
})
export class SampleGridComponent implements OnInit {

  public gridOptions: GridOptions = {};
  public gridRows: any;

  constructor() { }

  ngOnInit() {
    this.gridRows = this.getDummyData();
  }

  private getDummyData(){
    return [
      {accountId: 1, name: 'テストアカウント1', category: 'hoge', score: 5000},
      {accountId: 2, name: 'テストアカウント2', category: 'hoge', score: 2350},
      {accountId: 3, name: 'テストアカウント3', category: 'fuga', score: 400},
    ]
  }
}
  • sample-grid.component.html
<ag-grid-angular #sampleGrid
                 style="height: 100%"
                 [gridOptions]="gridOptions"
                 [rowData]="gridRows"
                 enableSorting
                 enableFilter
                 suppressMenuHide
                 class="ag-dark">
  <ag-grid-column [headerName]="'アカウントID'"
                  [field]="'accountId'"
                  [width]="130"
                  [filter]="'text'">
  </ag-grid-column>
  <ag-grid-column [headerName]="'アカウント名'"
                  [field]="'name'"
                  [width]="130"
                  [filter]="'text'">
  </ag-grid-column>
  <ag-grid-column [headerName]="'カテゴリ'"
                  [field]="'category'"
                  [width]="130"
                  [filter]="'text'">
  </ag-grid-column>
  <ag-grid-column [headerName]="'スコア'"
                  [field]="'score'"
                  [width]="130"
                  [filter]="'number'">
  </ag-grid-column>
</ag-grid-angular>
  • styleに突っ込んだcssのファイル名とclassが対応している
  • style="height: 100%" は指定がないと表示が潰れてしまい中身が見れないといったことが起こるのでworkaround的だが入れている

こんな感じで表示できました

f:id:swfz:20171125041159p:plain