Example - Responsive tables

CSV as a Responsive Table

Responsive tables can easily be implemente by using responsive classes to wrap variations of a Universal Content Puller block in the Advanced tab of the edit dialog.

The examples here use Bootstrap responsive classes. Nevertheless, the same principle can be applied to other frameworks such as Foundation.

If you haven't already read it, the examples below assume you already have knowledge of Example - CSV Data, so you should read that first before continuing with this example.

Our examples here all show the same table on wider windows. Shrink the width of your browser window and they all show different variations for small and extra small windows.

Because the data is coming from an external URL, we don't want to end up fetching that mutiple times. On the URL content source, source caching is enabled for the default period.

Slicing and Filtering for alternative views of a table

The example below toggles views of a table by filtering out columns. There are actually 3 similar copies of the same UCP block. The first shows all 12 months and is shown on medium and large viewports.

The second and third UCP blocks are then filtered to 6 months each and are shown on small and extra-small viewports. We toggle which versions of the block are visible by adding classes ' d-none d-lg-block' to the first table's wrapper classes and adding classes 'd-lg-none' to the second and third table wrapper classes in the Advanced tab of the edit dialog.

If you look back to the  Example - CSV data page, the columns were filtered with '1' to remove the first column containing the year, which had already been shown as a heading. In our example here, the filters are (with one number per row of the filter)

• The full table - filter -1
• The first half of the small table - filter -1,8,9,10,11,12,13
• The second half of the small table - filter -1,2,3,4,5,6,7

Shrink the width of your browser window and watch the table split to 2 rows.

Multiple breakpoints

This trick isn't limited to 2 alternatives. You can play a similar trick to show up to 4 alternatives based on the 4 Bootstrap classes for visibility.

This example shows the same table, but now with 3 breakpoints. We add 'd-none d-md-block d-lg-none'  to the pair of blocks showing the split table and add a fourth variation of the block for extra small displays with the class 'd-md-none'. All of these classes are added in the 'Advanced' tab of the UCP edit dialogue.

Again referring back to our original Example - CSS Data, the content transform had an option set to transpose the CSV data. Clearing the transpose checkbox is a simple way to have a vertical view of the same data for the extra small display.

Shrink the width of your browser window and watch the table first split to 2 rows then turn vertical.

Table reducing to a list

The next example below toggles between a table and a multi-level list by using the two examples from Example - CSV data and toggling which are visble by adding classes 'd-none d-lg-block' to the table wrapper and adding classes 'd-lg-none' to the multi-level-list wrapper.

Shrink the width of your browser window and watch the table and list views toggle.

Tweaking Bootstrap

The default Bootstrap behaviour for a horizontal definition list steps it to a vertical stacked list on an extra small display at 768px. That behaviour may look fine for longer text in the table cells, but for our list of numbers it would not be so pleasing.

To undo that and keep a horizontal list layout even on an extra small display, some css can be added to a header extra content attribute, using the class force-horizontal to make sure it is only used where we want it.

[code language="css"]
<style>
.force-horizontal .dl-horizontal dt {
    float: left;
    width: 160px;
    clear: left;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .force-horizontal  .dl-horizontal dd {
    margin-left: 180px;
  }
</style>
[/code]

Table as a Chart

You can see this same table of data as a chart using Universal Content Puller Charts.