#28
May 07, 2007

in_groups_of

Have you ever wanted to visually line up items in rows and columns? The in_groups_of method makes this a cinch. Just watch out for the gotcha.
Download (15.3 MB, 4:25)
alternative download for iPod & Apple TV (7 MB, 4:25)
<!-- tasks/index.rhtml -->
<table>
<% @tasks.in_groups_of(4, false) do |row_tasks| %>
  <tr>
    <% for task in row_tasks %>
      <td><%= task.name %></td>
    <% end %>
  </tr>
<% end %>
</table>

RSS Feed for Episode Comments 20 comments

1. eTrueke May 07, 2007 at 04:56

Hi!

First of all, congratulations.

And second, I've a suggestion; Why not to use a ul,li list? We can write CSS to display it as a columns and the MVC will be respected.


2. Jengibre May 07, 2007 at 05:58

Extremely useful!


3. InMan May 07, 2007 at 07:35

Hey Ryan.
Just for info: Your add comment labels have mistype.
<label for"comment_name" class="required">Name:</label>
Should be for="comment_name"

Thanks for railscast :).


4. Rebort May 07, 2007 at 07:57

I am addicted to your site. Great tips once again!

I remember creating this sort of fucntionality in PHP about eight years ago -- pre CSS days and all -- and it was a bit of a nightmare.

What's the advantage, though, of using Rails for this instead of formatting with CSS?


5. Slaptijack May 07, 2007 at 08:01

Although it might be easier to accomplish this particular task via CSS, I think it's also a simple way to show the functionality of the in_groups_of() method.


6. Ryan Bates May 07, 2007 at 08:10

@InMan, thanks. I'll fix that.

@eTrueke & Rebort, if CSS will work for you, then that is definitely preferred. But sometimes you need the exact behavior only a table can provide, where you need everything to line up and you don't want the columns to be fixed width. I'm no CSS guru so I may just be missing something.

@Slaptijack, right, this was more of a way to show off in_groups_of then to push tables. You might, for example, need to use it while generating a PDF document where the rows and columns need to be strictly defined.


7. Tobias May 07, 2007 at 08:31

I enjoy watching your shows. Thanks from Germany!


8. jeroen May 07, 2007 at 10:23

your screencasts are short, extremely useful, understandable and kinda cool even.


9. Croaker May 07, 2007 at 13:43

Thanks for your good work! Your screencasts are a real time saver.


10. chineseGuy May 08, 2007 at 22:07

perfect!
完美!


11. Wincent Colaiuta May 09, 2007 at 07:48

In the last example where you use in_groups_of(4, false) does that yield valid X/HTML? ie. the last table row will not have as many TD elements as the previous rows. Don't know if that's allowed or not (it may be).


12. Benjie May 14, 2007 at 12:08

i've got the same question Wincent. I'm wondering if there isn't a way to conditionally act upon the nil objects.
I'm really interested in learning more about this technique.
Here's what I want to do:

http://www.scubadorag.com/coco/links/USAlinks.asp

We will be moving to a rails host. I've thought about doing it with modulo, but I haven't been able to wrap my head around it yet.


13. Ryan Bates May 14, 2007 at 15:01

Hmm, I'm not sure if it's valid XHTML or not. If not, you could do a nil check inside the td element like this:

<% for task in tasks_row %>
  <td>
    <% unless task.nil? %>
      ...
    <% end %>
  </td>
<% end %>

Thanks for bringing that up, good question.


14. Phillip Dec 04, 2007 at 18:08

I'm a little late getting in this game, but I've got a question I haven't been able to find the answer to. Your example displays the groups horizontally. Is there a way to display them vertically? I'd like to use this method in displaying a directory and I'd like to go down the columns first, then left to right. And since I'm not a CSS guru either, I thought I'd do it with tables.

Thanks.


15. cover Dec 24, 2007 at 15:55

@Phillip:
Probably the easier way to do that with a table is to use something like this:

<table><tr>
<% @tasks.in_groups_of(4, false) do |row_tasks| %>
  <td>
    <% for task in row_tasks %>
      <p><%= task.name %></p>
    <% end %>
  </td>
<% end %>
</tr></table>

(I don't know if it's possible to have each element in a cell, probably yes, but will be more complicated)


16. Phillip Jan 01, 2008 at 11:13

Well, I decided that I needed an actual in_vertical_groups_of. I made a post over at ruby-forum about it.

http://www.ruby-forum.com/topic/137230

Peace,
Phillip


17. Lou Jan 14, 2008 at 12:03

@Phillip

I think that Array::transpose is what you want. That should just invert the matrix and you should be good to go.

--
Lou


18. kino May 23, 2008 at 01:52

The reader should be careful to observe that philosophy (and we can deduce that this is true) is a representation of natural causes, as any dedicated reader can clearly see.


19. ben Sep 03, 2008 at 11:24

Using transpose for top-down layout:

<% n = 3 %>
<% a.in_groups_of((a.length/n).ceil).transpose.each do |row| %>

taken from

http://ruby-on-the-interrails.blogspot.com/2008/09/method-of-day-arrayingroupsof.html


20. buy pills mastercard Dec 30, 2008 at 05:07

buy pills with mastercard

Add your comment:

(SKIP THIS ONE)

(required)

(not shown)


(use pastie or gist for code)

sponsored by:
if you want to help:
required:
Get Quicktime Player