Large Table Viewer

Tables automatically resize to fit smaller viewports. As a result, large tables are often difficult for users to read and interpret due to excessive content wrapping and scrolling. The Table Viewer allows for large tables to be “condensed” as icons and displayed in their original size in a separate viewer component in Viewport 2 and Viewport 1.

Example 1 below is viewer-enabled, so if you are viewing in Viewport 1 or 2, you should see a clickable table icon in place of the table.  For comparison purposes, the same table is presented in Example 2 but without the table viewer option.

When to Use

• Your table has more than three columns OR the content wraps forcing very tall cells in smaller Viewports.

When to Consider Something Else

• Tables should not be used for content layout. They should only be used to display content that may be compared by row and column headings, primarily data.
• Consider creating separate, smaller tables by grouping similar column headings (e.g. columns for age group data can be treated as a separate table).
• Users are comfortable with vertical scrolling on websites. It’s better to have a few columns and more rows. Some wide tables may be transformed to better support users on mobile devices, particularly phones often used in portrait orientation.

Other Guidance

• Use short row and column headings.
• Avoid using tables that are wider than the RD template grid as these will force users to scroll horizontally in Viewport 4 and Viewport 3.

Each table is a separate WYSIWYG module (text box), but they could all be created within the same WYSIWYG body field.  In order to add the viewer to tables we went to Text view and added the “opt-in” class to tables.  The following are the classes added to the tables on this page:

1. opt-in table table-bordered
2. table table-bordered
3. opt-in table
4. table

For more information, view the source code for this page.