How to display a 5-14 column table in ionic 2 - ionic-framework

Question

i have a requirement where presently im displaying the dynamic data using ion-col in that i m displaying column more than 8 Fields but it is not cumming responsive & here i require a suggestion how to display a table which have more than 5 max 14 fields using ionic 2

Answer 1

By default Ionic 2 grid comes with a 12 columns pattern, you can change it using SASS ans styling guides
Here's a link to Number of columns. What you need to do is simply add the following code in your variables.scss under theme folder:
$grid-columns: 14;
This will force your grid to have 14 columns instead of the default 12.
About the minimun of 5 columns there's no way to controll it, there's no minimun columns value, you'll need to proramatically assure that there's at least 5 columns, a way of doing this is using a total of columns that'll end up beeing represented in the screen as 5 columns, something like:
<ion-grid>
<ion-row>
<!-- assuming you're using 14 columns, if you're not all col- attributes must be col-2 -->
<ion-col col-3></ion-col>
<ion-col col-3></ion-col>
<ion-col col-3></ion-col>
<ion-col col-3></ion-col>
<ion-col col-2></ion-col>
</ion-row>
</ion-grid>
Hope this helps.

Answer 2

If you have maximum 14 columns requirement, then you need to do some customization.
Like, You have to divide 100% width by 14 (100/14= 7.14 %), Give width of 7.14% to the div or td you are using. and you will be able to manage 14 columns in your app.
.div_width{
width:7.14%;
display:inline-block;
}
<ion-list>
<ion-grid>
<ion-row>
<ion-col col-12 text-center>
<div class="div_width">
content here
</div>
</ion-col>
</ion-row>
</ion-grid>
</ion-list>