How to create table by using Ionic?


I have list of 600 Objects loaded from Native (Android/iOS).

I want to show them 1x600 or 3x200 where 3 is column count and 200 - rows respectively.

For now I use list 1x600:

<ion-content has-header="true" has-tabs="true" has-subheader="true" scroll="true">
    <div class="list">
      <a ng-repeat="item in items" href="#" class="item item-avatar">

What do you suggest:

  • To use list with grid layout per item (aka row)
  • To use single table 3 x N

BTW, I faced too bed performance when I try to show more then 50 items and I have Nexus 4.


For performance issues, you may want to consider using bindonce.

Take a look at Ionic’s built-in grid system :

1 Like

In addition to the grid system, the responsive breakpoints will help what ever data you’re showing adjust for smaller screens.

At a larger screen width, you could have all three columns appear as a normal table, then have them appeared stacked on top of each other for smaller screens

As seen here

At last I used this configuration:

        <div class="row" ng-repeat="pet in new_groups | limitTo:30">
            <div class="col" ng-repeat="val in pet">
                <div class="item item-button-right">
                    <a class="button button-positive" href="#/pet/{{val.eventId}}"><i class="icon ion-ios7-telephone"></i> </a>