Responsive tables just got committed. Each $header can choose to be Essential (the default - needs no special class), RESPONSIVE_PRIORITY_MEDIUM, or RESPONSIVE_PRIORITY_LOW. For an example, this is 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)
    ,)
  );
CommentFileSizeAuthor
#10 views-1796230-10.patch5.24 KBdawehner
#8 responsive2.png19.06 KBdawehner
#2 responsive1.png10.67 KBdawehner
#2 views-1796230-2.patch3.25 KBdawehner
#2 views.view_.blub_.yml_.txt2.54 KBdawehner
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

sebas5384’s picture

sebas5384 CreditAttribution: sebas5384 commented

Nice idea!

I think it doesn't need a constant for that, a simple class would be just fine, like ajax from core("use-ajax") and ctools with modals for example.

Cheers!,
Sebas.

dawehner’s picture

dawehner
Primary language German
CreditAttribution: dawehner commented
Status: Active » Needs review
FileSize
views.view_.blub_.yml_.txt2.54 KB
views-1796230-2.patch3.25 KB
responsive1.png10.67 KB

Some has to explain me this feature ...
I created a table with nid, title, type and set medium to nid, and low to type.
Once i shrink my browser window i only see title and type, though i would expect nid and title,
see screenshot.

Additional to be able to expose this to users, i would suggest more something like
"responsove priority":
none => high
medium => medium
low => low

dawehner’s picture

dawehner
Primary language German
CreditAttribution: dawehner commented
Issue tags: +VDC

Add missing tag.

hass’s picture

hass CreditAttribution: hass commented

What we need here is a "class per column" as I know. Views currently allows only a "class per row".

moshe weitzman’s picture

moshe weitzman CreditAttribution: moshe weitzman commented

Take a look at the HTML Source and see what classes are on the header cells and row cells. If they don't match what you expect, that would explain the result ... theme_table() copies classes from header to cells so it would likely be harmless if Views adds the responsive classes to the rows as well.

hass’s picture

hass CreditAttribution: hass commented

Is there any chance to make this a unified "class per column" feature? I have real theming need to add classes to colums in D7, too.

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
CreditAttribution: tim.plunkett commented

@hass that is clearly a separate feature request

dawehner’s picture

dawehner
Primary language German
CreditAttribution: dawehner commented
FileSize
responsive2.png19.06 KB

@hass ... Forgive me to not answer support questions in d8 issues. This is possible all the time,
but i would like to have an addition setting, as many people might not know the class names you need for responsive tables.

The actual rendered css classes are looking fine, at least for me, see screenshot.

moshe weitzman’s picture

moshe weitzman CreditAttribution: moshe weitzman commented

You have a leading space in the class name. Doubt that matters but who knows. Next I would look at the media queries in the CSS and see why they are not matching against your classes. make sure to flush caches in case you have an old aggregated css in play.

dawehner’s picture

dawehner
Primary language German
CreditAttribution: dawehner commented
FileSize
views-1796230-10.patch5.24 KB

I'm confused by bartik/style.css, this explains why it works for me in the admin
interface but not on the "frontend".

/**
 * Responsive tables.
 */
@media screen and (max-width:28.125em) { /* 450px */
  th.helpful,
  td.helpful,
  th.priority-medium,
  td.priority-medium {
    display: none;
  }
}
@media screen and (max-width:45em) { /* 720px */
  th.helpful,
  td.helpful {
    display: none;
  }
}

compared to the css of seven/stark:

@media screen and (max-width:28.125em) { /* 450px */
  th.priority-low,
  td.priority-low,
  th.priority-medium,
  td.priority-medium {
    display: none;
  }
}
@media screen and (max-width:45em) { /* 720px */
  th.priority-low,
  td.priority-low {
    display: none;
  }
}

Regarding the space in front, this will be automatically fixed in
another issue, which converts the classes to Attributes objects.

Beside the css classes, i added the javascript for the responsive table js as well.

dawehner’s picture

dawehner
Primary language German
CreditAttribution: dawehner commented

There is a core issue about this problem now: #1800304: The css for responsive tables on bartik contains old class names

dawehner’s picture

dawehner
Primary language German
CreditAttribution: dawehner commented
Status: Needs review » Fixed

Due to the core commit this works fine now, let's get this is as noone seems to have an interest in reviewing.

I really really like this new feature in core!

aspilicious’s picture

aspilicious CreditAttribution: aspilicious commented

I'm interested! I like the patch!

xjm’s picture

xjm
she/her
Primary language English
CreditAttribution: xjm commented

Way cool. Thanks @moshe weitzman and @dawehner.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

kaizerking’s picture

kaizerking CreditAttribution: kaizerking commented
Status: Closed (fixed) » Active

I would like to test it if back ported to D7

tim.plunkett’s picture

tim.plunkett
he/him
Primary language English
Location Philadelphia
CreditAttribution: tim.plunkett commented
Status: Active » Closed (fixed)

This issue was only about supporting improvements made in core. Backporting it would mean Views would shoulder the entirety of that improvement, which I'm not sure is reasonable. Either way, please open a new feature request.

DamienMcKenna’s picture

DamienMcKenna
Location NH, USA
CreditAttribution: DamienMcKenna commented

There's always the work Dave Reid and others are putting into backporting the code for D7: http://drupal.org/project/responsive_tables