I have implemented ag-grid-angular to showcase data in a structured table format, but the information appears jumbled up in one column.
The data for my ag-grid is sourced directly from the raw dataset.
https://i.stack.imgur.com/sjtv5.png
Below is my component.ts file setup
import { Component, OnInit } from '@angular/core';
import {AgGridModule} from 'ag-grid-angular/main';
import {GridOptions} from 'ag-grid';
@Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {
gridOptions: GridOptions;
columnDefs= [
{headerName: 'Pokemon', field: 'name'},
{headerName: 'Type', field: 'type'},
{headerName: 'Price', field: 'price'},
];
rowData = [
{name : 'Bulbasaur', type: 'plant', price: 1000},
{name : 'Bulbasaur', type: 'plant', price: 1000},
{name : 'Bulbasaur', type: 'plant', price: 1000},
{name : 'Bulbasaur', type: 'plant', price: 1000},
{name : 'Bulbasaur', type: 'plant', price: 1000},
{name : 'Bulbasaur', type: 'plant', price: 1000},
{name : 'Bulbasaur', type: 'plant', price: 1000},
{name : 'Bulbasaur', type: 'plant', price: 1000},
{name : 'Bulbasaur', type: 'plant', price: 1000},
{name : 'Bulbasaur', type: 'plant', price: 1000},
{name : 'Bulbasaur', type: 'plant', price: 1000}
];
constructor() {
this.gridOptions = <GridOptions>{
rowCount: 10
};
}
ngOnInit() {
}
}
The above code snippet showcases the declaration of rowData and colDefs
My component.html structure:
<h1>Grid example</h1>
<ag-grid-angular class = "ag-fresh"
[rowData]="rowData"
[columnDefs]="columnDefs"
[gridOptions]="gridOptions"
>
</ag-grid-angular>
App.module.ts configuration:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { MainComponent } from './main/main.component';
import {AgGridModule} from 'ag-grid-angular';
@NgModule({
declarations: [
AppComponent,
MainComponent
],
imports: [
BrowserModule,
AgGridModule.withComponents(MainComponent)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }