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

Question

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.

Pavling · Accepted Answer · 2011-06-29 21:32:26Z

11

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.

answered Jun 29, 2011 at 21:32

Pavling

3,9731 gold badge25 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Hayes Over a year ago

I knew ruby/rails had to have something along these lines. I've not had to do this, though, so never done the research.

Chris Barretto · Accepted Answer · 2011-06-29 23:37:50Z

1

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;}

answered Jun 29, 2011 at 23:37

Chris Barretto

9,5694 gold badges45 silver badges45 bronze badges

2 Comments

jonas Over a year ago

I agree, this doesn't answer the question asked. But probably provides the solution that would be most correct in terms of html and responsive layout. Tables should not be used for layout if there are other options

Chris Barretto Over a year ago

Thanks @jonas! I'm sure there are a bunch of different ways to do this while following best practices as web views are more demanding across mobile devices.

Chris Hayes · Accepted Answer · 2011-06-29 21:35:45Z

0

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>

answered Jun 29, 2011 at 21:35

Chris Hayes

1094 bronze badges

1 Comment

Pavling Over a year ago

If you use this approach, instead of setting "i", you can use the each_with_index method.

drummondj · Accepted Answer · 2011-06-29 21:36:55Z

0

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>

answered Jun 29, 2011 at 21:36

drummondj

1,4831 gold badge10 silver badges11 bronze badges

Comments

jfdimark · Accepted Answer · 2013-11-16 14:22:30Z

0

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

answered Nov 16, 2013 at 14:22

jfdimark

2,3691 gold badge16 silver badges27 bronze badges

Collectives™ on Stack Overflow

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

5 Answers 5

1 Comment

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related