• Ivy Seo

ngx-datatable ver. 2

There are several ways to display data in ngx-datatable.


How is how I created a data table using <tr>, <th>, <td> tags:


component.html file:

 <table>
 <tr>
 <th *ngFor="let col of columns" style="border-collapse: collapse !important;   text-align: left !important;  border-bottom: 1px solid #ddd !important;">
        {{col.name}}
 </th>
 </tr>
 <tr *ngFor="let row of rows" style="border-collapse: collapse !important;   text-align: left !important;">
 <td *ngFor="let col of columns" style= "border-bottom: 1px solid #ddd !important;">
        {{row[col.name]}}
 </td>
 </tr>
 </table>

component.ts file:

 export class FilterBarComponent implements OnInit {

 constructor(private http: HttpClient){}    

 ngOnInit() {
 this.get_m7log_data();
  }

 columns = [
      { name: 'logdate' },   
      { name: 'direction' },
      { name: 'latend' },
      { name: 'lathemi' },
      { name: 'lonend' },
      { name: 'lonhemi' },
      { name: 'mph' },
      { name: 'county' },
      { name: 'road' },
      { name: 'linetype' }
  ];

 rows = [];
 @ViewChild(DatatableComponent) table: DatatableComponent;

 // get m7 log  data from back-end and insert its data into the row of the table
 get_m7log_data() {  
 this.http 
      .get('http://127.0.0.1:8088/viewdata/m7log_data')
      .subscribe(data => {    // data returned
 let data_check: any = data; // set as 'any'
 this.rows = data_check; // returned data => rows []
      });
    }
}

Outcome: