SemanSemantic-UItic-UI/server/documents/collections/table.html.eco

---
layout      : 'default'
css         : 'table'

title       : 'Table'
description : 'Tables display collections of data grouped into rows'
type        : 'UI Collection'
---
<script src="/javascript/table.js"></script>

<%- @partial('header') %>

<div class="main container">

  <div class="peek">
    <div class="ui vertical pointing secondary menu">
      <a class="active item">Types</a>
      <a class="item">States</a>
      <a class="item">Variations</a>
    </div>
  </div>

  <h2 class="ui dividing header">Types</h2>
  <div class="example">
    <h4 class="ui header">Table</h4>
    <p>A standard table</p>
    <div class="ui ignored positive icon message">
      <i class="mobile icon"></i>
      <div class="content">
        <h3 class="header">Responsive Element</h3>
        <p>Tables are designed to be responsive. Table cells will stack when a mobile viewport size is reached.</p>
      </div>
    </div>
    <div class="ui ignored message">
      <p>This example uses a <a href="/elements/segment.html">segment</a> to add padding and a background color.</p>
    </div>
    <table class="ui table segment">
      <thead>
        <th>Name</th>
        <th>Status</th>
        <th>Notes</th>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Approved</td>
          <td>None</td>
        </tr>
        <tr>
          <td>Jamie</td>
          <td>Approved</td>
          <td>Requires call</td>
        </tr>
        <tr>
          <td>Jill</td>
          <td>Denied</td>
          <td>None</td>
        </tr>
      </tbody>
      <tfoot>
        <th colspan="3">
          <div class="ui blue labeled icon button"><i class="user icon"></i> Add User</div>
        </th>
      </tfoot>
    </table>
  </div>

  <h2 class="ui dividing header">States</h2>

  <div class="example">
    <h4 class="ui header">Positive / Negative</h4>
    <p>A cell or row may let a user know whether a value is good or bad</p>
    <table class="ui table segment">
      <thead>
        <th>Name</th>
        <th>Status</th>
        <th>Notes</th>
      </thead>
      <tbody>
        <tr>
          <td>No Name Specified</td>
          <td>Unknown</td>
          <td>None</td>
        </tr>
        <tr class="positive">
          <td>Jimmy</td>
          <td><i class="icon checkmark"></i> Approved</td>
          <td>None</td>
        </tr>
        <tr>
          <td>Jamie</td>
          <td>Unknown</td>
          <td class="negative"><i class="icon close"></i> Requires call</td>
        </tr>
        <tr>
          <td>Jill</td>
          <td>Unknown</td>
          <td>None</td>
        </tr>
      </tbody>
    </table>
  </div>

  <h3 class="ui header">Cells</h3>
  <div class="example">
    <h4 class="ui header">Error</h4>
    <p>A cell or row may attention the user to an error or a negative value</p>
    <table class="ui table segment">
      <thead>
        <th>Name</th>
        <th>Status</th>
        <th>Notes</th>
      </thead>
      <tbody>
        <tr>
          <td>No Name Specified</td>
          <td>Approved</td>
          <td>None</td>
        </tr>
        <tr class="error">
          <td>Jimmy</td>
          <td>Cannot pull data</td>
          <td>None</td>
        </tr>
        <tr>
          <td>Jamie</td>
          <td>Approved</td>
          <td class="error"><i class="attention icon"></i> Classified</td>
        </tr>
        <tr>
          <td>Jill</td>
          <td>Approved</td>
          <td>None</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="example">
    <h4 class="ui header">Warning</h4>
    <p>A cell or row may warn a user</p>
    <table class="ui table segment">
      <thead>
        <th>Name</th>
        <th>Status</th>
        <th>Notes</th>
      </thead>
      <tbody>
        <tr>
          <td>No Name Specified</td>
          <td>Unknown</td>
          <td>None</td>
        </tr>
        <tr class="warning">
          <td>Jimmy</td>
          <td><i class="attention icon"></i> Requires Action</td>
          <td>None</td>
        </tr>
        <tr>
          <td>Jamie</td>
          <td>Unknown</td>
          <td class="warning"><i class="attention icon"></i> Hostile</td>
        </tr>
        <tr>
          <td>Jill</td>
          <td>Unknown</td>
          <td>None</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="example">
    <h4 class="ui header">Active</h4>
    <p>A cell or row can be active or selected by a user</p>
    <table class="ui table segment">
      <thead>
        <th>Name</th>
        <th>Status</th>
        <th>Notes</th>
      </thead>
      <tbody>
        <tr>
          <td>Jamie</td>
          <td>Approved</td>
          <td>Requires call</td>
        </tr>
        <tr class="active">
          <td>John</td>
          <td>Selected</td>
          <td>None</td>
        </tr>
        <tr>
          <td>Jamie</td>
          <td>Approved</td>
          <td>Requires call</td>
        </tr>
        <tr>
          <td class="active">Jill</td>
          <td>Approved</td>
          <td>None</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="example">
    <h4 class="ui header">Disabled</h4>
    <p>A cell can be disabled</p>
    <table class="ui table segment">
      <thead>
        <th>Name</th>
        <th>Status</th>
        <th>Notes</th>
      </thead>
      <tbody>
        <tr class="disabled">
          <td>Jamie</td>
          <td>Approved</td>
          <td>Requires call</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Selected</td>
          <td>None</td>
        </tr>
        <tr>
          <td>Jamie</td>
          <td>Approved</td>
          <td>Requires call</td>
        </tr>
        <tr>
          <td class="disabled">Jill</td>
          <td>Approved</td>
          <td>None</td>
        </tr>
      </tbody>
    </table>

  </div>

  <h2 class="ui dividing header">Variations</h2>

  <div class="example">
    <h4 class="ui header">Celled</h4>
    <p>A table may be divided each row into separate cells</p>
    <table class="ui celled table segment">
      <thead>
        <th>Name</th>
        <th>Status</th>
        <th>Notes</th>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Approved</td>
          <td>None</td>
        </tr>
        <tr>
          <td>Jamie</td>
          <td>Approved</td>
          <td>Requires call</td>
        </tr>
        <tr>
          <td>Jill</td>
          <td>Denied</td>
          <td>None</td>
        </tr>
      </tbody>
      <tfoot>
        <th>3 People</th>
        <th>2 Approved</th>
        <th></th>
      </tfoot>
    </table>
  </div>

  <div class="example">
    <h4 class="ui header">Basic</h4>
    <p>A table can reduce its complexity to increase readability.</p>
    <table class="ui basic table">
      <thead>
        <th>Name</th>
        <th>Status</th>
        <th>Notes</th>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Approved</td>
          <td>None</td>
        </tr>
        <tr>
          <td>Jamie</td>
          <td>Approved</td>
          <td>Requires call</td>
        </tr>
        <tr>
          <td>Jill</td>
          <td>Denied</td>
          <td>None</td>
        </tr>
      </tbody>
    </table>
  </div>


  <div class="example">
    <h4 class="ui header">Even Width</h4>
    <p>A table can specify its column count to divide its content evenly</p>
    <table class="ui five column table segment">
      <thead>
        <th>Name</th>
        <th>Status</th>
        <th>Age</th>
        <th>Gender</th>
        <th>Notes</th>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Approved</td>
          <td>22</td>
          <td>Male</td>
          <td>None</td>
        </tr>
        <tr>
          <td>Jamie</td>
          <td>Approved</td>
          <td>32</td>
          <td>Male</td>
          <td>Requires call</td>
        </tr>
        <tr>
          <td>Jill</td>
          <td>Denied</td>
          <td>22</td>
          <td>Female</td>
          <td>None</td>
        </tr>
      </tbody>
      <tfoot>
        <th>3 People</th>
        <th>2 Approved</th>
        <th></th>
        <th></th>
        <th></th>
      </tfoot>
    </table>
  </div>

  <div class="example">
    <h4 class="ui header">Column Width</h4>
    <p>A table can specify the width of individual columns independently.</p>
    <div class="ui ignored info message">Tables use a 16 column grid. This should be the total width of all elements in a column</div>
    <table class="ui five column table segment">
      <thead>
        <th class="ten wide">Name</th>
        <th class="six wide">Status</th>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Approved</td>
        </tr>
        <tr>
          <td>Jamie</td>
          <td>Approved</td>
        </tr>
        <tr>
          <td>Jill</td>
          <td>Denied</td>
        </tr>
      </tbody>
      <tfoot>
        <th>3 People</th>
        <th>2 Approved</th>
      </tfoot>
    </table>
  </div>


  <div class="example">
    <h4 class="ui header">Collapsing</h4>
    <p>By default tables take the size of their container. A collapsing takes up only as much space as its rows.</p>
    <table class="ui collapsing table segment">
      <thead>
        <th>Name</th>
        <th>Status</th>
        <th>Notes</th>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Approved</td>
          <td>None</td>
        </tr>
        <tr>
          <td>Jamie</td>
          <td>Approved</td>
          <td>Requires call</td>
        </tr>
        <tr>
          <td>Jill</td>
          <td>Denied</td>
          <td>None</td>
        </tr>
      </tbody>
      <tfoot>
        <th>3 People</th>
        <th>2 Approved</th>
        <th></th>
      </tfoot>
    </table>
  </div>


  <div class="example">
    <h4 class="ui header">Inverted</h4>
    <p>A tables colors can be inverted</p>
    <table class="ui inverted table segment">
      <thead>
        <th>Name</th>
        <th>Status</th>
        <th>Notes</th>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Approved</td>
          <td>None</td>
        </tr>
        <tr>
          <td>Jamie</td>
          <td>Approved</td>
          <td>Requires call</td>
        </tr>
        <tr>
          <td>Jill</td>
          <td>Denied</td>
          <td>None</td>
        </tr>
      </tbody>
      <tfoot>
        <th>3 People</th>
        <th>2 Approved</th>
        <th></th>
      </tfoot>
    </table>
  </div>
  <div class="another example">
    <table class="ui inverted red table segment">
      <thead>
        <th>Name</th>
        <th>Status</th>
        <th>Notes</th>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Approved</td>
          <td>None</td>
        </tr>
        <tr>
          <td>Jamie</td>
          <td>Approved</td>
          <td>Requires call</td>
        </tr>
        <tr>
          <td>Jill</td>
          <td>Denied</td>
          <td>None</td>
        </tr>
      </tbody>
      <tfoot>
        <th>3 People</th>
        <th>2 Approved</th>
        <th></th>
      </tfoot>
    </table>
  </div>

  <div class="example">
    <h4 class="ui header">Definition</h4>
    <p>A table may be formatted specifically to provide definitions</p>
    <table class="ui definition table segment">
      <thead>
        <th>Behavior</th>
        <th>Arguments</th>
        <th>Description</th>
      </thead>
      <tbody>
        <tr>
          <td>reset rating</td>
          <td>None</td>
          <td>Resets rating to default value</td>
        </tr>
        <tr>
          <td>set rating</td>
          <td>rating (integer)</td>
          <td>Sets the current star rating to specified value</td>
        </tr>
    </table>
  </div>

  <div class="example">
    <h4 class="ui header">Sortable</h4>
    <p>A table may allow a user to sort contents by clicking on a table header.</p>

    <div class="ui warning message">Adding a classname of <code>ascending</code> or <code>descending</code> to the <code>th</code> will show the user the direction of sort. This example uses a modified version of the kylefox's <a href="https://github.com/kylefox/jquery-tablesort">tablesort plugin</a> to provide the proper class names.
    </div>

    <table class="ui sortable table segment">
      <thead>
        <th>Name</th>
        <th>Status</th>
        <th>Notes</th>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>No Action</td>
          <td>None</td>
        </tr>
        <tr>
          <td>Jamie</td>
          <td class="positive">Approved</td>
          <td class="warning">Requires call</td>
        </tr>
        <tr>
          <td>Jill</td>
          <td class="negative">Denied</td>
          <td>None</td>
        </tr>
      </tbody>
      <tfoot>
        <th>3 People</th>
        <th>2 Approved</th>
        <th></th>
      </tfoot>
    </table>
  </div>
  <div class="example">
    <h4 class="ui header">Padded</h4>
    <p>A table may sometimes need to be more padded for legibility</p>
    <table class="ui padded table segment">
      <thead>
        <th>Name</th>
        <th>Status</th>
        <th>Notes</th>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Approved</td>
          <td>He is a very nice guy and I enjoyed talking to him on the telephone. I hope we get to talk again.</td>
        </tr>
        <tr>
          <td>Jamie</td>
          <td>Approved</td>
          <td>Jamie was not interested in purchasing our product.</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="example">
    <h4 class="ui header">Compact</h4>
    <p>A table may sometimes need to be more compact to make more rows visible at a time</p>
    <table class="ui compact table segment">
      <thead>
        <th>Name</th>
        <th>Status</th>
        <th>Notes</th>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Approved</td>
          <td>None</td>
        </tr>
        <tr>
          <td>Jamie</td>
          <td>Approved</td>
          <td>Requires call</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Approved</td>
          <td>None</td>
        </tr>
        <tr>
          <td>Jamie</td>
          <td>Approved</td>
          <td>Requires call</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Approved</td>
          <td>None</td>
        </tr>
        <tr>
          <td>Jamie</td>
          <td>Approved</td>
          <td>Requires call</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Approved</td>
          <td>None</td>
        </tr>
        <tr>
          <td>Jamie</td>
          <td>Approved</td>
          <td>Requires call</td>
        </tr>
      </tbody>
    </table>
  </div>

  <div class="example">
    <h4 class="ui header">Size</h4>
    <p>A table can also be small or large</p>
    <table class="ui small table segment">
      <thead>
        <th>Name</th>
        <th>Status</th>
        <th>Notes</th>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Approved</td>
          <td>None</td>
        </tr>
        <tr>
          <td>Jamie</td>
          <td>Approved</td>
          <td>Requires call</td>
        </tr>
        <tr>
          <td>Jill</td>
          <td>Denied</td>
          <td>None</td>
        </tr>
      </tbody>
      <tfoot>
        <th>3 People</th>
        <th>2 Approved</th>
        <th></th>
      </tfoot>
    </table>
  </div>
  <div class="another example">
    <table class="ui large table segment">
      <thead>
        <th>Name</th>
        <th>Status</th>
        <th>Notes</th>
      </thead>
      <tbody>
        <tr>
          <td>John</td>
          <td>Approved</td>
          <td>None</td>
        </tr>
        <tr>
          <td>Jamie</td>
          <td>Approved</td>
          <td>Requires call</td>
        </tr>
        <tr>
          <td>Jill</td>
          <td>Denied</td>
          <td>None</td>
        </tr>
      </tbody>
      <tfoot>
        <th>3 People</th>
        <th>2 Approved</th>
        <th></th>
      </tfoot>
    </table>
  </div>
</div>