
table-shrinker is a jQuery based responsive table solution which makes wide/large HTML tables fully responsive across all devices/platforms. Licensed under the GPL-3.0.
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.
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
<table class="table"> <thead> <tr> <th> User-ID </th> <!-- never shrinks --> <th class="shrink-xs"> Age </th> <th class="shrink-xs shrinkable" > Full Name </th> <th class="shrink-md" > Company </th> <th class="shrink-lg" > Contry </th> </tr> </thead> <tbody> <tr> <td> #0001 </td> <td class="shrink-xs"> 27 </td> <td class="shrink-xs shrinkable" > Maria Anders </td> <td class="shrink-md" > Alfreds Futterkiste </td> <td class="shrink-lg" > Germany </td> </tr> <tr> <td> #0002 </td> <td class="shrink-xs"> 33 </td> <td class="shrink-xs shrinkable" > Francisco Chang </td> <td class="shrink-md" > Centro comercial Moctezuma </td> <td class="shrink-lg" > Canada </td> </tr> ... </tbody> </table>
2. Load jQuery library and the jQuery table-shrinker plugin at the end of the document.
<link href="jquery.table-shrinker.css" rel="stylesheet"> <script src="/path/to/jquery.min.js"></script> <script src="jquery.table-shrinker.js"></script>
3. Call the function on the HTML table and done.
$(function(){ $("table").tableShrinker() });
4. Make the HTML table zebra striped. Default: true.
$("table").tableShrinker({ useZebra: false })
5. Use Intersection Observer API to update the zerba striped rows & columns. Default: true.
$("table").tableShrinker({ useObserver: false })
6. Enable/disable smooth transitions when toggling the table.
$("table").tableShrinker({ useTransitions: true, transitionSpeed: 300 })
7. Enable/disable the toggle button.
$("table").tableShrinker({ showToggler: true, customToggler: ['<span>+</span>','<span>-</span>'] })
8. Ignore specific elements.
$("table").tableShrinker({ ignoreWhenHit: 'button, a, .btn' })
This awesome jQuery plugin is developed by VagnerDomingues. For more Advanced Usages, please check the demo page or visit the official website.
- Publication date: 04.04.2019
- Source