Make HTML Table Responsive Across All Devices - jQuery table-shrinker

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.