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>
This question is related to
html
angularjs
ionic-framework
The answer is
the issue of too long content @beenotung can be resolved by this css class :
.col{
max-width :20% !important;
}
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>
.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{_x000D_
display: flex;_x000D_
flex-wrap: wrap;_x000D_
width: max-content;_x000D_
}_x000D_
.row:first-child .summarycell{_x000D_
font-weight: bold;_x000D_
text-align: center;_x000D_
}_x000D_
.cell{_x000D_
overflow: auto;_x000D_
word-wrap: break-word;_x000D_
width: 27vw;_x000D_
border: 1px solid #b3b3b3;_x000D_
padding: 10px;_x000D_
text-align: right;_x000D_
}_x000D_
.cell:nth-child(2){_x000D_
}_x000D_
.cell:first-child{_x000D_
width:41vw;_x000D_
text-align: left;_x000D_
}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
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>
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!
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>
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;
}
Source: Stackoverflow.com