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.
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:
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
|Of Type||All (default)|
|Create a page||Checked|
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.
Like what you see?
Join our free email list and receive the following:
- Discover our best tutorials in a 6 part series
- Be notified when free content is published
- Receive our monthly newsletter