Responsive HTML tables on all devices with jQuery table-shrinker

DirectCode | February 13, 2020 | CSS, General, HTML5, JavaScript, jQuery, Plugins, Responsive, Tables | No Comments

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