Ionicにag-gridでエクセルライクな表を導入する

背景

Webで表をいれたいときってあります。主に3つの方法があると考えております。 ・Tableを使う ・FlexBoxを使う ・ライブラリを使う 今回は、ライブラリを使う方法としてAg-gridを導入します。先頭の二つは簡単な表には使用できると思いますが、例えば1万行を超えるようなデータを表にして、Excelのようにセルごとに編集して色分け、、などをするためにはAg-gridを使うのが最適だと思います。 https://www.ag-grid.com/ 無料でもできる範囲はかなりひろいです。

環境

$ ionic info
Ionic:
   Ionic CLI : 6.4.1
Utility:
   cordova-res (update available: 0.14.0) : 0.9.0
   native-run (update available: 1.0.0)   : 0.2.9
System:
   NodeJS : v12.10.0
   npm    : 6.14.2
   OS     : macOS Mojave

流れ

ライブラリをnmpでインストールしたあと、プロジェクト全体のレイアウトを管理するglobal.scssで読み込みます。その後、使いたいページのpage.module.tsで読み込んだ後、page.tsで情報を設定して、page.htmlにタグを設置します。

参考文献

https://www.ag-grid.com/angular-grid/

インストール

パッケージのインストールを行います

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

すると、node_modulesにライブラリが配置されます。

scssの読み込み

Angularではstyles.scss に書き込みますが、ionicではglobal.scssに書き込みます。

@import "../node_modules/ag-grid-community/src/styles/ag-grid.scss";
@import "../node_modules/ag-grid-community/src/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin.scss";

.ag-theme-alpine {
    @include ag-theme-alpine();
}

あとは、これを使いたいページのモジュールで読み込むだけです。ag-gridはモジュールなので、tsファイルで読み込む必要はありません

表を作る

以上で準備完了です。あとは使いたいpageで読み込みます。下記はsrc/app/app.module.ts、src/app/app.component.ts,src/app/app.module.htmlの場合ですが、src/app/tab1/tab1.module.tsなどでも同じです。その場合、src/app/app.module.tsには設定する必要はないです。 それではsrc/app/app.module.tsから編集します。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { AgGridModule } from 'ag-grid-angular';

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

Copy 次にsrc/app.component.tsで情報を設定します。

import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
})
export class AppComponent {
    title = 'app';

    columnDefs = [
        {headerName: 'Make', field: 'make' },
        {headerName: 'Model', field: 'model' },
        {headerName: 'Price', field: 'price'}
    ];

    rowData = [
        { make: 'Toyota', model: 'Celica', price: 35000 },
        { make: 'Ford', model: 'Mondeo', price: 32000 },
        { make: 'Porsche', model: 'Boxter', price: 72000 }
    ];
}

最後にapp/app.component.htmlファイルでタグを設置します。

<ag-grid-angular
    style="width: 500px; height: 500px;"
    class="ag-theme-alpine"
    [rowData]="rowData"
    [columnDefs]="columnDefs"
    >
</ag-grid-angular>

そうすると、下記のような表が表示されるはずです。