Responsive tables are a big challenge. Tabular data is often very important and you don’t want to hide the data just to keep the nice responsive design in shape. Currently within Drupal I am not aware of any defacto solutions. I experimented with jQuery Mobile’s technique table reflow, the footable module, and lastly Zurb’s responsive tables.
I had one criteria for a successful solution; my users should not have to do anything to make their table responsive. I did not want them to right click on the table and add a class, I didn’t want them to have to build all of their tables with views, just plop in a ckEditor table and hit save.
A secondary criteria was that the solution should be lightweight since it is primarily to be used by users on mobile devices and we don’t all have 4G LTE in our offices and living rooms as of yet. All of the solutions mentioned above use some sort of CSS hook to indicate that the table needs to become responsive at certain breakpoints. The lightest weight solution for me turned out to be Zurb’s approach.
To automate the insertion in the HTML of a CSS class I turned to the Flexifilter module. Not enough people use this module but what it allows you to do is to create a Drupal input filter, so really an output filter, on anything that is formatted, like your WYSIWYG output.
After enabling the module you need to go to Structure -> Flexifilters -> Add New Flexifilter.
Inside of a filter you have several options but the Pattern Based Text Replacement widget works with regex. Once a filter is configured, you have to enable it. Once enabled, head over to your text format configuration screen and enable your new filter.
Configuration -> Content Authoring -> Text Formats -> Full HTML. I put the filter as the last item to be ran so that I can ensure the class I want added is actually added.
So now we have a class called responsive being added to tables folks create. How does this help us? We need to leverage Zurb’s great work to answer that. You can grab the source from their GitHub project page. We want two of the files, responsive-tables.css and responsive-tables.js. You can discard the rest. Place the css file in your theme/css directory and the js file in your theme/js directory.
Open up your theme.info file and tell Drupal about these two new files. In a Zen sub-theme it looks like this:
stylesheets[all][] = css/responsive-tables.css ; Optionally add some JavaScripts to your theme. scripts[] = js/responsive-tables.js
Next, open up the responsive-tables.js file as we need to wrap it in a Drupal safe closure. At the very top of the file add
(function ($, Drupal, window, document, undefined) {
and at the very bottom add
})(jQuery, Drupal, this, this.document);
This allows the code that the Zurb folks wrote to run without conflict with the other jQuery that Drupal executes. That is pretty much it. Save those files. Go to Structure -> Appearance to reload the info file and your table should now be responsive at small window sizes.
Nice.
Echoz had demonstrated responsive tables to our local group on a few months ago. That’s a great use of flexifilter. Drupal integration is awesome.
Good work Max.
There are so many approaches to the responsive tables. No great design pattern has emerged. Mobile search where you can choose multiple sources to search are also a challenging design pattern.
Thanks for checking it out.
Thanks for your post! and excuse me for my english =)
I follow every step of your walkthrough, but i had a problem with the js
TypeError: $(…).on is not a function
http://local.casaestablo.dev/sites/casaestablo.cl/themes/casaestablo/js/responsive-tables.js?mjo61i
Line 21
Can you help me? Thks!
Hi Jaime,
The error you are receiving usually happens when the javascript is not properly wrapped in the jQuery closure. At the top of the javascript file make sure to include the following line,
(function ($, Drupal, window, document, undefined) {
//all of the other code from responsive.js goes here.
//make sure to close above function.
})(jQuery, Drupal, this, this.document);
A little bit more about this method can be found at http://drewish.com/content/2011/05/drupal_javascripting.
I hope that helps. I can’t see the code you linked too as it is from your local server but the site you have associated with your name looks great.
Buena suerte,
Max
Hi Jaime,
I ran through your guide, but I get this error:
Warning: Invalid argument supplied for foreach() in flexifilter_invoke_components() (line 322 of /customers/2/c/2/lysetskanal.dk/httpd.www/sites/all/modules/flexifilter/flexifilter.module).
Hi Dan,
You may need to bump up your jquery version to 1.5. I use the jquery update module. You enable the module, go into the configuration page and choose 1.5 from the dropdown menu. You will then need to click the appearance on the main menu to reload the javascript. It wouldn’t hurt to clear your site cache as well. Please let me know if that resolves the issue and if so, I will update the post.
Thanks
Hi Max
The module are seem to working. But I have trouble to get the filter in the text format Full HTML. The filter are not showing here:-(
Sorry, for the last comment, the module are working. I forgot to check Responsive tables:-(
So thanks for your guide here. Now I will invistigate the picture module with inline images.
Kind regards,
Hello,
I have followed the instructions in the tutorial and everything went smoothly. I am finding that I am not getting horizontal scroll bar on the bottom of the columns after the first column, as shown in ‘Screen-Shot-2013-02-26-at-4.33.17-PM.png’ above. Any thoughts as how I may add this?
Regards,
Michael
Hi Michael,
I know jQuery versions can have an effect on this. Make sure there are no javascript errors in the console of Firefox or Chrome. If there is, you may need to use the jQuery update module to bump the version up from the stock Drupal 7 version. Please look at recent comments on this post. Also, when you add the javascript file to your theme you need to visit the administrative appearance page to load the changes. Give that a try and let me know how it goes. Good luck!
Max,
I am using Drupal 7 and the jQuery Update module, which is set on 1.7 (I cannot use 1.8 or else my Views UI will not work properly). I don’t see any javascript errors, and I am using a sub-theme based on Omega. I saw where turn on the responsive-tables.css. I could not find where to turn on the responsive-tables.js file in my theme. Any suggestions?
Every Drupal theme I believe has a .info file. In your sub-theme it should be named “sub-theme-name.info” most likely without the hyphens. You have to add a line to the info file telling it where that JS file is located. Here on line 88 you can see where it has been added in our basic Zen sub-theme.
https://bitbucket.org/wwuweb/wwuzen/src/91a0ab0fbfc940081b3924bdf6b76366e9db3249/wwuzen.info?at=master#cl-88
jQuery 1.7 will work great, it is what I use too. Once you add this file to your info file you will want to clear your cache or visit the Structure->Appearance page to make sure the JS is loaded.
Cheers
Great post, exactly what I was looking for;
the only downside is that I need Tables only for a few pages may be, and don’t want extra .js and .css to load on every page, but only on those….
I’m not a coder but I have started to look on
as https://www.drupal.org/node/756722 …
may be any better solution?
I have also found this Code per Node Module //Code per Node makes it possible to add custom CSS and Javascript per node, per content type, per block, and globally. The code is stored in the database, but served from the file system. https://www.drupal.org/project/cpn
-I have yet to test out, but looks good…
/you can add this to my last comment if you moderate/
Red, CPN is a nice module for doing exactly what you are hoping to do. Also, if you use panels, you could make a variant for the few table based pages and inject your CSS that way.
Alternatively, you could make a few custom .tpl files for the nodes you want to effect and then add the js to those custom templates.
Also, we updated the CSS a few days ago to go along with the Zurb foundation js, have a look here if the results look off. https://bitbucket.org/wwuweb/wwuzen/commits/ec558d54910928fbd74d4b04358b28dc5f0d84f4
Hi Max,
I just tried making this work, and I get a similar error message to Dan last year. I have gone through the steps and recommendations carefully, but still get the error. Using jquery 1.7. I use CKEditor, particularly for tables. Should this matter?
Anything else you can recommend?
Thanks for your time.