SemanSemantic-UItic-UI/node/src/documents/collections/table.html

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

title  : 'Table'
type   : 'UI Collection'
---

<div class="segment">
  <div class="container">
    <h1>Tables</h1>
    <p>Tables are useful for displaying collections of tuples.</p>
    <p> 
      Tables consist of an optional table header, content, and table footer. They may be formatted to show numeric content or for rows of text.
    </p>
    <p>Although no plugin has been created using the <a href="generated/multiple.html">semantic module spec</a> for sorting tables, other plugins such as kylefox's <a href="https://github.com/kylefox/jquery-tablesort">tablesort</a> may be useful.</p>
  </div>
</div>
<div class="main container">
  
  <div class="peek">
    <div class="ui vertical pointing menu">
      <a class="active item">Standard</a>
      <a class="item">States</a>
      <a class="item">Variations</a>
    </div>
  </div>
  
  <h2>Standard</h2>
  <div class="example">
    <h4>Table</h4>
    <p>A standard table</p>
    <table class="ui 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>
      <tfoot>
        <th colspan="3">
          <div class="ui blue button"><i class="icon plus-circle"></i> Add User</div>
        </th>
      </tfoot>
    </table>
  </div>
  

  <h2>States</h2>
  
  <div class="example">
    <h4>Positive / Negative</h4>
    <p>A cell may let a user know whether a value is good or bad:</p>
    <table class="ui grid table">
      <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 check"></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>Cells</h3>
  <div class="example">
    <h4>Error</h4>
    <p>A cell or row may alert the user to an error or a negative value:</p>
    <table class="ui grid table">
      <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><i class="icon attention-circle"></i> Cannot pull data</td>
          <td>None</td>
        </tr>
        <tr>
          <td>Jamie</td>
          <td>Approved</td>
          <td class="error"><i class="icon attention-circle"></i> Classified</td>
        </tr>
        <tr>
          <td>Jill</td>
          <td>Approved</td>
          <td>None</td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <div class="example">
    <h4>Warning</h4>
    <p>A cell or row may warn a user:</p>
    <table class="ui grid table">
      <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="icon info"></i> Requires Action</td>
          <td>None</td>
        </tr>
        <tr>
          <td>Jamie</td>
          <td>Unknown</td>
          <td class="warning"><i class="icon info"></i> Hostile</td>
        </tr>
        <tr>
          <td>Jill</td>
          <td>Unknown</td>
          <td>None</td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <div class="example">
    <h4>Active</h4>
    <p>A cell or row can be active:</p>
    <table class="ui grid table">
      <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 class="example">
    <h4>Disabled</h4>
    <p>A cell can be disabled:</p>
    <table class="ui grid table">
      <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>Variations</h2>
  
  <div class="example">
    <h4>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 grid table collapsing">
      <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>Grid</h4>
    <p>A table may have a grid to help differentiate cells</p>
    <table class="ui grid 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>
      <tfoot>
        <th>3 People</th>
        <th>2 Approved</th>
        <th></th>
      </tfoot>
    </table>
  </div>
  
  <div class="example">
    <h4>Sortable</h4>
    <p>A table may allow a user to sort contents by clicking on a table header.</p>
    
    <p>Adding a classname of ascending or descending, will show the user the direction of sort. This example uses a modified version of the kylefox's <a href="library/tablesort.js">tablesort plugin</a> to provide the proper class names.</p>
    
    <table class="ui sortable grid table">
      <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>Padded</h4>
    <p>A table may sometimes need to be more padded for legibility</p>
    <table class="ui padded grid table">
      <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>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 grid 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>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>Size</h4>
    <p>A table can also be small or large</p>
    <table class="ui small 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>
      <tfoot>
        <th>3 People</th>
        <th>2 Approved</th>
        <th></th>
      </tfoot>
    </table>
    <br><br>
    <table class="ui large 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>
      <tfoot>
        <th>3 People</th>
        <th>2 Approved</th>
        <th></th>
      </tfoot>
    </table>
  </div>
</div>
</body>

</html>