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:
I can use this but how can I divide the rows like in the picture?
<div> <div> Candy Bars </div> <a href="#"> Butterfinger </a> ... </div> 9 Answers
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:
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="//" rel="stylesheet"> <script src="//"></script> </head> <body ng-controller="MyCtrl as ctrl"> <ion-header-bar> <h1>Service Provider Details</h1> </ion-header-bar> <ion-content> <div> <div>Utility Company Name</div> <div>Service Code</div> <div>Pay Limit</div> <div>Account Number to Use</div> <div></div> </div> <div ng-repeat="data in ctrl.data"> <div>{{data.name}}</div> <div>{{data.code}}</div> <div>LK {{data.limit}}</div> <div>{{data.account}}</div> <div><button ng-click="ctrl.add($index)">Add</button></div> </div> </ion-content> </body> </html> CSS
body { cursor: url('), 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); } }); 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
1Simply, 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> <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> <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> <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> This is the way i use it. It's very simple and work very well.. Ionic html:
<ion-content> <ion-grid> <ion-row> <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> <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; } the issue of too long content @beenotung can be resolved by this css class :
.col{ max-width :20% !important; } example fork from @jpoveda
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: . 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 [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!
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>
.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; }css
.table:nth-child(2n+1) { background-color: whatever color !important; } html
<ion-row 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> 
