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 views are the filtered to 6 months each and are shown on small and extra-small viewports. We toggle which versions of the block are visble by adding classes 'hidden-sm hidden-xs' to the first table's wrapper classes and adding classes 'hidden-md hidden-lg' to the second and third tables' 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 at 992px.

Multiple breakpoints

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

This example shows the same table, but now with 3 breakpoints. We add add the hidden-xs to the pair of blocks showing the split table and add a fourth variation of the block for extra small displays and adjust the classes used in the wrapper accordingly.

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 on an extra small display.

Shrink the width of your browser window and watch the table split to 2 rows at 992px and turn vertical at 768px.

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 'hidden-sm hidden-xs' to the table's wrapper and adding classes 'hidden-md hidden-lg' to the multi-level-list's wrapper.

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

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]
<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]

Additional Pages

About this Sidebar

Creating a sidebar for a group of pages without messing about with stacks is an easy use-case for Universal Content Puller.

This sidebar is edited once, within the main addon page for Universal Content Puller.

It is then pulled into all UCP sub-pages using a UCP block.

The Content Source is Parent Page, set to pull the Sidebar area from 2 pages from the top. The Content Transform is Selector, set to remove container and row classes that, when unnecessarily nested, could mess up the Bootstrap grid. The Content Display is Plain, which just outputs the transformed text.

In the advanced settings, sanitization is disabled as we trust the source page and don't want to strip out any formatting or functionality from the pulled sidebar.