1
背景
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>
そうすると、下記のような表が表示されるはずです。
