title: Create a sortable table on the client side using calculated data
body: <p>I have a table that displays a name, and two values corresponding to each name that I have calculated using a loop and a progress bar for each value.</p>
  
  <p>The code looks something like this,</p>
  
  <pre><code>&lt;table&gt;
  &lt;thead&gt;
  &lt;th&gt;Name&lt;/th&gt;
  &lt;th&gt;Value1&lt;/th&gt;
  &lt;th&gt;Value2&lt;/th&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
  &lt;% i=0 %&gt;
  &lt;% j=0 %&gt;
  &lt;% @department.members.each do |members| %&gt;
  &lt;td&gt;&lt;td&gt;&lt;% members.name %&gt;&lt;td&gt;
  &lt;% members.evals.each do |evals| %&gt;
  &lt;% i+=value1 * something %&gt;
  &lt;% j+=value2 * something %&gt;
  &lt;% end %&gt;
  &lt;tr&gt;
  &lt;td&gt;
  &lt;div class="progress"&gt;&lt;div class="bar" style="width: &lt;%= (i*10).round() %&gt;%;"&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;%= i %&gt;
  &lt;/td&gt;
  &lt;td&gt;
  &lt;div class="progress"&gt;&lt;div class="bar" style="width: &lt;%= (j*10).round() %&gt;%;"&gt;&lt;/div&gt;&lt;/div&gt;
  &lt;%= j %&gt;
  &lt;/td&gt;
  &lt;% end %&gt;
  &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>I wish to allow the user to click the heads and sort this information dynamically without changing the page on the client side, as well as create a drop-down menu above the table that allows the user to do the same. "Sort by value2" and "Sort by value1".</p>
  
  <p>I am using bootstrap, so I don't want to use <code>DataTables</code>. Even their bootstrap theme doesn't look like boostrap. I just want a simple sort while preserving my current styling.</p>