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?

Answer 1

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.