# jQuery ReStable v0.1.1

jQuery ReStable is a very simple and lightweight (~1Kb) jQuery plugin that make tables responsive making them collapse into ul lists.

Download it on GitHub

To use it you just have to include jQuery and a copy of the plugin in your head or footer:

    <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript" src="jquery.restable.min.js"></script>
    <link rel="stylesheet" href="jquery.restable.min.css">

Let's say this is your table:

    <table class="mytable">
        <thead>
            <tr>
                <td>Period</td>
                <td>Full Board</td>
                <td>Half Board</td>
                <td>Bed and Breakfast</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>01/10/12 - 02/10/12</td>
                <td>20 €</td>
                <td>30 €</td>
                <td>40 €</td>
            </tr>
            <tr>
                <td>03/10/12 - 04/10/12</td>
                <td>40 €</td>
                <td>50 €</td>
                <td>60 €</td>
            </tr>
            <tr>
                <td>05/10/12 - 06/10/12</td>
                <td>70 €</td>
                <td>80 €</td>
                <td>90 €</td>
            </tr>
        </tbody>
    </table>

Now the only thing to do is to trigger the action with:

    $(window).ready(function () {
        $.ReStable();
    });

This will target automatically all the tables in the page but you can, off course, target one or more elements with:

    $(window).ready(function () {
        $('.mytable').ReStable();
    });

If you need more control here's the plugin settings:

    $('.mytable').ReStable({
        rowHeaders: true, // Table has row headers?
        maxWidth: 480 // Size to which the table become responsive
    });

## Some examples

Example A - Responsive Pricelist Table (with row headers)

Period | Full Board | Half Board | Bed and Breakfast
--- | --- | --- | ---
01/10/12 - 02/10/12 | 20 € | 30 € | 40 €
03/10/12 - 04/10/12 | 40 € | 50 € | 60 €
05/10/12 - 06/10/12 | 70 € | 80 € | 90 €

    $('#table1').ReStable();

Example B - Responsive Columns Table (without row headers)

Carbon | Hydrogen | Nitrogen | Oxygen
10 | 15 | 1 | 0
8 | 11 | 1 | 2
10 | 15 | 1 | 1
12 | 17 | 1 | 1
14 | 19 | 1 | 2

    $('#table2').ReStable({
        rowHeaders : false
    });

## Credits and contacts

ReStable has been made by me. You can contact me at micc83@gmail.com or twitter for any issue or feauture request.