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

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.

ivan's picture

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!

ivan's picture

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.

ivan's picture

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!

ivan's picture

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