bswift Styleguide: Tables

Generic Table

This is a table without any classes applied. Base styles can be found in the file tables.css.
Table headers should not be surrounded by <b>.
If column sorting is not enabled, the class 'header' should not be used.

Here is a header	Here is a header
This table is generic with no classes	This table is generic with no classes
This table is generic with no classes	This table is generic with no classes

HTML

<table>
  <thead>
    <tr>
      <th scope="col" >Here is a header</th>
      <th scope="col" >Here is a header</th>
    </tr>
  </thead>
  <tbody>
      <tr>
        <td>This table is generic with no classes</td>
        <td>This table is generic with no classes</td>
      </tr>
      <tr>
        <td>This table is generic with no classes</td>
        <td>This table is generic with no classes</td>
      </tr>
  </tbody>
</table>

Zebra Table

This table has zebra striping.

Here is a header	Here is a header
This table has zebra striping	This table has zebra striping
This table has zebra striping	This table has zebra striping
This table has zebra striping	This table has zebra striping
This table has zebra striping	This table has zebra striping
This table has zebra striping	This table has zebra striping

HTML

<table>
  <thead>
    <tr>
      <th scope="col" >Here is a header</th>
      <th scope="col" >Here is a header</th>
    </tr>
  </thead>
  <tbody>
    <tr class="odd">
      <td>This table has zebra striping</td>
      <td>This table has zebra striping</td>
    </tr>
    <tr>
      <td>This table has zebra striping</td>
      <td>This table has zebra striping</td>
    </tr>
  </tbody>
</table>

Tables with Sortable Columns - .NET Version

Tables that have column sorting enabled should have the class "header" applied to the tr inside the thead element.
The header content is surrounded with an <a href=""> tag dynamically and the hover and active states are applied in the backend code.

Here is a header	Here is a header
1 This table is sortable (but not in this example because the backend code is not set up)	active class is set with .NET
2 This table is sortable (but not in this example because the backend code is not set up)	active class is set with .NET

HTML

<table>
  <thead>
    <tr class="header">
      <th scope="col" >Here is a header</th>
      <th scope="col" >Here is a header</th>
  </tr>
  </thead>
  <tbody>
    <tr>
      <td>1 This table is sortable</td>
      <td>active class is set with .NET</td>
    </tr>
    <tr>
      <td>2 This table is sortable</td>
      <td>active class is set with .NET</td>
    </tr>
  </tbody>
</table>

Tables with Sortable Columns - jQuery Version

This is useful for sorting tables that are small enough to be loaded all at once without slowing the page. Example: Admin > User Admin > Special Enrollment.
Make sure to include the jQuery library and the tablesorter plugin inside the <head> tag of your HTML Document. (Documentation)

JS

<script type="text/javascript" src="/path/to/jquery.min.js"></script>
<script type="text/javascript" src="/path/to/jquery.tablesorter.min.js"></script>

Example

Here is a header	Here is a header
1 This table is sortable	3 This table is generic with no classes
2 This table is sortable	4 This table is generic with no classes

HTML

<table name="example-table-sort">
  <thead>
      <tr class="header">
          <th scope="col" >Here is a header</th>
          <th scope="col" >Here is a header</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td>1 This table is sortable</td>
          <td>3 This table is generic with no classes</td>
      </tr>
      <tr>
          <td>2 This table is sortable</td>
          <td>4 This table is generic with no classes</td>
      </tr>
  </tbody>
</table>

JS

//You can use a table ID, class or name as the selector
$(document).ready(function(){
  $("[name=example-table-sort]").tablesorter();
});

Table Pagination Controls - .NET Version

Classes and javascript are set in the code behind.

HTML

                                  
<div class="pager">
  <div class="per-page-listmenu">
      <select name="" class="search_results select-menu" 
      onchange="javascript:__doPostBack('items',this.options[this.selectedIndex].value)">
          <option value="5">5 items per page</option>
          <option selected="selected" value="10">10 items per page</option>
          <option value="25">25 items per page</option>
          <option value="50">50 items per page</option>
          <option value="75">75 items per page</option>
          <option value="100">100 items per page</option>
      </select>
  </div>
  <div class="pagination-controls">
      <ul>
          <li class="first-page">
            <a href="javascript:__doPostBack('page','First')" class="control-button"> 
              <img src="/images/btn-icon-first.gif" alt="first page" />
            </a>
          </li>
          <li class="previous-page">
            <a href="javascript:__doPostBack('page','First')" class="control-button">
              <img src="/images/btn-icon-previous.gif" alt="previous" /> 
            </a>
          </li>
      </ul>
      <div class="pages-listmenu">
          Page
          <select class="select-menu" onchange="javascript:__doPostBack('page',this.selectedIndex)">
              <option selected="selected">1</option>
              <option>2</option>
              <option>228</option>
          </select>
          of <span class="total-pages">10</span>
      </div>
      <ul>
          <li class="next-page">
            <a href="javascript:__doPostBack('page','Next')" class="control-button">
              <img src="/images/btn-icon-next.gif" alt="next page" /> 
            </a>
          </li>
          <li class="last-page">
            <a href="javascript:__doPostBack('page','Last')" class="control-button"> 
              <img src="/images/btn-icon-last.gif" alt="last page" /> 
            </a>
          </li>
      </ul>
  </div>
</div>

Table Pagination Controls - jQuery Version

This is useful for adding pagination to tables that are small enough to be loaded all at once without slowing the page.

HTML

coming soon

Responsive Table w/ JavaScript

The responsiveTable('selector'); function can be used to force tables to respond responsively.

Your tableID must be written like a jquery selector ending in 'table'.
For instance, if your table doesnt have an id, you can call "body.enrollment #beneficiary table"
If your table does have an id, you can just say like "table#awesomeTable"

Header #1	Header #2
This table is generic with no classes	This table is generic with no classes
This table is generic with no classes	This table is generic with no classes

HTML

<table id="responsiveSample">
  <thead>
    <tr>
      <th>Header #1</th>
      <th>Header #2</th>
      </tr>
  </thead>
  <tbody>
    <tr>
      <td>This table is generic with no classes</td>
      <td>This table is generic with no classes</td>
    </tr>
    <tr>
      <td>This table is generic with no classes</td>
      <td>This table is generic with no classes</td>
    </tr>
  </tbody>
</table>

JS

<script>
  responsiveTable('table#responsiveSample');
</script>

Responsive Table - Manual

Using the following structure, you can manually create a responsive table, without running javascript.

Header #1	Header #2
Header #1 This table is responsive	Header #2 This table is responsive
Header #1 This table is gresponsive	Header #2 This table is responsive

HTML

<table class="responsiveTable">
  <thead>
    <tr>
      <th>
        Header #1
      </th>
      <th>
        Header #2
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <span class="responsiveTableCellHead">Header #1</span>
        <div class="responsiveTableCell">This table is responsive</div>
      </td>
      <td>
        <span class="responsiveTableCellHead">Header #2</span><
        <div class="responsiveTableCell">This table is responsive</div>
      </td>
    </tr>
    <tr>
      <td>
        <span class="responsiveTableCellHead">Header #1</span>
        <div class="responsiveTableCell">This table is generic with no classes</div>
      </td>
      <td>
        <span class="responsiveTableCellHead">Header #2</span>
        <div class="responsiveTableCell">This table is generic with no classes</div>
      </td>
    </tr>
  </tbody>
</table>