Drupal 7 FooTable Module

By shane
Tue, 2013-03-12 23:57
Daily Dose of Drupal Episode #127

Share with Others

Update: If you want the labels to show up, install the jquery_update Drupal module and inside the configuration options select jQuery version 1.8. This will fix the label issue.

The Drupal 7 FooTable Module makes it easy to build responsive tables using the Drupal 7 Views module. The FooTable module makes a table responsive by allowing the user to select which fields should be hidden at various responsive breakpoints for mobile and tablet devices. Any hidden fields are then displayed below the table in an expandable section. The module still needs a little work, but is a great way to get started with responsive design and responsive layouts in Drupal.

In this episode you will learn:

  • How to install and configure the FooTable Drupal module
  • How to create a responsive Drupal views table using the FooTable Drupal module
  • How to test the various responsive breakpoints using the Web Developer toolbar chrome extension

Thanks to BuildAModule.com for sponsoring this episode of the Daily Dose of Drupal.

Getting stuck with how to get started with the Drupal views module? You can check out our video on Drupal views for some help.

Hello everyone and welcome to another Daily Dose of Drupal, today we’re on Episode Number 127 and we’re going to be going over the FooTable Module. If you have worked at all with responsive websites or building websites so they scale down nicely on tablet and mobile devices the FooTable Module will be something that may interest you. It essentially allows you to easily build tables using the Views Module and have these tables scaled down nicely whether or as you scale down the size of the screen.

It uses the jQuery FooTable plug-in and it creates the responsive table layout. But before we get started as always I am Shane Thomas, you can follow me on Twitter at smthomas3, you can also hop over to codekarate.com and sign up for the newsletter if you haven’t already.

Today’s sponsor is buildamodule.com. Buildamodule.com is a great place to learn about Drupal. I’ve used it in the past with my employees at Beginner Media and it’s a great way to learn the basics of Drupal and get started quickly. So if you’re looking to expand on your Drupal knowledge or just getting started with Drupal go ahead and check out buildamodule.com. Let’s go ahead and get started; the first thing you need to do when you install the FooTable Module is make sure you have the libraries API Module and the Views Module downloaded and installed.

You’re also going to need to download the FooTable J Query plug-in and put it in your sites All Libraries Directory. You’re going to want the directory to be called the FooTable. So we’re going to go ahead and get started; I have also … in this example I’ve downloaded the Zen Theme because it allows you to easily make it a Fluid with so as you can tell it’s pretty basic but it’s a fluid with theme.

That’s going to make it easier to show the various breakpoints with our table. So I went ahead and set the Zen Theme as my default. Obviously if you’re using Zen you’re going to most likely be using a sub-theme but in this case just for example purposes I’ve just installed the Zen Based Theme and I’m using that as my default theme.

I’m going to go ahead and create a new view, I’ll go ahead and call it FooTable and I’ll show content of type article, I’ll go ahead and leave it a page and leave the path and everything the same but the display format we want to select FooTable. And you’re going to notice that or at least one thing to keep in mind is this is a alpha release. It’s very much I guess in the category of it still needs works so it’s not perfect but I still wanted to show this module off because of how cool it can be and hopefully if you have some time to look into fixing some of the bugs and issues you can make this module even better.

So just keep that in mind as we’re getting started that it’s still is going to … it’s not perfect yet but it is still going to still be pretty cool. So we’ll go ahead and save that and I’m going to add a whole bunch of fields here just so we have an example to look through, I’m going to add say Edit and Delete links, the comment counts. We will go ahead and add the post dates and we’ll add the Update Dates.

So we have a few fields added there, we’ll leave all the labels the same and we’re going to go ahead and rearrange some of these, put the edit and delete links at the end and I’ll hit apply. I’m also going to give the title a label of article title.

And now here’s where the settings for the FooTable come in. So we have the format selected as FooTable as you can see and there’s specific settings for this table. So if you scroll down you’ll notice that there’s FooTable settings here. The first one is where you want the expand will come to be and this is where the + or – icon is going to appear, we’re going to leave this as article title.

The next you can select your collapse counts. So this is where you select where you want certain fields to be hidden. So for instance if I want the edit and delete link to be hidden … well we’ll say we want all the fields to be hidden on the phone besides the title field and we also want the post date and … or the comment count and the updated date to be hidden on the tablet.

Now I can go ahead and hit Apply, click Save and go ahead and take a look at this settings again so you know what’s going to happen, you can see that some of these fields are going to be hidden depending on the various sizes. So I’m going to go ahead and click on View Page.

As you can see I have a pretty simple looking table here using the FooTable Module and I have an extension on Chrome called the Web Developer extension which I’m going to use to view the responsive layouts. So this just gives you a bunch of different sizes so we can go through and we can look through these various sizes.

So I’ll go ahead and take a look at the first ones so this is a mobile phone in a portrait mode and it gives you the dimensions, you can see it just displays the article title and you can also see it has this little + sign next to it. Here’s the one bug that I found with the module so far; is that it doesn’t display the label to the left of the field, I’m going to be taken look at that and if you have time I suggest you try to contribute back as well so we can get this little bug fixed because that’s one of the bugs that seems to be standing out that of course makes it somewhat unusable but if that bug is fixed which I’m sure it will be soon, the module of course be in a much better state.

We’ll go ahead and look at it on mobile landscape mode, you can see it’s the same thing but you can see more of the field, still works the same way. If you go to a small tablet mode now you can see … you’ll see additional field so the comment count and the updated date field are not listed but the other fields are showing, you can click and you can see the comment count and the updated date, the small tablet landscape is the same way, a tablet portrait still shows that and I believe the tablet landscape actually does show the entire … nope it still does show in tablet mode with the + and the -.

However if you come into the FooTable you can see it shows the entire table with all of the fields no + or – icon on the left and it shows all your data. So as you can see the FooTable Module is still work in progress but the possibilities with this module are endless.

So let’s go ahead and contribute back if you can and let’s make this module even better and then we can go ahead and use it on a lot of cool Drupal responsive websites. So if you’re curious to get into responsive a little more, definitely check out the FooTable Module, it’s going to be really cool module to set a few little … its use that needs to be worked out.

Thanks again to buildamodule.com for sponsoring this episode of the Daily Dose of Drupal and thank you for watching, we’ll see you next time.