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 class="list">
<div class="item item-divider">
Candy Bars
</div>
<a class="item" 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 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('), 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
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>
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;
}
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 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!
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 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>
