Make HTML Table Responsive Across All Devices - jQuery table-shrinker
File Size: | 20.2 KB |
---|---|
Views Total: | 6889 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.
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
<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. Enable/disable smooth transitions when toggling the table.
$("table").tableShrinker({ useTransitions: true, transitionSpeed: 300 })
6. Enable/disable toggle buttons.
$("table").tableShrinker({ customToggle: ["<span>˅</span>","<span>˄</span>"], customToggleAll: ["<span>˅</span>","<span>˄</span>"], showToggle: false, showToggleAll: false, iconsOnLeft: false })
7. Ignore specific elements.
$("table").tableShrinker({ ignoreWhenHit: 'button, a, .btn' })
8. Force all shrinked elements to be visible on first load.
$("table").tableShrinker({ loadCollapsed: true })
Changelog:
2020-03-04
- Fix toggle button if last column is not shrinked
2019-07-31
- Add support for left side toggle icon
2019-07-25
- Added more options.
2019-06-29
- Add support for chained tables
2019-04-24
- Fix for multiple instance
This awesome jQuery plugin is developed by VagnerDomingues. For more Advanced Usages, please check the demo page or visit the official website.