Responsive tables in Drupal 8

September 28, 2012
3 minute read

I'm thrilled to announce that all HTML tables in Drupal 8 will be responsive. This is a huge win for the Drupal 8 Mobile Initiative.. This is especially important in Drupal's admin section, which traditionally featured wide tables listing recently created content, comments, users, terms, etc. I believe we struck a great balance by hiding unimportant columns by default at narrow widths, and letting user expose those columns on demand. Our technique is a simplified version of this great Filament Group article and demo.

Technical

There is a new, simple API for callers to theme_table(). Less important columns should get a RESPONSIVE_PRIORITY_MEDIUM class or a RESPONSIVE_PRIORITY_LOW class in their $header array. Both of these column types are hidden for narrow devices; MEDIUM shows up for tablet widths, and LOW columns join the party for desktop widths. Columns with no responsive class are assumed to be essential and always shown. Hidden colmns can always be exposed on demand by the user by clicking a 'Show all columns' link.

Here is an example from admin/content (node.admin.inc).

// Build the sortable table header.
  $header = array(
    'title' => array(
      'data' => t('Title'),
      'field' => 'n.title',
    ),
    'type' => array(
      'data' => t('Content type'),
      'field' => 'n.type',
      'class' => array(RESPONSIVE_PRIORITY_MEDIUM),
    ),
    'author' => array(
      'data' => t('Author'),
      'class' => array(RESPONSIVE_PRIORITY_LOW),
    ),
    'status' => array(
      'data' => t('Status'),
      'field' => 'n.status',
    ),
    'changed' => array(
      'data' => t('Updated'),
      'field' => 'n.changed',
      'sort' => 'desc',
      'class' => array(RESPONSIVE_PRIORITY_LOW)
    ,)
  );

Themes need to add media queries to their CSS in order to support this feature. See core/themes/stark/css/layout.css for an example.

Folks might want to help out or follow along as we add responsive table support to Views.