Responsive table classes for modules and themes

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 priority columns are shown at tablet widths, and LOW priority columns are shown at desktop widths. Columns with no responsive class are assumed to be essential and always shown. Hidden columns 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.

To remove the default responsive behaviour for an individual table, add '#responsive' => FALSE to the render array:

$table = array(
  '#theme' => 'table__forum_topic_list',
  '#attributes' => array('id' => 'forum-topic-' . $variables['tid']),
  '#header' => array(),
  '#rows' => array(),
  '#responsive' => FALSE,
);