MicFin
MicFin

Reputation: 2501

Iterating through objects to build a table with vertical headers in Rails

I would like to build a table that has vertical headings and the NAME at the top of every column except the first which would have a blank first cell and then the table headings.

My final table would be similar to this but instead of User1 and User2 it would be package1.name and package2.name. And instead of date1 and date2 it would be Category and Full Price.

table example

However, I'm struggling to find the correct way to loop through. This, of course, builds a horizontal table.

<table class="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Category</th>
      <th>Full price</th>
      <th>Description</th>
      <th>Expiration in months</th>
      <th colspan="3"></th>
    </tr>
  </thead>

  <tbody>
    <% @packages.each do |package| %>
      <tr>
        <td><%= package.name %></td>
        <td><%= package.category %></td>
        <td><%= package.full_price %></td>
        <td><%= package.description %></td>
        <td><%= package.expiration_in_months %></td>
        <td><%= link_to 'Purchase', package %></td>
        <td><%= link_to 'Edit', edit_package_path(package) %></td>
        <td><%= link_to 'Destroy', package, method: :delete, data: { confirm: 'Are you sure?' } %></td>
      </tr>
    <% end %>
  </tbody>
</table>

Upvotes: 0

Views: 874

Answers (1)

scoots
scoots

Reputation: 715

Your loop looks fine to me. Perhaps there's a better way than this, but you should just be able to add an empty th tag at the beginning of the first row.

If the empty cell is then styled incorrectly look here for help: http://www.cs.tut.fi/~jkorpela/HTML/emptycells.html

Pertaining to the vertical headers, that's just a matter of css. See this gist as an example: https://gist.github.com/aiboy/7406727

Upvotes: 1

Related Questions