Table in IONIC 2

Question

Hello guys I’m new in Ionic 2 and I have some questions about how to manipulate tags , I’m doing an exercise that on the screen I have a table like the image as I would this table in Ionic ?

Answer 1

Basically, that would be:

home html.:

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-grid>
    <ion-row>
      <ion-col>Qtd</ion-col>
      <ion-col>%Total</ion-col>
      <ion-col>Valor</ion-col>
    </ion-row>
    <div *ngFor="let item of lista">
      <ion-row>
        <ion-col>{{ item.qtde }}</ion-col>
        <ion-col>{{ item.perc }}</ion-col>
        <ion-col>{{ item.valor }}</ion-col>
      </ion-row>
    </div>
  </ion-grid>
</ion-content>

home ts.

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  lista=[];

  constructor(public navCtrl: NavController) {
    this.lista=[
      {qtde:1000,perc:80.2,valor:1000},
      {qtde:8500,perc:30.2,valor:2000},
      {qtde:120,perc:18.2,valor:350.52}
    ];
  }

}