How to best display key value pairs in a list?

Ionic Framework ionic-v3
1

Assume I have a Contact that has a lot of properties: Name, Last Name, Phone Number, Age etc. I want to display this data in an <ion-list> with <ion-item>s. Problem is, I can’t seem to find a nice component (or combination of components) to display my key value pairs with key on the left, value on the right:

| Name               Foo | 
| Last Name          Bar |
| Phone        012345555 |

Here is what I looked at:

What did I miss?

1 Like
2

Why not just style it with custom html and css?

1 Like
3

Sure I can do that.

But I thought this was such a simple and standard use case that there would be something from Ionic itself to build on.

1 Like
4

Although it can be done pretty easily using ion-item too, you might want to take a look at the powerful Grid for your current and future needs.

1 Like
5

Is https://ionicframework.com/docs/api/components/note/Note/ what you are looking for?

It is used in some of the component examples, but never explicitly mentioned in the example code shown in the component docs itself. You can combine it with a ion-label as well (although I think there is no visual difference to just using text),

1 Like
6

If you like the style of ion-label you can use it and just add readonly or disabled to the ion-input.

1 Like
7

That was it!

<ion-item>{{key}} <ion-note item-end>{{value}}</ion-note></ion-item>

This is the easiest way to just dump the data out there and still looks ok. (Pretty similar to how it look for Ionic 1 as well: http://ionicframework.com/docs/v1/components/#item-icons)

Thanks.