Menu
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> 
348
Working with the Ionic Grid System is straightforward. There are two main classes – row for working with rows and col for columns. You can choose as many columns or rows you want. All of them will adjust its size to accommodate the available space, although you can change this behavior to suit your needs.
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); } }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
