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

Sean LaFlam
Sep 29 · 4 min read
Image for post
Image for post
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.

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:

And our table looks like this:

Image for post
Image for post
Not the prettiest! Maybe we can add some CSS styling!

Now we need to modify our index action in the PlayersController

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:

Image for post
Image for post
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)

Image for post
Image for post
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:

Our page will now look like this:

Image for post
Image for post

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.

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

Image for post
Image for post

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

The Startup

Medium's largest active publication, followed by +733K people. Follow to join our community.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store