All Projects → micc83 → Restable

micc83 / Restable

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

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Restable

Guillotine
jQuery plugin to crop images within an area (fully responsive), allowing to drag (touch support), zoom and rotate.
Stars: ✭ 318 (+73.77%)
Mutual labels:  jquery-plugin, responsive
React Collapsing Table
react-collapsing-table: a React rewrite of the jQuery table plugin from "datatables.net". Inspired by a lack of similar table behaviors, notably collapsibility and responsivity.
Stars: ✭ 21 (-88.52%)
Mutual labels:  table, responsive
Gijgo
Gijgo - Free Javascript Controls
Stars: ✭ 424 (+131.69%)
Mutual labels:  jquery-plugin, table
Sidr
Sidr is a jQuery plugin for creating side menus and the easiest way for doing your menu responsive.
Stars: ✭ 2,924 (+1497.81%)
Mutual labels:  jquery-plugin, responsive
Imgnotes
Extension of the jQuery imgViewer plugin to add markers and notes to the image
Stars: ✭ 98 (-46.45%)
Mutual labels:  jquery-plugin, responsive
Stickystack.js
A jQuery plugin that creates a stacking effect by sticking panels as they reach the top of the viewport.
Stars: ✭ 287 (+56.83%)
Mutual labels:  jquery-plugin, responsive
Tablesaw
A group of plugins for responsive tables.
Stars: ✭ 5,497 (+2903.83%)
Mutual labels:  table, responsive
use-table-tools
React Hooks for building kickass react table components
Stars: ✭ 18 (-90.16%)
Mutual labels:  responsive, table
Basictable
Basic Table jQuery or Vanilla JS plugin for simple responsive tables.
Stars: ✭ 94 (-48.63%)
Mutual labels:  jquery-plugin, table
Jquery Calendar
A responsive jquery calendar scheduler built with bootstrap and moment.js
Stars: ✭ 67 (-63.39%)
Mutual labels:  jquery-plugin, responsive
fluid-table
A tiny library to create responsive HTML tables
Stars: ✭ 23 (-87.43%)
Mutual labels:  responsive, table
Ax5ui Grid
Javascript UI Component - GRID ( Excel Grid, jqGrid, angularjs grid, jquery grid, SlickGrid, ag-grid gridify)
Stars: ✭ 102 (-44.26%)
Mutual labels:  jquery-plugin, table
tabullet
Simple jQuery plugins for creating a table that can insert, edit, and delete row in one place.
Stars: ✭ 13 (-92.9%)
Mutual labels:  jquery-plugin, table
Ember Light Table
Lightweight, contextual component based table for Ember 2.3+
Stars: ✭ 310 (+69.4%)
Mutual labels:  table, responsive
aioneframework
Aione Framework: All-in-one lightweight mobile first front-end framework to design websites, web applications, mobile applications, progressive web applications having large number of examples, documentation, tutorials, community support, components.
Stars: ✭ 13 (-92.9%)
Mutual labels:  responsive, table
Jquery.sumoselect
A jQuery Single/Multi Select plugin which can be used on almost any device
Stars: ✭ 527 (+187.98%)
Mutual labels:  jquery-plugin, responsive
xGallerify
A lightweight, responsive, smart gallery based on jQuery
Stars: ✭ 52 (-71.58%)
Mutual labels:  jquery-plugin, responsive
ml-stack-nav
Customizable, responsive, accessible, easy-to-use multi-level stack navigation menu with slide effect.
Stars: ✭ 20 (-89.07%)
Mutual labels:  jquery-plugin, responsive
Imgviewer
jQuery plugin to zoom and pan images, even those with a size that is a percentage of their container
Stars: ✭ 50 (-72.68%)
Mutual labels:  jquery-plugin, responsive
Angular Generic Table
A generic table for Angular 2+. Generic table uses standard markup for tables ie. table, tr and td elements etc. and has support for expanding rows, global search, filters, sorting, pagination, export to CSV, column clicks, custom column rendering, custom export values.
Stars: ✭ 100 (-45.36%)
Mutual labels:  table, responsive

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 [email protected] or twitter for any issue or feature request.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].