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.
Finally, go the FooTable Drupal project page and install the module.
Let’s review the modules and plugins that need to be installed:
- Libraries API module
- FooTable plugin
- FooTable Drupal module
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.
Steps
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 |
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.
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.
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:
And here is the table when viewed on a small device:
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.
Thanks for this Ivan!
I wonder if this could this be adapted for Advanced Forum tables
Nice sharing Ivan!!
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.
Thanks buddy. 🙂
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!
I found this issue “https://drupal.org/node/1897728” 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 (http://themergency.com/footable/).
I will look at it. Thank you!
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,
iphone:600,
balckberry:500 and save
then go to the footable module in sites/all/modules/footable/views
then you have to edit the file named footable_style_plugin.inc
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.
Thanks for the tip.
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!
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.
I built a table in a module from a database, how can I setup the table to use plug in?
FooTable is just a JavaScript library. You’ll need to write a bit of code to integrate it with your custom table.
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. 🙂
http://www.philchadwick.com/2014-2015-stonegate-reports
I appreciate any assistance or suggestions that you can provide.
Thank You!!
Nicole
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.
Cheers,
Ivan
Ivan,
You did a similar write up for DataTables (https://www.webwash.net/drupal/tutorials/using-datatables-drupal-7 – 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!
Scott
I’ll look into it, thanks.
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 theme.info file and then use the library. I am sure there is a better way of doing this though. Any suggestions?
Hi Andy,
FooTable does have its own theme function. Here’s a link to it: http://cgit.drupalcode.org/footable/tree/footable.module?h=7.x-2.x#n41
Cheers,
Ivan