Skip to content
Create a gist now

Instantly share code, notes, and snippets.

Incorporate Bootstrap Styling into Sortable Table Helper
table th.headerSortUp,table th.headerSortDown{background-image:url(<%= asset_path('glyphicons/tablesorter-indicators.png') %>);background-position:right -23px;background-repeat:no-repeat;background-color:rgba(141, 192, 219, 0.25);-moz-border-radius:3px 3px 0 0;border-radius:3px 3px 0 0;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);}
table th.header:hover{background-image:url(<%= asset_path('glyphicons/tablesorter-indicators.png') %>);background-position:right 15px;background-repeat:no-repeat;}
table th.actions:hover{background-image:none !important;}
table th.headerSortDown,table th.headerSortDown:hover{background-position:right -25px;}
table th.headerSortUp,table th.headerSortUp:hover{background-position:right -65px;}
table th.yellow{color:#ffc40d;border-bottom-color:#ffc40d;}
table th.headerSortUp.yellow,table th.headerSortDown.yellow{background-color:#fff6d9;}
table th.purple{color:#7a43b6;border-bottom-color:#7a43b6;}
table th.headerSortUp.purple,table th.headerSortDown.purple{background-color:#e2d5f0;}
#Place this code in your application_helper.rb
def sortable(column, title = nil)
title ||= column.titleize
css_class = column == sort_column ? "#{sort_direction}" : nil
direction = column == sort_column && sort_direction == "asc" ? "desc" : "asc"
if css_class == "asc"
header_class = "headerSortDown"
elsif css_class == "desc"
header_class = "headerSortUp"
content_tag("th", title, :"data-link" => url_for(params.merge(:sort => column, :direction => direction, :page => nil)), :class => "header multiSort #{header_class}")
Link to older version of the asset on github:
//This code makes the th tag clickable and looks at the data-link tag we set for the url
window.location.href = $(this).data('link');
<!-- This is how we would use our sortable helper method in our view -->
<table class="zebra-striped">
<%= sortable "name", "Company" %>
<% for company in @companies %>
<%= %>
<% end %>

This code was based of of Ryan B's Railscasts -


very nice. curious though. how are you showing icon indicators? i've been attempting to cludge in the
<i class='icon-chevron-up/down'></i> into the th conditionallly but without success so far.


FIgured it out. I grabbed the old CSS classes from an older version of Bootstrap as well as the older indicator PNG and incorporated back into my application.css.erb library - See able


i just hacked in font-awesome (much more flexible than glyphicons) into my rails project and did this -

th.headerSortUp:after {
  font-family: 'FontAwesome';
  content: "  \f077";
th.headerSortDown:after {
  font-family: 'FontAwesome';
  content: "  \f078";

Nicely done as well


Nice work, I've implemented all of this and it works well, with one exception. I'm using the themed option of the twitter-bootstrap-rails gem, and implementing sortable columns completely messes up the column sizing of the table. I'm completely at a loss as to how to fix this, any ideas?


Same problem as above. Plus the icons don't show up at all.

The only thing I can say is that it doesn't break the application, but I can't figure out the difference between with or without it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.