1.

How can we show tabular data in responsive manner in ionic?

Answer»

Tabular data can be shown in a responsive MANNER using ion-grid UI component. 

Below example displays 6 column layout for extra large screens (xl, min-width 1200px), 4 column layout for large screens (LG, min-width: 992 px), 3 column layout for medium size screens(md, min-width:768px) , 2 column layout for small screens(sm, min-width:576px) and single column layout for extra small screens (XS, min-width:0). 

<ion-grid>  <ion-row>  <ion-col size=12 size-xl=2 size-lg=3 size-md=4 size-sm=6 size-xs=12 *NGFOR="let item of  ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec']; let i = index">  <ion-badge SLOT="start"> {{i}} </ion-badge>  <ion-label> {{item}} </ion-label>  </ion-col>  </ion-row>  </ion-grid>


Discussion

No Comment Found

Related InterviewSolutions