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
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
Ionic Template
Service Provider Details
Utility Company Name
Service Code
Pay Limit
Account Number to Use
{{data.name}}
{{data.code}}
LK {{data.limit}}
{{data.account}}
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);
}
});