Download & Extend

Responsive table classes for modules and themes

Project: 
Drupal core
Introduced in branch: 
8.x
Description: 

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 partyfor 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.

Impacts: 
Site builders, administrators, editors
Module developers
Themers
Updates Done (doc team, etc.)
Online documentation: 
Not done
Theming guide: 
Not done
Module developer documentation: 
Not done
Examples project: 
Not done
Coder Review: 
Not done
Coder Upgrade: 
Not done
Other: 
Other updates done
nobody click here