Responsive Tables in TNG v11
Responsive Tables provide a means of adjusting the content and column width of tables in TNG to improve the display on small displays such as mobiles including changes between portrait and landscape mode. It needs to be turned on to be effective.
TNG V11 incorporated the Responsive Tables mod.
From the TNG V11 Change Log:
- 70. Responsive: The Responsive Tables mod has been integrated, making it easier to view some of TNG's larger tables on a small screen (original code by Gustav Dahl and Ken Roy).
From the TNG Blog
- Mobile-Friendly: More improvements here will make your site even more usable on mobile devices.
For TNG v10.1+, you can use the Responsive Tables mod.
Introduction
The responsive tables feature in TNG v11 applies to several TNG displays using the Tablesaw jQuery plugins
This code was available as the Responsive Tables mod in TNG 10.1 through 10.1.3.
For a complete discussion on responsive tables, see the TNG Forum entry on Responsive Web Design
Setup
If you want to use the Responsive Tables in TNG V11 for the smart phones and tablets, you must go to Admin > Setup > General Settings and scroll down to the Mobile section and enable the capability. In the Responsive Tables mod the options were in the Mod Manager Edit options screen.
You can specify the Type of responsive table displays to use:
- Toggle (default)
- Stack
- Swipe
Column Priorities
Table headers use a data-tablesaw-priority attribute to be eligible to toggle their display. The data-tablesaw-priority is a numeric value from 1 to 6, which determine default breakpoints at which a column will show.
The breakpoint defaults are:
| Priority | Toggle Breakpoint | Typical Target Devices | Device | Orientation | Widths |
|---|---|---|---|---|---|
| data-tablesaw-priority="persist" | Not eligible for toggle, always shows | ||||
| data-tablesaw-priority="1" | Shows at (min-width: 20em) (320px) | smaller smart phones in portrait orientation | iPhone 3 | portrait | 320x480 |
| data-tablesaw-priority="2" | Shows at (min-width: 30em) (480px) | smaller smart phones in landscape orientation small tablets in portrait orientation |
iPhone 3 Samsung Tab 3 |
Landscape Portrait |
480×320 480x680 |
| data-tablesaw-priority="3" | Shows at (min-width: 40em) (640px) | newer smart phone portrait older smart phones in landscape |
iPhone 4 Samsung Tab 3 |
Landscape Landscape |
640x960 680x480 |
| data-tablesaw-priority="4" | Shows at (min-width: 50em) (800px) | tablet portrait | |||
| data-tablesaw-priority="5" | Shows at (min-width: 60em) (960px) | newer smart phone landscape | |||
| data-tablesaw-priority="6" | Shows at (min-width: 70em) (1120px) | tablet landscape |
The Responsive Tables jQuery plugins from Tablesaw are implemented for the following TNG screens:
- Anniversaries
- Browse Albums
- Browse Branches
- Browse Media
- Browse Notes
- Browse Repositories
- Browse Sources
- Browse Trees
- Cemeteries and Headstones
- Cemetery Map Headstones and Burials
- Family search results
- People search results
- Reports
- Statistics
- What's New
This Google Web Master link can be used to test whether your pages are mobile friendly.
Visualization
Toggle
The following are a couple of screen captures on the Galaxy S5 smart phone for the Toggle option. Notice that only the fields that were selected to display based on the priority are displayed.
| Portrait Orientation | Landscape Orientation |
|---|---|
|
|
Stack
The following are a couple of screen captures on the Galaxy S5 smart phone for the Stack option. Notice that the column headings are only stacked and siplayed to the left of the data if the screen width is not wide enough to display the data.
| Portrait Orientation |
|---|
|
Swipe
The following are a couple of screen captures on the Galaxy S5 smart phone for the Swipe option. Notice that if thecolumns do not all fit on the screen you need to swipe the display to veiw the columns to the right/left of what is currently displayed.
| Portrait Orientation |
|---|
|
Related Links
General Information
Formatting Tables for Mobile Display
Incorporated in to TNG 10.1
Mobile Media - adjusts the Image display when not using the Image Viewer and adjusts the Image Preview for smart phones and tablets was incorporated into TNG v10.1
Mobile Site No Previews - eliminates Person, and Family previews for smart phones was incorporated into TNG v10.1
Mobile Site No Slideshow - suppresses the Slide Show for smart phones and tablets was incorporated into TNG v10.1
Incorporated in to TNG 11
Responsive Tables - adjusts TNG table displays based on screen widths is incorporated into TNG v11
See Table Saw jQuery Plugin for additional information
Mods that are applicable for TNG 11
Mobile Individual Page Map - adjusts the Google Event Map on smart phones and tablets
Mobile Site Enhancements - several adjustments for smart phones and tablets
Life Dates Mobile - adjusts the date displays for smart phones and tablets as an alternative to Life Dates Mod which always puts the birth and death dates on separate lines
