0

I have a list of elements that changes regularly and instead of displaying them in a list format (one list element per line) I'd like to display this in a table/grid format (3-4 elements per line).

What's the best way to do this using haml or erb? I'm using bootstrap as well so if there's an easy way to do this using that framework, it might be nice.

3
  • @locoboy- Are you talking about something like this? getbootstrap.com/2.3.2/base-css.html#tables Apr 1, 2014 at 8:05
  • yes but it has to be dynamic since the list size keeps changing.
    – locoboy
    Apr 1, 2014 at 17:29
  • let's say that you have an array of things you want to show in a table. How would you format the view such that as you go through the array it will populate a table not a list of items.
    – locoboy
    Apr 5, 2014 at 23:58

1 Answer 1

0

Here's my solution with Haml and Bootstrap (two different versions). The Ruby each_slice method does the hard work.

I have Continent and Country models. On the Continent page, I display all of the countries for a given continent in a table. The number of columns in the table is defined in a model method in the Continent model.

continents_controller.rb:

def show
  @continent = Continent.find(params[:id])
  @country_rows = Country.where(:continent_id => params[:id]).map {|c| c.name}.each_slice(Continent.number_of_table_columns).to_a
  ...
end

Haml:

.row
  .col-md-12
    %table.table
      %tbody
        - @country_rows.each do |country_row|
          %tr
            - country_row.each do |country|
              %td= country

continent.rb:

class Continent < ActiveRecord::Base
    ...
    def self.number_of_table_columns
      4
    end
end

Html output (sample):

  <div class='row'>
    <div class='col-md-12'>
      <table class='table'>
        <tbody>
          <tr>
            <td>Spratly Islands</td>
            <td>Vietnam</td>
            <td>Azerbaijan</td>
            <td>Georgia</td>
          </tr>
          <tr>
            <td>Sri Lanka</td>
            <td>Israel</td>
            <td>Cyprus</td>
            <td>Yemen</td>
          </tr>
          <tr>
            <td>Maldives</td>
            <td>Kuwait</td>
            <td>West Malaysia</td>
            <td>Nepal</td>
          </tr>
          ...
        </tbody>
      </table>
    </div>
  </div>

Here's another alternative that is more convenient because the Country objects can be accessed in the view:

continents_controller.rb (2nd version):

def show
  @continent = Continent.find(params[:id])
  @country_rows_2 = Country.where(:continent_id => params[:id]).each_slice(Continent.number_of_table_columns)
  ...
end

Haml (2nd version):

.row
  .col-md-12
    %table.table
      %tbody
        - @country_rows_2.each do |country_row_2|
          %tr
            - country_row_2.each do |country_2|
              %td= country_2.name

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.