Responsive Tables In Drupal 7 With FooTable

The FooTable module for Drupal provides integration with the FooTable jQuery plugin. FooTable plugin makes it really easy to create responsive HTML tables that look great on small devices. Using a concept called “breakpoints”, you can define which column should be displayed or hidden when the table is being viewed using a mobile or monitor.

I do recommend that you check out the other features of the plugin. If you’re interested go to the demo section.

In this tutorial, we’ll look at the FooTable module for Drupal. The module currently integrates with Views and this allows you to create a table and define breakpoints. You can also use this module as an API and manually load the plugin for custom tables.

Getting Started

The FooTable module uses Libraries API to load the jQuery plugin.

First, download and install the Libraries API module.

Next, go to FooTable’s GitHub page and download the plugin. Extract the downloaded zip file into sites/all/libraries/FooTable. We’ll need to place the FooTable into the libraries directory for Libraries API to work.

Fig 1.0

Finally, go the FooTable Drupal project page and install the module.

Let’s review the modules and plugins that need to be installed:

Create Responsive Views Table

Let’s now go ahead and create a responsive table using Views. The FooTable module integrates with Views via a custom display plugin. All we need to do is select FooTable as the display when we configure a view.


1. Go to Structure -> Views (admin/structure/views) and click on the “Add new view” link.

2. Fill in the “Add new view” form with the value defined in Table 1.0.

Table 1-0. Create a new view

Option Value
View name FooTable
Machine name footable
Show Content (default)
Of Type All (default)
Create a page Checked
Page title FooTable
Path footable
Display format FooTable

Fig 1.1

Once you have filled in the form click on the “Continue & edit” button at the bottom of the page.

3. Go ahead and add a few fields to fill up the table. For this example, I’ll add the title, type, post date and a trimmed version of the body field.

Fig 1.2

4. Now, we need to define breakpoints for the table. This will notify FooTable if a column should be displayed. Click on the Settings link in the Format area and scroll down the page to the FooTable Settings field-set. In this section, you can define breakpoints and choose the expandable column.

Leave “Content: Title” selected in the “Expandable column” drop-down list. Check the Phone checkbox for Type, “Post date” and Body.

Fig 1.3

5. Save the settings form and the view. Go to /footable to see the table in action.

Here is what the standard table looks like:

Fig 1.4

And here is the table when viewed on a small device:

Fig 1.5

Creating responsive tables is relatively easy thanks to the FooTable plugin and module for Drupal. For an introduction article to FooTable check out FooTable: a jQuery Plugin for Responsive Data Tables.

If you have any questions, please leave a comment.

About the Author

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 6 years and has successfully completed several large Drupal projects in Australia.

Leave a Reply 18 comments

danny - January 16, 2013 Reply

Thanks for this Ivan!

Paul Driver - January 18, 2013 Reply

I wonder if this could this be adapted for Advanced Forum tables

Jawad Shah - January 18, 2013 Reply

Nice sharing Ivan!!

N20 - May 7, 2013 Reply

another good module advice… i stumble so often over your blog while looking for solutions and always find good articles about the modules im looking for. thanks mate.

Carolina - June 4, 2013 Reply

Really interesting! There is any way of setting our own breakpoints? I mean… can I enable more options appart from Iphone and Tablet or can I chose another widht for this 2 default options?

Thank you!

    Ivan Zugec - June 4, 2013 Reply

    I found this issue “” in the Footable issue queue about additional breakpoints.

    I do not think you can create additional breakpoints through the module. However, you can create custom breakpoints if you implement the table directly with JavaScript (

      Carolina - June 4, 2013 Reply

      I will look at it. Thank you!

    moses - January 8, 2014 Reply

    go to and edit the footable.js file and add your breakpoints

    dafault points are:
    phone: 480,
    tablet: 1024

    you can add yours here, eg:
    smallphone: 250,
    balckberry:500 and save

    then go to the footable module in sites/all/modules/footable/views
    then you have to edit the file named

    here you have to add your breakpoints in the last line.
    ie the default line is:
    ‘#options’ => array(‘phone’ => ‘Phone’,’tablet’ => ‘Tablet’),

    here you add your breakpoints you earlier set
    that is
    ‘#options’ => array(‘smallphone’ => ‘smallPhone’, ‘phone’ => ‘Phone’,’iphone’ => ‘iPhone’,’tablet’ => ‘Tablet’),
    save your documents.

    these breakpoints should appear in the footable setting of your view.

      Ivan Zugec - January 8, 2014 Reply

      Thanks for the tip.

Juan Martín Alberti - September 19, 2013 Reply

Hi, thanks for everything.
I installed the FooTable plugin and the FooTable Drupal module.
I get this error in the browser console after create a FooTable view in Drupal:
Uncaught TypeError: Object [object Object] has no method ‘footable’
Can you help me please? Thanks again!

    Ivan Zugec - September 19, 2013 Reply

    It looks like the FooTable plugin is not being loaded. Double-check and make sure you have setup the plugin properly.

    Also, try setup the plugin and module on a fresh Drupal 7 test site to see if the problem is because of an existing module or theme.

Paul - March 19, 2016 Reply

I built a table in a module from a database, how can I setup the table to use plug in?

    Ivan Zugec - March 22, 2016 Reply

    FooTable is just a JavaScript library. You’ll need to write a bit of code to integrate it with your custom table.

Nicole - May 31, 2016 Reply

Ok, so I have been using FooTable for a little while, but I always seem to get hung up on how to add the content if you have multiple rows/columns. For example, if you’re making a “Staff” page for your organization and there are 12 staff members with name, title, images, bio.

Would I just create the content type “Staff” and then create a new entry for each staff member while using the fields Image, Name, Title, Bio in the view itself? Will each entry show in the FooTable? Is a row the only option? Can the table be setup to work vertically?

I’m sure this makes absolutely no sense because even as I read this I’m confused… Here’s an example of one that actually worked, but I had to add so many fields to the specific content type and I’m convinced there has got to be an easier way… hopefully. 🙂

I appreciate any assistance or suggestions that you can provide.

Thank You!!

    Ivan Zugec - June 5, 2016 Reply

    Hi Nicole,

    You’re on the right track.

    Create a content type with the required fields. Then use Views to build the table. You can define which fields appear in the table using Views.

    I’m not sure if the table can be displayed vertically.


Scott - August 2, 2016 Reply


You did a similar write up for DataTables ( – check this out people). But on that one, you went so far as to provide a Module Tutorial.. Any chance you can provide the same here for FooTables?

Thanks Sir!


    Ivan Zugec - August 2, 2016 Reply

    I’ll look into it, thanks.

Leave a Reply: