Grow your CSS skills. Land your dream job.

FooTable: a jQuery Plugin for Responsive Data Tables

Published by Guest Author

The following is a guest post by Brad Vincent where he introduces his new jQuery plugin for helping make data tables responsive. Responsive data tables has been a recurring topic around here, first with my early exploration and then a roundup. I thought this new jQuery plugin approach was worth a discussion for a number of reasons: a lot of people like utilizing flexible plugins like this rather than hand-crafting one-off solutions, it's a slightly different UI approach than the ones I've seen so far, and functionality is entirely handled in JS (CSS is just for styling).

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!

Comments

  1. Will B.
    Permalink to comment#

    FYI, all your sorting demos do not allow sorting on the Last Name column. Not sure if that was intended or not.

    • Jeremy T
      Permalink to comment#

      3. The Last Name column cannot be sorted (data-sort-ignore=”true”)

  2. Jon
    Permalink to comment#

    Brad, this is a really cool plugin, I like what you did, some great design ideas. Does this work with Datatables at all?

    I just finished implementing the Zurb responsive tables into Datatables and it works quite well, but I might have to rethink some of it now after seeing this. I had to modify the core code though so it won’t be a plugin. I will make this available on GitHub as a fork of DT. Here is example of what I did.

    http://cascadeoutside.com/

    Some constructive feedback here. One of the things I like about the Zurb plugin is that it handles long cell data. How does yours handle this, wasn’t clear from your demo?

    I think one thing I’m going to try based on what you did is detect the device width and hide columns based on that, with the additional column data in the modal (not sure if modals are working on mobile at the moment).

    Cheers, Jon

  3. I used FooTables recently for a personal responsive project, is something small but it works pretty nice.

    Check it out

    It’s 98% finished, I need to polish a couple of colors, combine CSS and JavaScript files, and compile the final CSS without --debug-info (Read about Firesass for Firebug).

    I combined it with the slick side-sliding menu Meny.

    What do you think?

    • Forgot to mention that this exercise I created is only focused for tablets and smart phones, so on your big screens the table will just as wide as your browser window.

      But you can always manually resize your browser, or press SHIFT+CTRL+M in Firefox or use the Viewport Resizer bookmarklet.

    • Permalink to comment#

      Thanks for adding your link, Ricardo. Always helpful to see something implemented in a real world scenario such as your schedule. A few points I’d like to raise is that it doesn’t appear to scale very well to a mobile device, i’m guessing because there’s too many fields that remain visible for the person. Also when you filter by man/woman etc you probably don’t need that field visible anymore on the chart no? Just some constructive criticism. Cheers!

    • Hey David, no problem, any constructive feedback it’s invaluable.

      I only tested in my iPhone 4S, my iPad 2 and my DroidX. iPhone and iPad, the page displays fine*. In my DroidX the page only works in Firefox and Opera, it doesn’t work well in the default browser.

      May I ask what problems are you seeing that make you say “…it doesn’t appear to scale very well to a mobile device”?

      **Note:* on iPad (portrait and landscape) you will see all the columns, none get hidden. I removed the 1024 break point in the script. There is one bug though: on iPad since no columns get hidden you can still see the the ‘+’ plus sign and tap to expand the row to see the hidden information, and that’s not supposed to happen. I need to look into this.

      I’ve noticed though that sometimes you need to tap ‘harder’ on the filters on the left menu in order to get the table to display the wanted content.

      Also, “…when you filter by man/woman etc you probably don’t need that field visible anymore”. Are the filters not working for you? I mean, whenever you tap/select a filter, the table displays only the information of the filter you selected and hides the rest of the information.

      The filters are working fine for me.

      Thanks for your input.

    • Joao
      Permalink to comment#

      Hey Ricardo,

      A couple of points:

      –The dropdown/dropdown toggler is appearing even when there’s no additional info.

      –The table resizes a little too late on window resize – there are times when the table is larger than the browser window.

      –I don’t really like how the filters are taking effect on the table while it’s eschewed (or whatever the term is) – maybe just a matter of opinion.

      That’s my “critic”. Hope it may be of help.

    • Hey Joao,

      I appreciate you taking the time to provide feedback.

      Regarding your points:

      On #1, yes, I’ve already identified this and mentioned it in my post above yours, is something minor but something I need to look into.

      On #2, you have to realize that what I did is for mobile only, not planned to be viewed on desktop (except for testing purposes). Also, users are not going to reduce/expand their browser window like we web designers/developers do to use the schedule, so as far as user experience the bars you’re seeing, do not affect the experience.

      Nonetheless, I tried reducing/expanding my browser window as fast as possible to see if the table wouldn’t “catch up” with the window size and I did not get any scroll bars at all.

      On this note, you may want to update your video drivers or increase your refresh rate on your display, because the “drawing” of elements on your screen, obviously, is done by your video drivers. I hope you have an nVidia card ;)

      On #3, the filters are basically adding/removing classes which in turn display/hide content. Since the filtering happens while the menu is open and the user’s attention is specifically on the filtering menu and not the table, there was no need to do anything “fancy” to displaying/hiding the content in it.

      Also, I wanted something more functional than ‘fancy’ since this was more an exercise about responsive tables with the FooTable script together with using the Meny menu.

      Did you check it on your phone?

      Thanks again for your valid input.

      Regards.

  4. This would be nice if it integrated with SQL software.

    • Will B.
      Permalink to comment#

      Yah, not sure about SQL integration. After all, this is built as a client-side tool, since it’s Javascript. How you get the data TO the javascript would be up to your app. And with all the different database types out there, that would seem to be “out of scope”, for sure. That’s my opinion only, of course.

  5. Paul H.
    Permalink to comment#

    Does it do fixed table headers too?

  6. Tjorriemorrie
    Permalink to comment#

    $will_I_use it = $breakpoints->support(‘em’) ? true : false;

  7. Permalink to comment#

    This is a great universal approach. I found that for my responsive tables, since the headers included the most data, that I could strip the tables of the headers at small screen resolutions and display the headers below the table in paragraph form.

    Here’s what I did: http://express-genomics.com/services/

  8. Permalink to comment#

    Hi
    I was developing a ASP.NET MVC 3 application for a child care organization in that application I’ve used Jquery table sort a lot. I’m in the process of making this application responsive. After reading your post I’m wondering, will it be fitting with ASP.NET MVC?

    Thx,

    • I don’t think this jQuery plugin is programming-language dependent, it should… has to work with any language anyone wants to use it with.

      It’s the programmer himself that has to do the work of integrating this plugin with whatever development he’s doing.

      After all, ANY programming language spits out HTML at the end and that’s where this plugin comes into play.

  9. Carlos
    Permalink to comment#

    Hi, I found this Footable and I really like this work of art! Great job! Just one thing, I’m not sure if it’s my mistake, but when I downloaded the files from Github, the feature which displays hidden columns doesn’t seem to work after click the header for sorting the table. I tried copying the exact .js files used from the sorting sample source code and it suddenly worked. I don’t know where is the problem since I’m just a newbie in coding, just hoping might find answer why or save others that might have same issue as I had. Thanks and great work again! :D

    • Carlos,

      You might want to report the bug in the Issues section on Github.

    • 64bit
      Permalink to comment#

      Without the sorting files imported everything works fine. When I import the sorting files the sorting function works but the details view / expand stops working. I tried overwriting the downloaded files with the files from the demo and still the same thing.

      From the console log it doesn’t look like the css is being built for the details view when the sorting files are imported.

      Anyone have any suggestions?

  10. Justin
    Permalink to comment#

    I was just thinking about how I would tackle the problem of data tables on the latest responsive website I’m working on. This article came up at just the right time. Thanks for the awesome plugin.

  11. Michael Chang
    Permalink to comment#

    Impeccable timing. I’ve been working on creating my own datatable the past few days. I like the idea here of showing more info when you click the row. Somehow I had never thought of doing it that way before.

  12. Amit Badkas
    Permalink to comment#

    A great plugin :)

    When we have tried ‘footable’ with an existing table which didn’t have thead and tbody, it didn’t work at all. So anyone having such an issue, please check your table mark-up

    • Just wondering: Why would you have a table without &lt;thead&gt;?

      I mean, technically you can create a &lt;table&gt; without &lt;thead&gt;, but content-wise it doesn’t make much sense. The columns and rows usually (if not All the time) have a some sort of relationship that allows the content to be interpreted.

      In the Mozilla’s MDN &lt;table&gt; definition page, the Result section you can clearly see the content of the first table (John Doe and Jane Doe) doesn’t have much meaning. But the table below using &lt;thead&gt; the content takes a totally different form since the information now has a “relationship” that you don’t perceive in the first table.

      Maybe adding a &lt;thead&gt; to your table would not only help you use this plugin, but also add more meaning to your content and making the user experience better when interacting with your product.

      (Note: While typing this post, the markdown service wasn’t working so it’s hard to tell how the post is going to come out…)

  13. Permalink to comment#

    Very cool! Noticed one small bug in FF17 with the sorting table. The asc/desc icon shows up about halfway down the table and aligned right. It seems to be escaping out of the TH.

  14. David
    Permalink to comment#

    Looks great! An initial test finds this doesn’t immediately integrate too well with datatables.net, specifically the datatables sorting functions. I’ve found [td]s can start jumping into other columns.

    Am calling fooTable on each redraw (i.e. Sort/Paginate) of the datatable to snap it back into shape.

        "fnDrawCallback": function() {
            $('.dataTable').footable();
        }
    

    I suspect this is down to additional [div]s and [span]s which have been placed in the datatable to enforce ellipsis overflow and sorting of columns where Icons are shown.

    Am going to see if I can remove some of this internal table markup which I suspect is to blame, but any insights appreciated.

  15. This would be nice if it integrated with SQL software.

  16. Alex
    Permalink to comment#

    Hey, the tables look really nice! Just wondering how something like the following would be implemented; having a few buttons or toggles above the table to filter the content. Eg button 1: show only rows with name John, button 2: show only rows with job title builder. I am looking at having about 5-6 button/toggles.

    • Permalink to comment#

      haven’t looked at the plugin code yet, but generic process would be to create the buttons and set up a function to swap the data-sort attribute of the table (to whatever the button is for) when the buttons are clicked

  17. Martin
    Permalink to comment#

    Hey, how can I add footables in wordpress 3.5?

  18. Hey, thank you so much for this post. Very useful this plugin :D

  19. Tom
    Permalink to comment#

    Hey,
    How do you enable the cross-sign, so people can see that they can expand it?

  20. Permalink to comment#

    This is just … amazing. Absolutely amazing.

    It even works in IE 7.

    Thank you so very much.

  21. Irshad
    Permalink to comment#

    Hey,

    Firstly of all thanks for the great plug-in. Awesome…

    I am integrating this plugin into a project and I need the headers to be fixed on top. How could this be done? Any heads up would be appreciated.

    Thanks
    Irshad

  22. Ricardo
    Permalink to comment#

    Hello,
    Is there an option that handles a select element as a header?
    I have a table where I have a select element but when I implement any responsive table solution I get the whole list of options as the header and I haven’t found any solution for this yet.

    Thanks!

  23. Mi2K
    Permalink to comment#

    I installed this plugin (which seems great)! but nothing happens at all?
    Thank you!

  24. Neotropic

    Perfect usage for what I need. Was using datatables but they bloated it way to much to do what this does. Came across a few things, like sizing. Like for tablets set at 1024 was resizing off by many px. I had to set it to ‘tablet: 997′ to resize at 1024.

    This one I can not figure out. I have buttons in one cell. They work fine until they are dropped into divs. Now… like I said, no idea why as the click function is triggered by ‘$(‘.view’).click();’. Just not sure how it can not read or find the class or trigger when clicked. I click and it is not recognized being clicked.

    Thanks!

    • Neotropic

      Ah, looking at the generated code, I see why now. Still though. Even though there are multiple buttons, two of the same, it should still trigger when clicked. Or you would think, right? Since it is by class and not ID?

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".