Ionic 2 - Tables

Question

I'd like to build tables using ionic just like in Bootstrap.

I'd like my tables to look like THIS LINK'S examples.

So, the feature that I couldn't find in Ionic's Docs was "table headers". All the examples I'm finding do not consider table headers.

Also, is there a native way in Ionic to make table rows colored like Bootstrap's "Contextual Table Layout" and responsive, like " Responsive Table Layout" examples in this link?

Solution

You can make your ionGrid look like the ones in that link with just a few style rules. Just like you say, docs don't say anything about headers, but you can use the <strong></strong> html element there:

  <!-- Header -->
  <ion-row>
    <ion-col>
      <strong>Product</strong>
    </ion-col>
    <ion-col>
      <strong>Payment Date</strong>
    </ion-col>
    <ion-col>
      <strong>Status</strong>
    </ion-col>
  </ion-row>

And I think there's not a native way to make table rows colored like Bootstrap's "Contextual Table Layout" but you can achieve that with just a few style rules:

ion-row.active {
  background-color: #f5f5f5;
}

ion-row.success {
  background-color: #dff0d8;
}

ion-row.warning {
  background-color: #fcf8e3;
}

ion-row.error {
  background-color: #f2dede;
}

And about the Responsive Table Layout, even though we could achieve that by playing with the overflow CSS property, I don't think that's a good idea because it may affect other things like the sliding effect to open the side menu, or things like that. If the width of the table is too big to fit the screen, instead of making it scrollable a better solution would be just to show a column or two with the most important data, and include a button that takes you to a details page where you can see the rest of that information.

---

UPDATE

As of Ionic 3.0.0, the Grid component has been updated, and a lot of new features were included. You can take a look at this working plunker to see some of the new features of the new grid component.

Comments

[Aleksandrus]

I managed to do it the way you specified. The problem was that, by not having a "header", they would not be synchronized when I was using responsiveness (with scrolling). I managed to fix it using white-space: pre-line on <ion-col> elements.

[Aleksandrus]

Using google chrome's dev tools, I saw that a scrollable grid does not affect a side menu at all. But as we're dealing with html and css, I can't be sure if it will work on all devices and/or apps. So for now I'd say "yeah, use it scrollable"

[sebaferreras]

Glad to hear that :) The white-space: pre-line on <ion-col> elements is a great solution for that issue!

[Kasisnu]

That plunker doesn't exist anymore.

[Guillaume]

I think the biggest problem here is that this will not behave like a table at all, having the columns always be the same size on different rows. It does work if the content can wrap, but otherwise the layout is completely broken

[sebaferreras]

@Guillaume the Grids component from Ionic has been updated, and a lot of new features were included. You can take a look at the Grid docs

[Guillaume]

@sebaferreras yes and?

[sebaferreras]

@Guillaume just wanted to mention that now many of the concepts used in Bootstrap grids, are now available in Ionic grids as well. I've added a plunker with some of the examples of Ionic docs

[Guillaume]

@sebaferreras ok but your plunker doesn't help in having a responsive table using ion-grid even with the latest changes in 3.0.0. It's more a copy-paste of some documentation

[sebaferreras]

I'm not sure of what do you mean by responsive table and I've said in my comment that the plunker just includes some examples from the doc: I've added a plunker with some of the examples of Ionic docs. The plunker is just to see the result of what's included in the docs, nothing else.