Responsive Tables Filter
This module automatically makes tables in WYSIWYG content and Drupal Views responsive on smaller screens by transforming column headers into rows. It's useful for sites where content editors are not comfortable manually adding HTML markup for responsive table behavior.
Summary
This module makes tables in WYSIWYGs and Drupal Views fit on smaller screens. The Filament Group's Tablesaw technique moves column headers into rows:
It makes the following tables responsive:
- Any tables within fields where Drupal text format filters can be applied
- Views tables
Similar modules
This module should not be confused with responsive_table_filter, which uses a different method to achieve small-device-friendly tables.
When should I this module?
Drupal does allow for tables to be responsive, but content editors must manually define what priority each table row should be, and must manually add classes to HTML markup in WYSIWYG fields. This module does a best effort at automating this (at the cost fine-grained control). If your site's content editors are not comfortable working with HTML markup, this module is a good fit.
Usage
- Enable this module and go to
admin/config/content/formats. - Enable the filter "Make tables responsive" on any text formats for which you want to make tables responsive (e.g., Filtered HTML).
- Verify the text format(s) allow HTML table tags (see "Limit HTML tags"). All of the following should be allowed:
<table> <th> <tr> <td> <thead> <tbody> <tfoot> - Select which default table behavior you prefer. See the documentation at https://github.com/filamentgroup/tablesaw#tablesaw . Individual tables can override this default by specifying
tablesaw-stack,tablesaw-columntoggle, ortablesaw-swipeas a class on thetabletag. - If you are using a WYSIWYG toolbar (e.g., CKEditor), verify that its content filtering is not interfering with table styling (see the README for more details).
- Add a table! Note: Tables must have a
<thead>tag for responsive behavior to take effect. - If you want Views tables to be responsive, enable this at
/admin/config/content/responsive_tables_filter
Documentation
https://www.drupal.org/docs/contributed-modules/responsive-tables-filter
Can I change the breakpoints for the library?
To change the responsive table breakpoints to something other than the defaults, copy the tablesaw-responsive.css CSS file into your theme, modify it as needed, and register the file as an override in your theme's libraries.yml file.