As of 28th November 2014, the video subscription has been shutdown. All videos are available for FREE to watch.

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.

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

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.

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.

Connect: Twitter drupal.org LinkedIn App.net

Comments

Submitted by Paul Driver on

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

Submitted by N20 on

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.

Submitted by Carolina on

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!

Submitted by Carolina on

I will look at it. Thank you!

Submitted by moses on

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.

Submitted by Juan Martín Alberti on

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's picture

Submitted by ivan on

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.

Add new comment