micc83 / restable Goto Github PK
View Code? Open in Web Editor NEW๐ jQuery plugin that makes tables responsive converting them to HTML lists on small viewports.
Home Page: https://micc83.github.io/ReStable/
๐ jQuery plugin that makes tables responsive converting them to HTML lists on small viewports.
Home Page: https://micc83.github.io/ReStable/
In most cases we would want to get all links and form elements cascaded into table cells.
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> </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"> </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"> </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"> </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
Hi Alessandro,
Great work! Different approach than https://github.com/bradvin/FooTable.
It would be awesome if you could make it work with Bower (http://bower.io/#defining-a-package).
Cheers
In table in column i have just images. When i applied ReStable-plugin this images are absent in lists.
</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 |
|
Fantasy Violence | None | Sega |
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.
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):
Cheers
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.