Display items in a table structure

ionic-v1
1

Is there a way to present a list of items with some fixed attributes as table\grid ?

The following works:

<table>
  <tr ng-repeat="item in items" >
     <td>{{item.att1}}</td>
     <td>{{item.att2}}</td>
     <td>{{item.att3}}</td>
  </tr>
</table>

But I wonder if there’s another way to do it, NOT using table element.

2

You could use CSS rules on a number of different html templates to achieve this:

<ul>
  <li ng-repeat="item in items" >
     <span class="cell">{{item.att1}}</span>
     <span class="cell">{{item.att2}}</span>
     <span class="cell">{{item.att3}}</span>
  </li>
</ul>

with CSS:

.cell{
   display: block;
   width: 33%
}

Or:

<div class="container">
  <div ng-repeat="item in items" >
     <div class="cell">{{item.att1}}</div>
     <div class="cell">{{item.att2}}</div>
     <div class="cell">{{item.att3}}</div>
  </div>
</div>

Width CSS:

.cell{
   width: 33%
}
3

These templates work, but not exactly as I want. In both cases I see the attributes of the same item below each other and not in the same vertical row.

4

Oops- replied to soon. Check out the updated answer above. Just a matter of adding float: left; to .cell.

5

Looks better but the values are not in the same length and not aligned nicely like they were in table’s columns… Can I align somehow using css ?

6

Anyway, I guess this is not a specific Ionic issue and there are some suggestions on the web :smile:

1 Like
7

I thought there for is the ionic grid layout…
classes row and col?

8

Indeed, loads of resources available on CSS. Definitely not an Ionic specific issue.

9

thanks. I missed this component :smile:

10

Ionic grid layout is great, but my problem is that i dont control what kind of html elements are provided from the authoring tool to my frontend ionic. So i need to style me

elements and i cant find a way to make the tables not to exceed screen size when width is higher. Do you have any solutions yet? Thanks