• Ivy Seo

ngx-datatable ver. 1

How is how I created a data table :


component.html file:

<p style="font-weight: bold; font-size: larger; color: yellow;"> M7 Log Data Report </p>
<ngx-datatable class="ngx-datatable" style=
" border-spacing: 3%;  padding: 2%;"

  [columnMode]="ColumnMode.force"
  [headerHeight]="50"
  [footerHeight]="50"
  [rowHeight]="'auto'"
  [limit]="50"
  [columns]="columns"
  [rows]="rows" 
  [scrollbarH]="true"
 >
</ngx-datatable>


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 []
      });
    }
}