{"id":400,"date":"2013-02-26T16:34:07","date_gmt":"2013-02-27T00:34:07","guid":{"rendered":"https:\/\/maxbronsema.com\/blog\/?p=400"},"modified":"2013-02-27T07:34:56","modified_gmt":"2013-02-27T15:34:56","slug":"zurb-responsive-tables-within-drupal","status":"publish","type":"post","link":"https:\/\/maxbronsema.com\/blog\/2013\/02\/26\/zurb-responsive-tables-within-drupal\/","title":{"rendered":"Zurb responsive tables within Drupal"},"content":{"rendered":"

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<\/a>, the footable module<\/a>, and lastly Zurb’s responsive tables<\/a>.<\/p>\n

I had one criteria for a successful solution; my users should not have to do anything<\/strong> 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.<\/p>\n

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.<\/p>\n

To automate the insertion in the HTML of a CSS class I turned to the Flexifilter<\/a> 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.<\/p>\n

After enabling the module you need to go to Structure -> Flexifilters -> Add New Flexifilter.<\/p>\n

\"Setting<\/a>
Configuring a filter.<\/figcaption><\/figure>\n

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.<\/p>\n

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.<\/p>\n

\"Enabling<\/a>
Enable the text filter and place it as the last filter to run.<\/figcaption><\/figure>\n

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<\/a>. We want two of the files, responsive-tables.css and\u00a0 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.<\/p>\n

Open up your theme.info file and tell Drupal about these two new files. In a Zen sub-theme it looks like this:<\/p>\n

stylesheets[all][] = css\/responsive-tables.css\r\n; Optionally add some JavaScripts to your theme.\r\nscripts[] = js\/responsive-tables.js<\/pre>\n
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<\/p>\n
(function ($, Drupal, window, document, undefined) {<\/pre>\n
and at the very bottom add<\/p>\n
})(jQuery, Drupal, this, this.document);<\/pre>\n
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.<\/p>\n
\"Zurb<\/a>
Zurb style responsive table in Drupal 7.20.<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"
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 … Continue reading Zurb responsive tables within Drupal<\/span> →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[36,28,38,2],"tags":[],"class_list":["post-400","post","type-post","status-publish","format-standard","hentry","category-drupal","category-dynamic-media","category-rwd","category-web-development"],"_links":{"self":[{"href":"https:\/\/maxbronsema.com\/blog\/wp-json\/wp\/v2\/posts\/400","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/maxbronsema.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/maxbronsema.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/maxbronsema.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/maxbronsema.com\/blog\/wp-json\/wp\/v2\/comments?post=400"}],"version-history":[{"count":3,"href":"https:\/\/maxbronsema.com\/blog\/wp-json\/wp\/v2\/posts\/400\/revisions"}],"predecessor-version":[{"id":405,"href":"https:\/\/maxbronsema.com\/blog\/wp-json\/wp\/v2\/posts\/400\/revisions\/405"}],"wp:attachment":[{"href":"https:\/\/maxbronsema.com\/blog\/wp-json\/wp\/v2\/media?parent=400"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/maxbronsema.com\/blog\/wp-json\/wp\/v2\/categories?post=400"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/maxbronsema.com\/blog\/wp-json\/wp\/v2\/tags?post=400"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}