creating a table in ionic

Question

I am in need of creating a table in Ionic. I thought of using Ionic grid but could not achieve what I wanted. How can I do this? Here is an image of something similar to what i

Answer 1

You should consider using an angular plug-in to handle the heavy lifting for you, unless you particularly enjoy typing hundreds of lines of knarly error prone ion-grid code. Simon Grimm has a cracking step by step tutorial that anyone can follow: https://devdactic.com/ionic-datatable-ngx-datatable/. This shows how to use ngx-datatable. But there are many other options (ng2-table is good).

The dead simple example goes like this:

<ion-content>
  <ngx-datatable class="fullscreen" [ngClass]="tablestyle" [rows]="rows" [columnMode]="'force'" [sortType]="'multi'" [reorderable]="false">
    <ngx-datatable-column name="Name"></ngx-datatable-column>
    <ngx-datatable-column name="Gender"></ngx-datatable-column>
    <ngx-datatable-column name="Age"></ngx-datatable-column>
  </ngx-datatable>
</ion-content>

And the ts:

rows = [
    {
      "name": "Ethel Price",
      "gender": "female",
      "age": 22
    },
    {
      "name": "Claudine Neal",
      "gender": "female",
      "age": 55
    },
    {
      "name": "Beryl Rice",
      "gender": "female",
      "age": 67
    },
    {
      "name": "Simon Grimm",
      "gender": "male",
      "age": 28
    }
  ];

Since the original poster expressed their frustration of how difficult it is to achieve this with ion-grid, I think the correct answer should not be constrained by this as a prerequisite. You would be nuts to roll your own, given how good this is!

Answer 2

css

.table:nth-child(2n+1) {
    background-color: whatever color !important;
  }

html

    <ion-row class="nameClass" justify-content-center align-items-center style='height: 100%'>

   <ion-col>
            <div>
                <strong>name</strong>
            </div>
        </ion-col>
        <ion-col>
            <div>
                <strong>name</strong>
            </div>
        </ion-col>
        <ion-col>
            <div>
                <strong>name</strong>
            </div>
        </ion-col>
        <ion-col>
            <div>
                <strong>name</strong>
            </div>
        </ion-col>
        <ion-col>
            <div text-center>
                <strong>name</strong>
            </div>
        </ion-col>
    </ion-row>

row 2

        <ion-col >
            <div>
            name
            </div>

        </ion-col>
        <ion-col >
            <div>
            name
            </div>

        </ion-col>
        <ion-col >
            <div>
               name
            </div>

        </ion-col>
        <ion-col>
            <div>
               name
            </div>

        </ion-col>
        <ion-col>
            <div>
                <button>name</button>
            </div>

        </ion-col>

Answer 3

This is the way i use it. It's very simple and work very well.. Ionic html:

  <ion-content>
 

  <ion-grid class="ion-text-center">

    <ion-row class="ion-margin">
      <ion-col>
        <ion-title>
          <ion-text color="default">
            Your title remove if don't want use
          </ion-text>
        </ion-title>
      </ion-col>
    </ion-row>

    <ion-row class="header-row">
      <ion-col>
        <ion-text>Data</ion-text>
      </ion-col>

      <ion-col>
        <ion-text>Cliente</ion-text>
      </ion-col>

      <ion-col>
        <ion-text>Pagamento</ion-text>
      </ion-col>
    </ion-row>


    <ion-row>
      <ion-col>
        <ion-text>
            19/10/2020
        </ion-text>
      </ion-col>

        <ion-col>
          <ion-text>
            Nome
          </ion-text>
        </ion-col>
  
        <ion-col>
          <ion-text>
            R$ 200
          </ion-text>
        </ion-col>
    </ion-row>

  </ion-grid>
</ion-content>

CSS:

.header-row {
  background: #7163AA;
  color: #fff;
  font-size: 18px;
}

ion-col {
  border: 1px solid #ECEEEF;
}

Result of the code