Home / Responsive tables in Drupal 8

Responsive tables in Drupal 8

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.

Credits

Comments

Posted on by Nicolas Borda.

This is awesome, congrats guys, huge win for D8!

Posted on by Roger Nyman.

Read in on the linked article from great Filament Group, complete with code & demo. Think I ended up getting a good grasp of what's goin' on here. What I do know, is that I bought the book "Designing with Progressive Enhancement" :)

Posted on by Robert Mairo.

At Drupalcon Munich, one of the awesome things was seeing so many people show an interest in helping out with Drupal 8’s Mobile Initiative. On the Friday after Drupalcon’s session, at that Code Sprint, there were four tables full of people helping out with JavaScript issues, Drupal’s administrative screens, responsive images, and HTML5. And, as Dries’ recent blog post shows, now is the perfect time for you to help out with the Drupal 8 Mobile Initiative. Feature freeze is coming on December 1st and we still have lots of things to accomplish.

http://www.spainfarms.com/

Add new comment

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.

Filtered HTML

  • Use [acphone_sales], [acphone_sales_text], [acphone_support], [acphone_international], [acphone_devcloud], [acphone_extra1] and [acphone_extra2] as placeholders for Acquia phone numbers. Add class "acquia-phones-link" to wrapper element to make number a link.
  • To post pieces of code, surround them with <code>...</code> tags. For PHP code, you can use <?php ... ?>, which will also colour it based on syntax.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <h4> <h5> <h2> <img>
  • Lines and paragraphs break automatically.
By submitting this form, you accept the Mollom privacy policy.