Responsive Tables Filter

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

1. Enable this module and go to admin/config/content/formats.
2. Enable the filter "Make tables responsive" on any text formats for which you want to make tables responsive (e.g., Filtered HTML).
3. 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>
4. 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, or tablesaw-swipe as a class on the table tag.
5. 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).
6. Add a table! Note: Tables must have a<thead> tag for responsive behavior to take effect.
7. 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.