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.

20 thoughts on “Responsive Tables In Drupal 7 With FooTable”

  1. 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.

  2. 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!

    1. 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 (

    2. 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.

  3. Juan Martín Alberti

    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!

    1. 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.

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

  4. 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!!

    1. 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.


  5. I was hoping to use FooTable for non-views tables on my site. Datatables has the theme_datatable($variables) function to do this with but it seems like Footable does not have such a function build into the module. Seems like I could put the Footable library paths into my file and then use the library. I am sure there is a better way of doing this though. Any suggestions?

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top