Apps

FooTable jQuery plugin tames tabular data in responsive web designs

Ryan Boudreaux demonstrates a jQuery plugin that will allow you to create responsive web designs, when tabular data must be presented on screens of all sizes.

You probably have some tables on your website, tabular data tables, that is, and not tables for your web page layout...right?  If you still use tables for web page layout then you need to get cracking on making some updates!

No, this post is not about converting your table layout into CSS. Instead, I will discuss the FooTable jQuery plugin by Steven Usher and Brad Vincent. Usher can be found at gnarf.net, a blog dedicated to jQuery, JavaScript, GitHub and Stack Overflow. Vincent's website is themergency.com , a website devoted to WordPress, generators, WP plugins, and jQuery plugins. When implemented on the typical tabular data tables, the plugin will construct responsive HTML tables on smaller devices, no matter how many columns of data they may contain.

The plugin download

The plugin is available as a zip file download from the FooTable webpage or from the Github repository. The zip file (FooTable-master.zip) is 512K in size and includes the directories for CSS, images, and js, as well as the following files: thirteen individual demo htm files, footable.jquery.json, .gitattributes, .gitignore, license (see below), readme.md, and various images in the root directory.

The plugin license states:

Copyright 2012 Steven Usher & Brad Vincent

Released under the MIT license

You are free to use FooTable in commercial projects as long as this copyright header is left intact.

Main functions of the plugin

The FooTable jQuery plugin has two main functions to achieve responsive design, the first of which is to hide certain columns of data at different resolutions, which are based on breakpoints set within the CSS, and secondly, it allows the table to add rows which can become expandable to show the data that was made to be hidden.

Breakpoints, you say?

Breakpoints are typically used for responsive web design (RWD) and can be implemented with media queries or actual breakpoints set within CSS or jQuery, but there is no standard for how they are utilized since there are many different screen sizes depending on the device and orientation. Mobile phones, tablets, laptop, and desktop screen sizes and resolutions vary depending on device make and model. So how does the FooTable plugin achieve the RWD in its implementation? The plugin makes data tables configurable with data attributes that are set within each table header, which also makes it easier to code the tables during markup. From the plugin website:

One of the main goals of FooTable was to make it completely configurable via data attributes inside the table. We wanted you to be able to look at the HTML markup and see exactly how the FooTable was going to function.

The breakpoints in the plugin are set within the js/ footable-0.1.js jQuery file, as shown in the code snippet displayed below:

breakpoints: { // The different screen resolution breakpoints
phone: 480,
tablet: 1024
},

As you can see all phone devices are set to a breakpoint of 480 pixels, and all tablets are set to 1024 pixels. The CSS code snippet displayed below, found in the css/footable-0.1.css file, controls the plus / minus icon that gets triggered when the breakpoint is activated depending on the device:

.footable.breakpoint > tbody > tr > td.expand {
  background: url('img/plus.png') no-repeat 5px center;
  padding-left: 40px;
}
.footable.breakpoint > tbody > tr.footable-detail-show > td.expand {
  background: url('img/minus.png') no-repeat 5px center;
}

How it works?

I will highlight the functionality of the plugin using the demo-zebra.htm file that comes with the download. To get the base plugin functionality to work on your web document pages that contain data tables you need to make calls to jQuery, the js/footable-0.1.js file, the css/footable-0.1.css file, and finally, the call to the FooTable plugin, which in this case calls the 'zebra' functionality. The code snippet from within the <head> of the demo HTML file is displayed below:

<script src="http://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>
<link href="css/footable-0.1.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
    $(function() {
      $('table').footable().find('> tbody > tr:not(.footable-row-detail):nth-child(even)').addClass('zebra');
    });
</script>

The HTML markup for the data table utilized in the demo file is displayed in the code snippet below:

    <table class="footable">
      <thead>
        <tr>
          <th data-class="expand">First Name</th>
          <th>Last Name</th>
          <th data-hide="phone,tablet">Job Title</th>
          <th data-hide="phone,tablet">DOB</th>
          <th data-hide="phone">Status</th>
        </tr>
      </thead>
      <tbody>
        <script type="text/javascript">
          window.generateRows(20);
        </script>
      </tbody>
    </table>

The first thing you will notice is that the columns for "Job Title", "DOB", and "Status" will automatically be hidden on phone devices leaving the "First Name" and "Last Name" columns intact. Also, notice that the first column is assigned a data class of "expand" which adds the plus/minus icon when other columns are made hidden. When you use the plugin for converting your tables to RWD, you can select which columns will be hidden depending on the device by adding the data-hide attribute.

The zebra demo utilizes the data generator file js/data-generator.js to pull the demo data that populates the web page document on page load. In full screen view the zebra demo page is displayed in Figure B below, (all figures are shown in Google Chrome Version 25.0.1364.152 m):

Click to enlarge view.
Figure C shows the screen for tablet views (below 1024 pixels wide):

As you can see above, the two columns "Job Title" and "DOB" are now hidden and the plus/minus icon shows up on the left side of the first column. The second row shows the expanded view. When you click the + button, you see the hidden "Job Title" and "DOB" information.

In the final display in Figure D for smaller phone screens, we see the visible columns for "First Name" and "Last Name" only, while the hidden columns now include "Job Title", "DOB", and "Status":

The plugin also has extensions that allow for sorting and filtering data, available on Github, for adding more framework functionality to the Footable jQuery plugin.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

2 comments
lehnerus2000
lehnerus2000

I'm just about to start studying jQuery on my web design course. Your articles should be very handy. Thanks Ryan. :)

Editor's Picks