TableList

A jQuery plugin that populates a table with the necessary data attributes in order to display as a list on smaller viewports.

Comes with a markup API that allows running the plugin without writing a single line of JavaScript. This is Responsive's first class API and should be your first consideration when using a plugin.

Examples

Title	Director	Synopsis	Release Year
Star Wars: Episode IV - A New Hope	George Lucas	Luke Skywalker joins forces with a Jedi Knight, a cocky pilot, a Wookiee and two droids to save the universe from the Empire's world-destroying battle-station, while also attempting to rescue Princess Leia from the evil Darth Vader.	1977
Star Wars: Episode V - The Empire Strikes Back	Irvin Kershner	After the rebels have been brutally overpowered by the Empire on their newly established base, Luke Skywalker takes advanced Jedi training with Master Yoda, while his friends are pursued by Darth Vader as part of his plan to capture Luke.	1980
Star Wars: Episode VI - Return of the Jedi	Richard Marquand	After rescuing Han Solo from the palace of Jabba the Hutt, the Rebels attempt to destroy the Second Death Star, while Luke Skywalker tries to bring his father back to the Light Side of the Force.	1983

Markup

<table data-table-list="" class="table-list table-striped table-bordered">
    <thead>
        <tr>
            <th scope="col">Title</th>
            <th>Director</th>
            <th>Synopsis</th>
            <th>Release Year</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Star Wars: Episode IV - A New Hope</th>
            <td>George Lucas</td>
            <td>Luke Skywalker joins forces with a Jedi Knight...</td>
            <td>1977</td>
        </tr>
        <tr>
            <th scope="row">Star Wars: Episode V - The Empire Strikes Back</th>
            <td>Irvin Kershner</td>
            <td>After the rebels have been brutally overpowered by...</td>
            <td>1980</td>
        </tr>
        <tr>
            <th scope="row">Star Wars: Episode VI - Return of the Jedi</th>
            <td>Richard Marquand</td>
            <td>After rescuing Han Solo from the palace of Jabba...</td>
            <td>1983</td>
        </tr>
    </tbody>
</table>

Methods

The tablelist plugin exposes the following method signatures.

.add(): Initialises the plugin adding the necessary data attributes to the table.

Events

The tablelist plugin exposes the following events allowing the developer to tap into its behaviour.

add.r.table: This event is fired immediately when the plugins add instance method is invoked.
added.r.table: This event is fired when the plugins added instance method is invoked once the target has had all the attributes added.

Data API

The tablelist's default behaviour is bound using a markup API that allows running the plugin without writing a single line of JavaScript. If you need to override this behaviour the following code will allow you to do so.

// Override the default behaviour
$(document).off("ready.r.table")
           .on("ready.r.table", "[data-tablelist]", function (event) {    
               // Your custom behaviour...
           });