drupal views responsive tables and the enlightenment process

Christopher Bloom (illepic)

SuperStar Media

Goal

Make

Zurb Responsive Tables

Play nice with

Views

Solution

Just write a custom module, find the right hook and make a new views plugin display format that adds a class to the table and injects both the Zurb javascript and css file.

Everyone's First Reaction

Drupal Learning curve

"But we're Front-enders!"

Like everything in Drupal, there are dozens of ways to reach the same outcome.

We could accomplish responsive tables using just the theme layer, but should we?

Let's do it the right way.

Thought process

According to Zurb, we need the following for responsive tables:

A javascript file (responsive-tables.js)
A CSS file (responsive-tables.css)
A class on our table (<table class="responsive">)

Thought Process

At the Drupal level we know:

We want to select a Views "format" for responsive tables like we already do for "HTML list" or "Table"
This is probably a "views plugin" or something.
Many other modules do exactly this already

Implementation

OK, so the first thing we're going to do is pull up all the Views 3.0 api information and start reading.

Implementation for reals

Let's find an existing module that does something similar already.

Googling "drupal views plugin table" strikes gold with Views Hacks, specifically submodule Views Flipped Table.

Repo

Follow along:

https://github.com/illepic/responsive_tables

A quick word about knowing what to do

Start with a conceptual grasp ("Our view needs a display plugin")
Dig through others' code
Write your own from what you've learned
Strengthen grasp
Repeat

From here on out, we're going to use Views Flipped Table as our guide (Step 2-3).

(I've never had an original thought in my life and most people are WAY better at this than me.)

Starting Off

responsive_tables.info

name = Responsive tables
description = Zurb responsive tables
core = 7.x
dependencies[] = views

files[] = responsive_tables.module
files[] = responsive_tables.views.inc
files[] = responsive_tables_plugin_style_responsive_table.inc

Views api and Views Hooks

responsive_tables.module

function responsive_tables_views_api() {
  return array(
    'api' => 3.0,
  );
}

We'll come back to the following

function responsive_tables_preprocess_views_view_table(&$vars) {
  // hook just views that have our style plugin
  if ($vars['view']->style_plugin->plugin_name == 'responsive'){
    // add the class that zurb wants
    $vars['classes_array'][] = 'responsive';
    // add the css that zurb expects
    drupal_add_css(drupal_get_path('module', 'responsive_tables') . '/zurb/responsive-tables.css');
    // add the slightly modified js that zurb wants
    drupal_add_js(drupal_get_path('module', 'responsive_tables') . '/zurb/responsive-tables.js');
  }
}

Defining a Views plugin

responsive_tables.views.inc

function responsive_tables_views_plugins() {
  return array(
    'style' => array(
      'responsive' => array(
        'title' => t('Responsive tables'),
        'help' => t('Displays a Zurb responsive table'),
        'handler' => 'responsive_tables_plugin_style_responsive_table',
        'parent' => 'table',
        'uses row plugin' => FALSE,
        'uses fields' => TRUE,
        'uses options' => TRUE,
        'type' => 'normal',
        'theme' => 'views_view_table',
        'even empty' => TRUE,
      ),
    ),
  );
}

Views pLugin Custom Fields

class responsive_tables_plugin_style_responsive_table extends views_plugin_style_table {
  
  function option_definition() {
    $options = parent::option_definition();
    $options['responsive_tables_add_awesomesauce'] = array('default' => TRUE);
    return $options;
  }

  function options_form(&$form, &$form_state) {
    parent::options_form($form, $form_state);
    $form['responsive_tables_add_awesomesauce'] = array(
      '#type' => 'checkbox',
      '#title' => t("Add awesomesauce?"),
      '#default_value' => $this->options['responsive_tables_add_awesomesauce'],
      '#description' => t("A demo of a checkbox that can be used in a views plugin form."),
    );
  }
}

Check for View display, add CSS/JS

responsive_tables.module (again)

function responsive_tables_preprocess_views_view_table(&$vars) {
  // hook just views that have our style plugin
  if ($vars['view']->style_plugin->plugin_name == 'responsive'){
    // add the class that zurb wants
    $vars['classes_array'][] = 'responsive';
    // add the css that zurb expects
    drupal_add_css(drupal_get_path('module', 'responsive_tables') . '/zurb/responsive-tables.css');
    // add the slightly modified js that zurb wants
    drupal_add_js(drupal_get_path('module', 'responsive_tables') . '/zurb/responsive-tables.js');
  }
}

A note about the busted JS library

Add to the top of responsive-tables.js

$ = jQuery;

(Suggestions from the audience for a less janky way to do this?)

IT WERKZ

Reverse Engineering Views PLugins

hook_views_plugins() - Define a style and various facts about the style
Extend views_plugin_style_table with our (fake) views style options
Preprocess any view that has our display and add in Zurb's classes, CSS, and JS!