Using Rails and HTML to View, Sort, and Search Tables.

By the end of this you will be a table-searching wizard.

The idea to write this blog came out during my Mod2 Project at Flatiron School, during which my Partner Austin Buhler and I decided to create a Fantasy Football Lineup Optimizer. We built a large pool of NFL Players, and very quickly I realized we had a need to sort and filter this table by multiple attributes, as well as search the table for certain values. Unfortunately, I had no idea how to do this. So began my dive into the world of Tables, HTML, and Rails.

Creating Tables in HTML View Pages

We’ll start by defining our table of NFL Players. Each player has a name attributes, position attribute, and an aggregate ranking.

#views/players/index.html.erb
<h1>Players List</h1>
<table>
  <tr>
    <th>Player Name </th>              <-- Each of these
    <th>Position </th>                      is a column header
    <th>Avg. Ranking </th>
  </tr>
 <% @players.each do |player| %>
  <tr>
    <td><%= player.name%></td>         <-- Each of these adds
    <td><%=player.position %></td><td>     data to the corresponding
    <td><%=player.avg_ranking %></td>      column in the same row
  </tr>
  <% end %>
 </table>

This is just a combination of HTML tags and rails methods:

• The <table> tag defines an HTML table.
• Each table row is defined with a <tr> tag
• Each table header is defined with a <th> tag
• Each table data/cell is defined with a <td> tag
• The ‘<%=’ and ‘%>’ wrappers denote Ruby code

Sorting

Now that our Table is set up, we need to add some functionality to make it easily sortable.

The first thing we’ll do is make the table headings links, so we’ll need to add link_to before each header cell’s text. The page we want each link to go to is the same page we’re on but with different query string parameters. To do that we just need to specify a hash as the second parameter to link_to.

Our new code looks like this:

<h1>Players List</h1>
<table>
  <tr>
    <th><%= link_to "Player Name", :sort => "name"%> </th>
    <th><%= link_to "Position", :sort => "position"%> </th>
    <th><%= link_to "Avg. Ranking", :sort => "avg_ranking"%> </th>
  </tr>
<% @players.each do |player| %>
  <tr>
    <td><%= player.name%></td>
    <td><%=player.position %></td><td>
    <td>  <%=player.avg_ranking %></td>
  </tr>
  <% end %>
  </table>

And our table looks like this:

Not the prettiest! Maybe we can add some CSS styling!

Now we need to modify our index action in the PlayersController

class PlayersController < ApplicationController
  def index
    @players = Player.order(params[:sort])
  end

Now, when we click the column, it will tell the index to render a new table sorted by the corresponding column attribute. It will look like this:

Notice the URL changing

This is pretty good but since Average Ranking is a method I created, and not a column, attribute, we’ll get an error if we try to sort by it. Let fix that with a little conditional logic (Shoutout to my Mod2 Project Partner Austin Buhler for helping me with this)

class PlayersController < ApplicationController
  def index
    if params[:sort] != "avg_ranking"
      @players = Player.order(params[:sort])
    elsif params[:sort] == "avg_ranking"
      @players = Player.all.sort_by{|player| player.avg_ranking}
    else
      @players = Player.all
    end
  end

Much Better!!

Searching

The final step is to allow us to search the table for a specific player’s name.

Let’s start by adding a search bar to our player’s page using the following code:

<%= form_tag(players_path, method: :get) do %>
  <p> Search for a player </p>
  <%= text_field_tag(:search, params[:search]) %>
  <%= submit_tag ("Search") %>
<% end %>

Our page will now look like this:

Whatever is entered into the search bar, will be set as the :search value in our params hash (params[:search]).

Let’s now modify our Players Controller, to further update the index action.

class PlayersController < ApplicationController
  def index
    if params[:search]
      search_players
    if params[:sort] == "avg_ranking"
      @players = Player.all.sort_by{|player| player.avg_ranking}      
    elsif params[:sort] != "avg_ranking"
     @players = Player.order(params[:sort])
    else
      @players = Player.all
    end
  end
def search_players
    if @player = Player.all.find{|player| player.name.include?(params[:search])}
      redirect_to player_path(@player)
    end
  end
def show
    @player = Player.find(params[:id])
  end
end

Now when we search a name in our players table, we get this:

And that’s all you need to know to start building, sorting, and searching tables in Rails!