CODEWITHSUNDEEP
ruby-on-railsrubyruby-on-rails-3
ChrisWesAllen
ChrisWesAllen

Reputation: 4975

Ruby/Rails - Create a table dynamically for variable number of cells

I'm trying to display a objects in my model in the form of a table, but am having a hard time trying to create the rows and columns dynamically.

I have a model called Pictures and currently I'm displaying all of them in a looooong list.

<% for picture in @pictures %>
   <p><%= image_tag(picture.url) %></p>
<% end %>

How can I turn this into a table in the view with rails? 

<table>
<tr>
<% for picture in @pictures %>   
     <td> 
        <%= image_tag(picture.url) %>
     </td>
** Here's where I'm confused..How can I write after 6 cells create a new row?? *****
<% end %>
</table>

So the question is really related to how to breakup this type of data within the view.

Upvotes: 6

Views: 5112

Answers (5)

jfdimark
jfdimark

Reputation: 2369

Another nice way of doing this in rails is using the method in_groups_of.

So you could have

<table>
  <% @pictures.in_groups_of(6, false) do |group| %>   
    <tr>
      <% group.each do |picture| %>
        <td> 
          <%= image_tag(picture.url) %>
        </td>
      <% end %>
    </tr>
  <% end %>
</table>

Here's the documentation for that method: http://apidock.com/rails/Array/in_groups_of

Upvotes: 0

Chris Barretto
Chris Barretto

Reputation: 9529

I really dig the each_slice solution. Just thought I'd chime in if you wanted to have a non-tabular view, you could find out your max-width and max-height for your images and set a container around your photos and just use css to float them all together. Each row would contain however many would fit in your containing div.

view

<% for picture in @pictures %>
   <div class="photo">
     <%= image_tag(picture.url) %>
   </div>
   <div class="float_clear"></div>
<% end %>

css

.photo {height: 150px; width: 150px; float:left;margin:0 10px; 10px 0;}
.photo img{max-height: 150px; max-width: 150px;}
.float_clear{clear:both;}

Upvotes: 1

drummondj
drummondj

Reputation: 1483

I would use % (modulus), something like this:

<table>
  <% rows = 0 %>
  <% @pictures.each do |picture| %>
    <%= "<tr>" if rows % 6 %>
    <td><%= image_tag(picture.url) %></td>
    <% rows += 1 %>
    <%= "</tr>" if rows % 6 %>
  <% end %>
  <%= "</tr>" unless rows % 6 %>
</table>

Upvotes: 0

Chris Hayes
Chris Hayes

Reputation: 109

I'm sure ruby on rails has some helpers for this - but if not, here's how I've approached this kind of layout in my past life as a low level php developer:

Keep a count, modulo 6 (i.e. i = (i + 1) % 6). If i == 0, output <tr></tr>.

So, something like:

<% i = 0 %>
<tr>
  <%
    @pictures.each do |picture|
      i = (i + 1) % 6
  %>
    <%= '<tr></tr>' if i == 0 %>
    <td>
      <%= image_tag(picture.url) %>
    </td>
  <% end %>
</tr>

Upvotes: 0

Pavling
Pavling

Reputation: 3963

Have a look at the enumerable method ".each_slice".

http://www.ruby-doc.org/core/classes/Enumerable.html#M001514

With it you can do something along the lines of:

<table>
  <% @pictures.each_slice(6) do |slice| %>   
    <tr>
      <% slice.each do |picture| %>
        <td> 
          <%= image_tag(picture.url) %>
        </td>
      <% end %>
    </tr>
  <% end %>
</table>

You may have to do some fiddling to populate the last row nicely, but that should get you on your way.

Upvotes: 11

Related Questions