It is claimed that "every HTML table in Drupal 8 is responsive." What this actually means is that tables in the Drupal 8 admin UI are responsive and also that in Views, if you select a Table format, you have the opportunity to prioritize columns that will hide upon reaching narrower breakpoints. In essence, "priority" classes are added to table cells and a "responsive-enabled" class to the table tag. At a tablet breakpoint, the "priority-low" table columns will hide and at the mobile breakpoint, the "priority-medium" columns will also not display.
While it's all well and good that HTML tables in Drupal's UI and Views carry this responsive table functionality, Drupal is, after all, a content management system. It's up to you, the content producer, to ensure that the tables you add to your content using HTML or the WYSIWYG editor contain the right markup to be responsive.
In this screencast, I demonstrate the responsive table functionality in Drupal 8's UI as well as how to build a responsive table using Views. Then, I inspect the markup of the HTML table produced by Views and add those classes to a table created in the Body field of a node using CKEditor. I demonstrate which classes to add and where and the result: a responsive HTML table that appears in the Body field of an Article.
By the way, the Drupal 8 Responsive Tables functionality has a Drupal 7 backport which gives you the responsive Views tables functionality. There are currently two development branches and you can download it on the Responsive Tables project page on Drupal.org. (To find more Drupal 8 core modules that have been backported to Drupal 7, see Kyle Hofmeyer's blog post Drupal 8 Has All the Hotness, but So Can Drupal 7.)
As mentioned at the end of the screencast, if you are a module developer or themer, check out this change notice about how to use theme_table to implement responsive tables in your module or theme.
What strategies have you been using to responsify your site's HTML tables?
Comments
huu...a privat video?...sad
All fixed up now! Video is now public. :)
Nice, thank you for the video. That's what I was looking for.
So how do you map table column priorities to breakpoints in a custom theme? I've tried everything I can think of and I can't get this working with a custom theme - the documentation just doesn't seem to be out there.
Hi Dan,
This is done through CSS only. There are no "Drupalisms" involved. Use a media query to target a breakpoint and the specific classes you want to hide. See Bartik's table.css for an example:
core/themes/bartik/css/components/table.css
/**
* Responsive tables.
*/
@media screen and (max-width: 37.5em) { /* 600px */
th.priority-low,
td.priority-low,
th.priority-medium,
td.priority-medium {
display: none;
}
}
@media screen and (max-width: 60em) { /* 920px */
th.priority-low,
td.priority-low {
display: none;
}
}
See our Drupal 8 Theming Guide to learn how to add classes to a template file and add CSS assets to a theme:
Hope this helps!
Hi cool website.
Add new comment