Responsive HTML tables on all devices with jQuery table-shrinker
Table-shrinker is a jQuery plugin, that makes responsive html tables. Wide/large HTML tables fully responsive across all devices/platforms!
Make responsive HTML tables across browsers and devices
The table-shrinker plugin automatically shrinks specified table cells into a toggleable panel on small screens so that your users are able to show/hide the table cells when needed.
How to use it:
1. Add responsive breakpoints to table cell using the following CSS classes:
– shrink-xs: 480px
– shrink-sm: 768px
– shrink-md: 992px
– shrink-lg: 1200px
– shrink-xl: wider than 1200px
– shrinkable: makes text responsive
Pros:
– It has highly customizable page-breaks
– It Won’t break your table’s primordial design, it uses css only to re-structure table for mobile
– It’s Designed to attend fat-fingers concept to prevent missclicking, you can tap anywhere in the row and it will trigger the collapser
– You can maintain all previous functions working anywhere inside the elements of the table. (ie: a dropdown in table headers)
– It’s free, it’s fast and it’s lightweight
– I think it’s unique… I couldn’t find another plugin in the web which support nested tables. (ie: tables within tables)
Limitations:
– It does not support irregular headers. (ie: vertical headers)
– It does not support multiline headers
– It does not support colspan attr
Sample
First, add shrink class to the table you want to be shrinked
<table class="shrink">
Next, start the plugin right after the DOM finished rendering
options = {
useZebra: false
}
$("table.shrink").tableShrinker(options);
If you need a table that will have another table inside it and both will use the tableShrinker to shrink their contents, you should call chained() method before the initializer.
License: GPL-3.0
GitHub
https://github.com/VagnerDomingues/jquery.table-shrinker
See also
Responsive table header and columns freezing – jquery-freeze-table
A nice and intuitive Bootstrap grid control – jQuery bootgrid
jQuery table filter with multiple criteria – multifilter
A nice, editable jQuery table plugin with Bootstrap
JavaScript Excel tables library
Enjoy responsive HTML tables solution.
