article:
Mockup: Responsive Email Templates
article:
Elements Design: High Resolution Abstract Backgrounds

JS Plugin: FooTable

Advertisement

FooTable is a jQuery plugin that aims to make HTML tables on smaller devices look awesome - No matter how many columns of data you may have in them.

FooTable transforms your HTML tables into expandable responsive tables. This is how it works:

1. It hides certain columns of data at different resolutions (we call these breakpoints).
2. Rows become expandable to show the data that was hidden.


Implementation

include the FooTable CSS and JS in your page head:
<link href="css/footable-0.1.css" rel="stylesheet" type="text/css" />
<script src="js/footable-0.1.js" type="text/javascript"></script>

call the FooTable plugin:
<script type="text/javascript">
  $(function() {
    $('.footable').footable();
  });
</script>

create a simple table:
<table class="footable">
  <thead>
    <tr>
      <th>Name</th>
      <th data-hide="phone,tablet">Phone</th>
      <th data-hide="phone,tablet">Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Bob Builder</td>
      <td>555-12345</td>
      <td>bob@home.com</td>
    </tr>
    <tr>
      <td>Bridget Jones</td>
      <td>544-776655</td>
      <td>bjones@mysite.com</td>
    </tr>
    <tr>
      <td>Tom Cruise</td>
      <td>555-99911</td>
      <td>cruise1@crazy.com</td>
    </tr>
  </tbody>
</table>


Other

Add-on ideas:

1.sorting
2.filtering
3.conditional formatting
4.json loading


Screenshot

Plugin: FooTable

Please share your feedback in comments below.


Demo
Github

Advertisement
Tags: table, plugin, jquery, sorting, filtering, formating, loading, css, html, layout, application

Leave a Comment

No Comment

© Creative3x Ltd.