The Responsive Tables functionality (D7 Responsive Tables module, D8 core) makes tables better fit different screen sizes by using a simple pattern:

  • Every column has one of 3 classes: default, medium priority, low priority
  • In the theme settings there are 2 screen size breakpoints: Low / medium priority max-width (meaning max-width at which that solumn class is suppressed

So in the end we have

  • Wide screens (wider than Medium Priority max width) show all columns
  • Medium screens (wider than Low priority max width but smaller than Medium Priority max width) show default and medium priority columns
  • Small screens (smaller than Low priority max width) show only default columns

Drupal 7 Module

Starting from the 2.x branch, the Responsive Tables module is a self-contained backport of the D8 core functionality and does not need the Better Views Tables sandbox module anymore. (We may delete this when the misleading link on the module page is deleted.)

In order to get 2.x Version working programatically you must do the following:

  • Set widths on theme settings page
  • Add responsive element to table array and set to true
  • Add css classes to table headers where appropriate (priority-medium and priority-low
  • Instead of theme_table() use responsive_tables_theme_table()