FooTable: a jQuery Plugin for Responsive Data Tables

These days, everyone is jumping on the responsive bandwagon. Apart from responsive layouts, everything is going responsive: sliders, lightboxes, galleries, you name it! But then one day, when I was working on an HTML table with a lot of columns, I thought “How is this going to look on my iPhone?”. And then I searched for “responsive tables” and found Chris’ roundup post on a few solutions out there.

So Why Create FooTable?

There have been quite a few solutions for responsive data tables, including:

1. Zurb’s that scrolls the table horizontally on smaller devices.
2. Dave Bushell’s that flips the table on it’s side.
3. Filament Groups’s solution lets the user select the columns to show.
4. Stewart Curry’s one hides less important columns.
5. Chris Coyier’s one which groups the data for each row in a list and the columns disappear.

I liked what some of the responsive table solutions were doing, but none of them “hooked” me completely. So I got together with my friend Steve, who is a jQuery guru, and we started on a new jQuery plugin. We really liked the concept of disappearing columns, but we still wanted the ability to see that hidden data somehow. We also liked Chris’ concept about inverting the columns to become rows, so we decided to combine both concepts and FooTable was born.

How Does FooTable Work?

FooTable is very simple:

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.

Configuration Via Data Attributes

Steve and I have both worked with other table plugins, like the amazing datatables.net, but we found them really difficult and unintuitive to configure. So we came up with the concept of using data attributes to tell FooTable how to do things. It also makes it easier for other developers supporting your code to see what you are doing. For example, check out the following simple table head markup:

<table class="footable" data-filter="#filter">
  <thead>
    <tr>
      <th data-sort-initial="descending" data-class="expand">
        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-type="numeric">
        DOB
      </th>
      <th data-hide="phone" data-type="numeric">
        Status
      </th>
    </tr>
  </thead>

  ...

</table>

You can quite easily tell, just from the markup, that the table will work in the following way:

1. The table will be filtered by an input with id “filter” (data-filter=”#filter”)
2. The table will be sorted initially by the First Name column and it will be sorted in descending order (data-sort-initial=”descending”)
3. The Last Name column cannot be sorted (data-sort-ignore=”true”)
4. The Job Title and DOB columns will be hidden on phone and tablet (data-hide=”phone,tablet”)
5. The Status column will be hidden on phones (data-hide=”phone”)
6. The DOB and Status columns use numeric data (data-type=”numeric”)

Now that’s more like it!

Editor’s note: Using data-* attributes to control plugin behavior is very popular lately (See Twitter Bootstrap). Would love to hear thoughts on that in the comments.

Usage

You’ve seen the markup, which is the data table itself with built-in configuration on how it should behave.

You’ll also need jQuery, the plugin itself, and your authored code to call the plugin. The code below is just for illustration on how it might work. In production you’d likely be combining all these scripts.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
<script src="js/footable-0.1.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
      $('table').footable();
    });
</script>

It’s also likely that you have your own breakpoints. That is very easy to configure as you call the plugin.

$('table').footable({
  breakpoints: {
    mamaBear: 1200,
    babyBear: 600
  }
});

Then use those values in your data-hide attributes instead.

Built For Extensibility

Another cool feature of FooTable is the way in which it can be extended. We did not want to bloat the core code as we added more and more features down the line. Also, each project has it’s own requirements, and we realise that you will not need every feature of FooTable in every project. So Steve came up with an awesome plugin architecture within the plugin, that allows Footable to be extended with ease. For example, to make your table sortable, all you need to do is include the file footable.sortable.js. We have only released the sorting add-on to date, but we are busy with the filtering add-on and hope to create a bunch more. We are also hoping the community will help us here and come up with really cool add-ons. You can check out this template code to see how it’s done.

Last, but not least….demos!

• Responsive showcase – this houses all the demo’s so far with an easy to use viewport switcher to demo the features with minimal effort!
• Simple table with text
• Table which includes images and links
• Sorting demo