FooTable - Make HTML tables responsive

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.

Features

• Hide certain columns at different sizes
• Configuration via data attributes
• Built to work with Bootstrap
• Easy to theme
• Sorting
• Filtering
• Pagination
• Easy to extend with add-ons

Source: github.com

1. INCLUDE CSS AND JS FILES

<link href="path_to_your_css/footable.core.css" rel="stylesheet" type="text/css" />
<link href="path_to_your_css/footable.metro.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="path_to_your_js/footable.js" type="text/javascript"></script>

2. HTML

<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>[email protected]</td>
    </tr>
    <tr>
      <td>Bridget Jones</td>
      <td>544-776655</td>
      <td>[email protected]</td>
    </tr>
    <tr>
      <td>Tom Cruise</td>
      <td>555-99911</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>

3. JAVASCRIPT

$(function () {
    $('.footable').footable();
});

4. DATA ATTRIBUTES

One of the main goals of FooTable was to make it completely configurable via data attributes. We wanted you to be able to look at the HTML markup and see exactly how the FooTable was going to function. Take a look at this markup for example:

<table class="footable" data-filter="#filter" data-page-size="5">
  <thead>
    <tr>
      <th data-toggle="true">
        First Name
      </th>
      <th data-sort-ignore="true">
        Last Name
      </th>
      <th data-hide="phone,tablet">
        Job Title
      </th>
      <th data-hide="phone,tablet" data-name="Date Of Birth">
        DOB
      </th>
      <th data-hide="phone">
        Status
      </th>
    </tr>
  </thead>

Standard Demo's

• Getting Started - a simple demo to get you up and running with FooTable in 5 minutes.
• Data Attributes - a look at all the available data attributes.
• Row Toggler - setup which column has the toggler, or hide it completely.
• Icon Styles - change the default icons for expanding and collapsing your FooTables.
• Hiding Columns - hide certain columns from showing at all.
• Auto Expand First Row - expand the first row when a breakpoint is hit.

Add-On Demo's

• Sorting - make your FooTable's sortable.
• Filtering - include filtering in your FooTable.
• Pagination - include pagination in your FooTable.
• Showcase - a showcase using the sorting, filtering and pagination add-ons.

Theme Demo's

• Metro Theme - A demo showing off the Metro theme.
• Old Theme - A demo showing off the original FooTable theme.

Advanced Demo's

• FooTable Events - Hook into the FooTable events.
• FooTable API - Programmatically call FooTable functions.
• FooTable Triggers - Trigger certain FooTable actions.
• Event Interception - Intercept the FooTable add-on events.
• AJAX - Add table data using AJAX calls and then redraw your FooTable.
• Add / Remove Rows - Add or remove rows from your FooTable.
• Group Headers - Group your column headers together for complex table structures.
• Multiple Tables - a demo with more than 1 FooTable on the same page.