Add new comment

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

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.