ag-grid使ってみた

ag-gridとは

JavaScriptのライブラリで表を作成できます。

事前準備

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

1. ng new testでプロジェクトを作成します
2. 作成したtestフォルダに移動します
3. ng generate component ag-grid-sampleでag-gridを使うコンポーネントを作成しておきます

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

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

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

使うまでに準備すること

angular-cli.jsonに以下の2つのCSSファイルを追記します。

"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 { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AgGridSampleComponent } from './ag-grid-sample/ag-grid-sample.component';
import { AgGridModule } from 'ag-grid-angular';

@NgModule({
  declarations: [
    AppComponent,
    AgGridSampleComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AgGridModule.withComponents([])
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

使ってみた

app.component.ts