Tables

Use this collection of interface elements to repurpose and help build applications. The purpose is to work as efficiently as possible to allow you to focus on solving challenges. If there is a component you need and isn’t listed, please submit your request to Web. The ticket will be reviewed for design/implementation.

Tables

Celled Table

A standard celled table.

celled

Name Age Job
James 24 Engineer
Jill 26 Engineer
Elyse 24 Designer

Code Example




  
    
Name
    Age
    Job
  

  
    

      James
      24
      Engineer
    

    

      Jill
      26
      Engineer
    

    

      Elyse
      24
      Designer

Non Celled

A table may allow a user to sort contents by clicking on a table header.

basic

Name Age Job
James 24 Engineer
Jill 26 Engineer
Elyse 24 Designer

Code Example




  
    
Name
    Age
    Job
  

  
    

      James
      24
      Engineer
    

    

      Jill
      26
      Engineer
    

    

      Elyse
      24
      Designer

Sortable

A table may allow a user to sort contents by clicking on a table header.

sortable

Extra Steps:

To make sortable tables work, add the "sortable" class, and include this javascript into your page and call $('table').tablesort() when the DOM is ready.

Name Age Job
James 24 Engineer
Jill 26 Engineer
Elyse 24 Designer

Code Example




  
    
Name
    Age
    Job
  

  
    

      James
      24
      Engineer
    

    

      Jill
      26
      Engineer
    

    

      Elyse
      24
      Designer

Striped

A table can stripe alternate rows of content with a darker color to increase contrast.

striped

Name Age Job
James 24 Engineer
Jill 26 Engineer
Elyse 24 Designer

Code Example




  
    
Name
    Age
    Job
  

  
    

      James
      24
      Engineer
    

    

      Jill
      26
      Engineer
    

    

      Elyse
      24
      Designer

Pagination / Limitation / Search

Symantic tables can integrate with DataTables - a free jQuery plug-in that allows pagnination, limitation of showing rows, and search.

Extra Steps:

To use these features you must include this js file for DataTabels. You must also call $('#example').DataTable(); when the DOM is ready. Also, make sure to change all the references to your ID in the DataTables javascript to match your ID of the table.

Name Age Job
James 24 Engineer
Jill 26 Engineer
Elyse 24 Designer
James 24 Engineer
Jill 26 Engineer
Elyse 24 Designer
James 24 Engineer
Jill 26 Engineer
Elyse 24 Designer
James 24 Engineer
Jill 26 Engineer
Elyse 24 Designer

Code Example




  
    
Name
    Age
    Job
  

  
    

      James
      24
      Engineer
    

    

      Jill
      26
      Engineer
    

    

      Elyse
      24
      Designer