<table class="bk-bs-table bk-bs-table-bordered">
  <thead>
    <% if @counts: %>
      <th>counts</th>
    <% end %>
    <th>index</th>
    <% for column in @columns: %>
      <% if not @skip[column]: %>
        <th style="white-space: nowrap;" data-cdx-column="<%= column %>">
          <a class="pandascolumn"><%= column %></a>
          <% if @sort_ascendings[column] == true: %>
            <i class="cdx-column-sort fa fa-sort-up"></i>
          <% else if @sort_ascendings[column] == false: %>
            <i class="cdx-column-sort fa fa-sort-down"></i>
          <% else: %>
            <i class="cdx-column-sort fa fa-sort"></i>
          <% end %>
        </th>
      <% end %>
    <% end %>
  </thead>
  <% for idx in _.range(@length): %>
  <tr class="pandasrow" rownum="<%= idx %>">
    <% if @selected and @selected[idx]: %>
      <td style="background-color:<%= @colors[idx] %>">
        <%= @selected[idx] %>/<%= @counts[idx] %>
      </td>
    <% else: %>
      <td> <%= @counts[idx] %> </td>
    <% end %>
    <td> <%= @index[idx] %> </td>
    <% for column in @columns: %>
      <% if not @skip[column]: %>
      <td> <%= @data[column][idx] %> </td>
      <% end %>
    <% end %>
  </tr>
  <% end %>
</table>
<form>
  <center>
    <ul class="pagination">
      <li><a href="javascript://" class="cdx-go-first">First</a></li>
      <li><a href="javascript://" class="cdx-go-prev">Previous</a></li>
      <li><a href="javascript://" class="cdx-go-next">Next</a></li>
      <li><a href="javascript://" class="cdx-go-last">Last</a></li>
    </ul>
    <div class="paginatedisplay">
      Show <input type="text" class="pandassize" value="<%= @length %>"> records
      From <input type="text" class="pandasoffset" value="<%= @offset %>">
      to <%= @length + @offset %> -
      Total: <%= @totallength %>
    </div>
  </center>
</form>
