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 want:

enter image description here

I can use this but how can I divide the rows like in the picture?

<div class="list">

  <div class="item item-divider">
    Candy Bars
  </div>

  <a class="item" href="#">
    Butterfinger
  </a>

  ...

</div>

ionicframework.com/docs/components/#grid

Mark Veenstra
– Mark Veenstra

2014-10-07 11:46:34 +00:00
Commented Oct 7, 2014 at 11:46 — Mark Veenstra
– Mark Veenstra, Commented Oct 7, 2014 at 11:46

jpoveda · Accepted Answer · 2015-08-28 15:17:53Z

The flexbox grid should do what you want. You're not clear as to what limitation you ran into, so it's hard to address your specifics.

Here's a codepen with a working sample that generates your table with the first couple rows and a header: http://codepen.io/anon/pen/pjzKMZ

HTML

<html ng-app="ionicApp">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <title>Ionic Template</title>

    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet">
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script>
 </head>

  <body ng-controller="MyCtrl as ctrl">
    <ion-header-bar class="bar-stable">
        <h1 class="title">Service Provider Details</h1>
    </ion-header-bar>
    <ion-content>
        <div class="row header">
          <div class="col">Utility Company Name</div>
          <div class="col">Service Code</div>
          <div class="col">Pay Limit</div>
          <div class="col">Account Number to Use</div>
          <div class="col"></div>
        </div>
        <div class="row" ng-repeat="data in ctrl.data">
          <div class="col">{{data.name}}</div>
          <div class="col">{{data.code}}</div>
          <div class="col">LK {{data.limit}}</div>
          <div class="col">{{data.account}}</div>
          <div class="col"><button class="button" ng-click="ctrl.add($index)">Add</button></div>
        </div>
    </ion-content>
  </body>

</html>

CSS

body {
    cursor: url('http://ionicframework.com/img/finger.png'), auto;
}

.header .col {
    background-color:lightgrey;
}

.col {
    border: solid 1px grey;
    border-bottom-style: none;
    border-right-style: none;
}

.col:last-child {
    border-right: solid 1px grey;
}

.row:last-child .col {
    border-bottom: solid 1px grey;
}

Javascript

angular.module('ionicApp', ['ionic'])

.controller('MyCtrl', function($scope) {

    var ctrl = this;

    ctrl.add = add;
    ctrl.data = [
        {
            name: "AiA",
            code: "AI101",
            limit: 25000,
            account: "Life Insurance"
        },
        {
            name: "Cargills",
            code: "CF001",
            limit: 30000,
            account: "Food City"
        }
    ]

    ////////
    function add(index) {
        window.alert("Added: " + index);
    }
});

What should be done if I need only a outer border for the table?
Ion components play an important role in the layout of apps. It is recommended that you use as much as you can. In this case, I would use ion-grid to build the table.

Beeno Tung · Accepted Answer · 2019-01-20 20:41:43Z

12

This should probably be a comment, however, I don't have enough reputation to comment.

I suggest you really use the table (HTML) instead of ion-row and ion-col. Things will not look nice when one of the cell's content is too long.

One worse case looks like this:

| 10 | 20 | 30 | 40 |
| 1 | 2 | 3100 | 41 |

Higher fidelity example fork from @jpoveda

edited Jan 20, 2019 at 20:41

answered Mar 1, 2017 at 8:19

Beeno Tung

1,29012 silver badges18 bronze badges

1 Comment

Scott Romack Over a year ago

If it is tabular data use an HTML table. It is more accessible than a bunch of divs. If you need to turn it into a list at smaller breakpoints you can do that with a real table. Using HTML tables is bad for layout but not bad for tabular data.

Gustavo Daniel · Accepted Answer · 2022-07-08 02:37:25Z

Simply, for me, I used ion-row and ion-col to achieve it. You can make it more neater by doing some changes by CSS.

<ion-row style="border-bottom: groove;">
    <ion-col col-4>
      <ion-label >header</ion-label>
    </ion-col>
    <ion-col col-4>
      <ion-label >header</ion-label>
    </ion-col>
    <ion-col col-4>
      <ion-label >header</ion-label>
    </ion-col>
  </ion-row>
  <ion-row style="border-bottom: groove;">
    <ion-col col-4>
      <ion-label >row</ion-label>
    </ion-col>
    <ion-col col-4>
      <ion-label >02/02/2018</ion-label>
    </ion-col>
    <ion-col col-4>
      <ion-label >row</ion-label>
    </ion-col>
  </ion-row>
  <ion-row style="border-bottom: groove;">
    <ion-col col-4>
      <ion-label >row</ion-label>
    </ion-col>
    <ion-col col-4>
      <ion-label >02/02/2018</ion-label>
    </ion-col>
    <ion-col col-4>
      <ion-label >row</ion-label>
    </ion-col>
  </ion-row>
  <ion-row >
    <ion-col col-4>
      <ion-label >row</ion-label>
    </ion-col>
    <ion-col col-4>
      <ion-label >02/02/2018</ion-label>
    </ion-col>
    <ion-col col-4>
      <ion-label >row</ion-label>
    </ion-col>
  </ion-row>

Pedro Barbosa · Accepted Answer · 2020-10-19 12:39:15Z

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

Taha · Accepted Answer · 2017-08-03 10:16:38Z

1

the issue of too long content @beenotung can be resolved by this css class :

.col{
  max-width :20% !important;
}

example fork from @jpoveda

edited Aug 3, 2017 at 10:16

answered Aug 3, 2017 at 9:35

Taha

1,2922 gold badges17 silver badges33 bronze badges

Comments

monkey · Accepted Answer · 2019-09-19 22:03:33Z

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!

answered Sep 19, 2019 at 22:03

monkey

1,7332 gold badges21 silver badges46 bronze badges

1 Comment

Dan Chase Over a year ago

Just a comment, not judging, but I've spent entire days for example trying to get various datatables angular packages to do what I needed them to do for either lack of documentation, bugs, or just general /it must do all/ craziness. As a result I roll my own quite often, doesn't take much once you've created one that works to just copy/paste to all of your projects. The key is to nail responsiveness and sorting, make it only as configurable as it needs to be to keep complexity as low as possible and you'll be fine in just a few hours total the first time.

bunny · Accepted Answer · 2019-06-03 11:34:47Z

.html file

<ion-card-content>
<div class='summary_row'>
      <div  class='summarycell'>Header 1</div>
      <div  class='summarycell'>Header 2</div>
      <div  class='summarycell'>Header 3</div>
      <div  class='summarycell'>Header 4</div>
      <div  class='summarycell'>Header 5</div>
      <div  class='summarycell'>Header 6</div>
      <div  class='summarycell'>Header 7</div>

    </div>
    <div  class='summary_row'>
      <div  class='summarycell'>
        Cell1
      </div>
      <div  class='summarycell'>
          Cell2
      </div>
        <div  class='summarycell'>
            Cell3
          </div>

      <div  class='summarycell'>
        Cell5
      </div>
      <div  class='summarycell'>
          Cell6
        </div>
        <div  class='summarycell'>
            Cell7
          </div>
          <div  class='summarycell'>
              Cell8
            </div>
    </div>

.scss file

.row{
    display: flex;
    flex-wrap: wrap;
    width: max-content;
}
.row:first-child .summarycell{
    font-weight: bold;
    text-align: center;
}
.cell{
    overflow: auto;
    word-wrap: break-word;
    width: 27vw;
    border: 1px solid #b3b3b3;
    padding: 10px;
    text-align: right;
}
.cell:nth-child(2){
}
.cell:first-child{
    width:41vw;
    text-align: left;
}

Complete mismatch between html and scss class. And snippet not working

zahid mohammed · Accepted Answer · 2019-09-20 10:02:40Z

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>

William Lee · Accepted Answer · 2019-11-19 23:03:17Z

0

In Ionic 2 there's a easier way to do that. See the Ionic Docs.

It is more or less like the following:

<ion-grid>
  <ion-row>
    <ion-col>
      1 of 3
    </ion-col>
    <ion-col>
      2 of 3
    </ion-col>
    <ion-col>
      3 of 3
    </ion-col>
  </ion-row>
</ion-grid>

edited Nov 19, 2019 at 23:03

William Lee

1742 silver badges16 bronze badges

answered Mar 18, 2018 at 9:38

Oswald

1,27020 silver badges32 bronze badges

Collectives™ on Stack Overflow

creating a table in ionic

9 Answers 9

2 Comments

1 Comment

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

2 Comments

1 Comment

Comments

Comments

Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related