Drupal is a registered trademark of Dries Buytaert
drupal 11.3.7 — Update released for Drupal core (11.3.7)! drupal 11.2.11 — Update released for Drupal core (11.2.11)! drupal 10.6.7 — Update released for Drupal core (10.6.7)! drupal 10.5.9 — Update released for Drupal core (10.5.9)! cms 2.1.1 — Update released for Drupal core (2.1.1)! drupal 11.3.6 — Update released for Drupal core (11.3.6)! drupal 10.6.6 — Update released for Drupal core (10.6.6)! cms 2.1.0 — Update released for Drupal core (2.1.0)! bootstrap 8.x-3.40 — Minor update available for theme bootstrap (8.x-3.40). menu_link_attributes 8.x-1.7 — Minor update available for module menu_link_attributes (8.x-1.7). eca 3.1.1 — Minor update available for module eca (3.1.1). layout_paragraphs 2.1.3 — Minor update available for module layout_paragraphs (2.1.3). ai 1.3.3 — Minor update available for module ai (1.3.3). ai 1.2.14 — Minor update available for module ai (1.2.14). node_revision_delete 2.0.3 — Minor update available for module node_revision_delete (2.0.3). moderated_content_bulk_publish 2.0.52 — Minor update available for module moderated_content_bulk_publish (2.0.52). klaro 3.0.10 — Minor update available for module klaro (3.0.10). klaro 3.0.9 — Minor update available for module klaro (3.0.9). layout_paragraphs 2.1.2 — Minor update available for module layout_paragraphs (2.1.2). geofield_map 11.1.8 — Minor update available for module geofield_map (11.1.8).
← All modules

responsive_tables_filter

8,097 sites Security covered
View on drupal.org

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.

Activity

Total releases
2
First release
Jan 2026
Latest release
2 months ago
Release cadence
37 days
Stability
100% stable

Releases

Version Type Release date
2.1.1 Stable Feb 13, 2026
2.1.0 Stable Jan 7, 2026