Skip to content
This repository has been archived by the owner on May 17, 2020. It is now read-only.

Latest commit

 

History

History
62 lines (49 loc) · 2.97 KB

README.md

File metadata and controls

62 lines (49 loc) · 2.97 KB

flexi-tables

A JQuery Plugin for Responsive HTML Tables

* Click here to use the [Live Demo](http://iancwoodward.github.io/flexi-tables/) * (This was developed with JQuery 1.11.0)

This plugin is designed to make HTML tables fully responsive by wrapping information into a single column at a specified window width. It is meant to be very generic in nature so can be easily applied to just about any kind of data set, whether very simple or very complex, and can even be applied to multiple tables on a single page.

Files Required —

  • flexi_tables.css
  • flexi_tables.js

To make a flexi-table start with a semantic HTML table
  • In the `````` tag add a data attribute of flexi-table. ⇢ ```
    ```
  • To define custom headers for the collapsed table, give the flexi-table data tag comma deliniated values based on what ```
    • ``` html content you want to appear in each sub-table. (i.e. if you want content from the first and second `````` element then ---> `````` [Note that these are based on array index values so they start at '0'])
  • To add deliniators between ```
    • ``` content that is placed in the custom headers add a data tag of flexi-deliniator. You can give it a value equal to the type of deliniator you want between each content set, or leave it blank to add extra space between them with no character between. 
        This --->             <table data-flexi-table="0, 1" data-flexi-deliniator="|">
      
    Will result in --->   <th class="flexiTableTitle">
                              [content from the 1st td tag in the data set] 
                                  <span class="flexiTableDeliniator">|</span> 
                              [content from the 2nd td tag in the data set] 
                          </th>

    Built in CSS classes —

    • .flexiTableTitle (The <th> for the sub-tables created when the table is collapsed.)
    • .flexiTableDeliniator (A <span> surrounding the spacers between content in the custom header, these can be empty.)
    • .flexiTableLabel (<th> tags with display:block and float:left to act as a <td> when the table is collapsed.)

    Features to be added —

    • ie8 support (intent is for the plugin to degrade gracefully)
    • fixed headers for full width and collapsed views
    • data shuffling / content sorting for full width and collapsed views