How to create table by using Ionic?

Hello,

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">
          <pre>{{item|json}}</pre>
      </a>
    </div>
  </ion-content>

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.

Thanks

For performance issues, you may want to consider using bindonce. https://github.com/Pasvaz/bindonce

Take a look at Ionic’s built-in grid system : http://ionicframework.com/docs/components/#grid

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">
                    <h3>{{val.title}}</h3>                        
                    <a class="button button-positive" href="#/pet/{{val.eventId}}"><i class="icon ion-ios7-telephone"></i> </a> 
                </div>
            </div>             
        </div>
    </div>
2 Likes