-
AG GridをAngularプロジェクトにインストールします。ターミナルで以下のコマンドを実行します:
npm install --save ag-grid-angular
-
AngularのモジュールファイルでAG Gridモジュールをインポートします。
app.module.ts
ファイルを開き、以下のように追加します:import { AgGridModule } from 'ag-grid-angular'; @NgModule({ imports: [ AgGridModule.withComponents([]) ], // ... }) export class AppModule { }
-
AG Gridコンポーネントを作成します。新しいコンポーネントファイルを作成し、以下のように設定します:
import { Component } from '@angular/core'; @Component({ selector: 'app-grid', template: ` <ag-grid-angular style="width: 500px; height: 300px;" class="ag-theme-alpine" [rowData]="rowData" [columnDefs]="columnDefs"> </ag-grid-angular> ` }) export class GridComponent { rowData: any[]; columnDefs: any[]; constructor() { // 行データと列定義を初期化します this.rowData = [ // 既存の行データ ]; this.columnDefs = [ // 列定義 ]; } // 新しい行を特定のインデックスに追加するメソッド addRowAtIndex(index: number) { const newRow = { // 新しい行のデータ }; this.rowData.splice(index, 0, newRow); } }
-
テンプレートで追加ボタンを作成し、クリックイベントで
addRowAtIndex
メソッドを呼び出します。例えば、以下のようになります:<button (click)="addRowAtIndex(2)">2番目のインデックスに行を追加</button>
これで、AG Gridに特定のインデックスに新しい行を追加する方法がわかりました。上記の手順に従ってコードを実装し、必要に応じて独自の行データと列定義を追加してください。