Views MediaTable

Views MediaTable integrate the functionality of MediaTable(http://marcopeg.github.io/MediaTable/) into the Views module Table display, allowing the creation of dynamic & responsive Views tables where end users can choose to show or hide certain columns. This module also allows certain table column to behave responsively, hiding the less relevant data in smaller screen sizes.

Requirements

Module Dependencies:

• Views
• Libraries API

Library Dependencies:

• MediaTable JS Library

Installation

Views MediaTable depends on the Views and Libraries modules, download and enable these modules.

Download and place the MediaTable library into your libraries directory ( e.g. /sites/all/libraries/MediaTable/jquery.mediaTable.js ). The MediaTable library from here: https://github.com/thepeg/MediaTable

Once the dependencies are in place and installed. Copy the entirety of the views_mediatable directory into your modules directoy ( e.g. /sites/all/modules ) and active the Views MediaTable module.

Usage

Once the module is properly installed. A new views format "Views MediaTable Table" will be usable. This format has a settings "MediaTable Display Options" for each of its columns. This new setting has 3 options:

• Always Shown - A column with this option will always be displayed despite the screen size and users will not have the option to hide the column.
• Shown with Option to Hide - A column with this setting will be shown by default and is unaffected by the screen size. However, the user will have the option to hide column.
• Hide on Smaller Resolutions with Option to Show - A column with this setting will show by default in wider screen sizes (768px or higher) and will hide automatically for all screen sizes under 768px. However, the user have the option to show the column even in smaller screen sizes.

Extra Goodness

This module is not limited to use only with Views, if you wish you can apply this to ANY table on your Drupal site, with a bit of planning and structured HTML.

To use this on a table, you need to build a table that is fully structured, with a simular structure to the one listed below.

<table class="responsive-table">
  <thead>
    <tr>
      <th class="persist essential">Column 1 Heading</th>
      <th class="essential">Column 2 Heading</th>
      <th class="optional">Column 3 Heading</th>
      <th class="optional">Column 4 Heading</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Column 1 Data</td>
      <td>Column 2 Data</td>
      <td>Column 3 Data</td>
      <td>Column 4 Data</td>
    </tr>
  </tbody>
</table>

The important bits are that the table have the class "responsive-table" and that the table heading have the classes that are needed for the display. These classes are as follows:

• "persist essential" - This needs BOTH classes and is the same as Always Shown.
• "essential" - This is the same as Shown with Option to Hide
• "optional" - This is the same as Hide on Smaller Resolutions with Option to Show

This module was created with the assistance of John Brennan and Sam Lui.
This module is sponsored in part by ImageX.