Coder Social home page Coder Social logo

micc83 / restable Goto Github PK

View Code? Open in Web Editor NEW
189.0 12.0 46.0 30 KB

🌈 jQuery plugin that makes tables responsive converting them to HTML lists on small viewports.

Home Page: https://micc83.github.io/ReStable/

CSS 23.88% JavaScript 76.12%
jquery-restable jquery-plugin responsive table

restable's Introduction

SWUbanner

jQuery ReStable 0.1.2

jQuery ReStable is a very simple and lightweight (~1Kb) jQuery plugin that make tables responsive making them collapse into ul lists.You can find some examples in the included demo.

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:

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

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

$(document).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
    keepHtml: false // Keep the html content of cells
});

Credits and contacts

ReStable has been made by me. You can contact me at [email protected] or twitter for any issue or feature request.

restable's People

Contributors

micc83 avatar silent-e avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

restable's Issues

Add classes on the generated bulleted list

Hi Alessandro,

I'd be great if the plugin could automatically add classes (maybe based on the index) on each <li>. It would be useful to style specific elements/rows.

Ideally, I'd love to have an option "Persist classes" that would apply the class from a <tr> to the <li>. For instance:

<table id="tablepress-1" class="tablepress tablepress-id-1">
    <thead>
        <tr class="row-1 odd">
            <th class="column-1">
                <div>&nbsp;</div>
            </th>
            <th class="column-2">
                <div>THB</div>
            </th>
            <th class="column-3">
                <div>Approx AUD</div>
            </th>
            <th class="column-4">
                <div>Approx NZD</div>
            </th>
        </tr>
    </thead>
    <tbody class="row-hover">
        <tr class="row-2 even">
            <td colspan="4" class="column-1">Breast procedures</td>
        </tr>
        <tr class="row-3 odd">
            <td class="column-1">Breast Augmentation up to 400 cc</td>
            <td class="column-2">99000</td>
            <td class="column-3">3,247</td>
            <td class="column-4">3,551</td>
        </tr>
        <tr class="row-6 even">
            <td class="column-1">Breast Augmentation Furry Implant</td>
            <td class="column-2">159000</td>
            <td class="column-3">0</td>
            <td class="column-4">0</td>
        </tr>
    </tbody>
</table>

<!-- Would turn into this: -->

<ul class="tabletolist nrh" id="tabletolist3" style="display: block;">
    <li class="row-2 even">
        <ul>
            <li class="column-1"><span class="row_headers">&nbsp;</span> <span class="row_data">Breast procedures</span></li>
            <li class="column-1"><span class="row_headers">THB</span> <span class="row_data"></span></li>
            <li class="column-1"><span class="row_headers">Approx AUD</span> <span class="row_data"></span></li>
            <li class="column-1"><span class="row_headers">Approx NZD</span> <span class="row_data"></span></li>
        </ul>
    </li>
    <li class="row-3 odd">
        <ul>
            <li class="column-1"><span class="row_headers">&nbsp;</span> <span class="row_data">Breast Augmentation up to 400 cc</span></li>
            <li class="column-2"><span class="row_headers">THB</span> <span class="row_data">99000</span></li>
            <li class="column-3"><span class="row_headers">Approx AUD</span> <span class="row_data">3,247</span></li>
            <li class="column-4"><span class="row_headers">Approx NZD</span> <span class="row_data">3,551</span></li>
        </ul>
    </li>
    <li class="row-6 even">
        <ul>
            <li class="column-1"><span class="row_headers">&nbsp;</span> <span class="row_data">Breast Augmentation Furry Implant</span></li>
            <li class="column-2"><span class="row_headers">THB</span> <span class="row_data">159000</span></li>
            <li class="column-3"><span class="row_headers">Approx AUD</span> <span class="row_data">0</span></li>
            <li class="column-4"><span class="row_headers">Approx NZD</span> <span class="row_data">0</span></li>
        </ul>
    </li>
</ul>

Does that makes sense?

Cheers

Rows added dynamically do not appear in list

When adding rows dynamically, the list elements are not redrawn/updated. Calling $.ReStable() again on the table appends the list elements again (containing the new rows), but doesn't remove the previous rendering, resulting in duplicate lists being displayed.

Images are absent in list

In table in column i have just images. When i applied ReStable-plugin this images are absent in lists.

  • 3D Streets of Rage  
  • Nintendo 3DS
                                    </span></li><li class="cf"><span class="row_headers">
                                        <-- here must be image
                                    </span> <span class="row_data "></span></li><li class="cf"><span class="row_headers">
                                        Fantasy Violence
                                    </span> <span class="row_data "></span></li><li class="cf"><span class="row_headers">
                                        None
                                    </span> <span class="row_data "></span></li><li class="cf"><span class="row_headers">
                                        Sega
                                    </span> <span class="row_data "></span></li></ul>
    

    3D Streets of Rage Nintendo 3DS Rating Fantasy Violence None Sega

Not working with <th> instead of <td> in <thead>

Hi there,

Just noticed plugin does not work with <th> instead of <td> in <thead>. Would it be possible to make it work with both?

Btw, I took a quick look at the code and I noticed a few things like (thanks to JSLint):

  • no 'use strict'
  • mixed spaces and tabs
  • missing radix parameter

Cheers

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.