Shrinks any large data tables into compact and responsive tables

Overview

jquery.table-shrinker

Awesome Codacy Badge License: GPL v3 Tweet

A Jquery plugin to make HTML Table responsive across all devices, the right way!


table-shrinker

Demo

Click here to see the demo, remember to resize the viewport!

Reasons you should go for it

  • 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)
  • It's simple and fun to use, have fun!

Limitations

  • It does not support irregular headers. (ie: vertical headers)
  • It does not support multiline headers.
  • It does not support colspan attr.

Prerequisites

Jquery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js" crossorigin="anonymous"></script>

Installing

Insert the .css

<link rel="stylesheet" href="jquery.table-shrinker.min.css">

Insert the .js

<script src="jquery.table-shrinker.min.js"></script>

How to use

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     // i don't like zebras
      }

  $("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.

  $("table.shrink").chained().tableShrinker(options)

And finally, add shrink-XX classes to the header to tell them when you want them to be shrinked

<thead>
  <tr>
    <th> User-ID </th> <!-- never shrinks -->
    <th class="shrink-xxs" > First Name </th> <!-- shrinks @ 320px  -->
    <th class="shrink-xs" > Last Name </th> <!-- shrinks @ 480px  -->
    <th class="shrink-sm" > Driver Licence </th> <!-- shrinks @ 768px  -->
    <th class="shrink-md" > Phone number </th> <!-- shrinks @ 992px  -->
    <th class="shrink-lg" > e-mail</th> <!-- shrinks @ 1200px  -->
    <th class="shrink-xl" > Street address </th>  <!-- always shrinks -->
  </tr>
</thead>

Additionally, there's a shrinkable class which make texts containers responsive This is usefull if you like to keep displaying a large info cell in a tiny devices, preventing its texts to breakline.

  <th class="shrinkable"> Full Name </th>

Basically that's it. your table should be shrinked by now.
Below there's the options explanation and some hints of use.


Options

useZebra

default: true

Table rows inside wrapper became striped.

useTransitions

default: true

Animate when collapsing the wrapper.

transitionSpeed

default: 300

name says it all.

ignoreWhenHit

default: "input, button, a, .btn"

If you have a customized radiobutton or selectbox on each row you might want to ignore them too. you can add then to this selector.
so if any tap/click event hit any of these elements it's event propagation is stoped, and they keep their functionality inside the shrinked table container.

showToggle

default: true

You can disable the toggle icon and still show/hide the shrinked content by hiting the anywhere in the row (except for the ignoreWhenHit elements).

customToggle

default: ["<span>˅</span>","<span>˄</span>"]

A list of two html's that alternate when wrapper collapses, you can add classes or change it's content and control the toggle's design using your own css rules.

showToggleAll

default: false

You can enable the toggle all icon and to display an icon in the header row to collapse all rows at once, even if icon is hidden you can still click anywhere in the header to collapse all rows (except for the ignoreWhenHit elements).

customToggleAll

default: ["<span>˅</span>","<span>˄</span>"]

A list of two html's that alternate when all wrapper collapses, you can add classes or change it's content and control the toggle's design using your own css rules.

iconsOnLeft

default: false

loadCollapsed

default: null

If true, forces all shrinked elements to be visible on window first load, else it will look for load-collapsed classes for each table separately.

Quick Tips

Classname Property Controls

You can add "shrink-[property-name]" classes to each individual table to control their behaviour separately, this way you can call the plugin constructor just once. just remember to not override their defaults on options array.

  • shrink-use-zebra

  • shrink-show-toggle-all

  • shrink-show-toggle

  • shrink-load-collapsed

  • shrink-icons-on-left

    For example:

      <table class="shrink shrink-load-collapsed  ">
          (...)
      </table>

Instant Load

The table can be instantly rendered at the first graphic engine loop of the browser by adding the same shrink-XX and shrinkable classes that you used on the table headers to every table cell
For example:

<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" > e-mail </th>
    <th class="shrink-lg" > Phone number </th>
  </tr>
</thead>
<tbody>
  <tr>
    <td> #0001 </td>
    <td class="shrink-xs"> 27 </td>
    <td class="shrink-xs shrinkable" > Hubert Blaine Wolfe­schlegel­stein­hausen­berger­dorff Sr. </td>
    <td class="shrink-md" > [email protected] </td>
    <td class="shrink-lg" > +(66) 666.66666-6666 </td>
  </tr>
  <tr>
  (...)
</tbody>

This way your table first loads directly in it's shrinked state!
There's no impact in performance speed, the only downside of this is that if you have tables that renders 100+ rows in the same page your DOM tree can get very large.

Larger than desktops

If you want to show more data in the same table but even desktops width can't handle, just keep adding columns with shrink-xl

    (...)
    <th class="shrink-xl" > Addtional Info </th>
    <th class="shrink-xl" > Addtional Info </th>
  </tr>
</thead>

Blank Header

You can use a blank header to add a full-width column, perphaps you want to shrink just a single button.. in this case:

<thead>
  <tr>
    <th> User-ID </th>
    <th> Username </th>
    <th class="shrink-xs"> </th> <!-- blank headers -->
  </tr>
</thead>
<tbody>
  <tr>
    <td> #0001 </td>
    <td> Foo </td>
    <td> <!-- this becomes full width when shrinked -->
      <button type='button'> Click me! </button> <!-- you can customize the container of this cell to go full width too in your own css -->
    </td>
  </tr>
</tbody>

Collapsable Nested Tables

To add a collapsable table row you can combine the previous 'XL' hint and the chained() method.

<thead>
  <tr>
    <th> User-ID </th>
    <th> Username </th>
    <th class="shrink-xl"> </th> <!-- shrink-xl / blank headers -->
  </tr>
</thead>
<tbody>
  <tr>
    <td> #0001 </td>
    <td> Foo </td>
    <td>
      <table class="shrink"> <!-- start shrinked / full width table -->
          (...)
      </table>
    </td>
  </tr>
  <tr>
    <td> #0002 </td>
    <td> Bar </td>
    <td>
      <table class="shrink"> <!-- start shrinked / full width table -->
          (...)
      </table>
    </td>
  </tr>
</tbody>
You might also like...

jQuery plugin to export a html table to JSON, XML, CSV, TSV, TXT, SQL, Word, Excel, PNG and PDF

tableExport.jquery.plugin Export HTML Table to CSV DOC JSON PDF PNG SQL TSV TXT XLS (Excel 2000 HTML format) XLSX (Excel 2007 Office Open XML format)

Dec 29, 2022

Largetable - jQuery plugin to scroll in/maximize large tables

largetable jQuery plugin to scroll in/maximize large tables Usage Install with npm: $ npm install largetable Then include largetable files in the HTM

Feb 3, 2021

With monitors getting wider and websites more compact, maximizing the browser is a waste of space.

With monitors getting wider and websites more compact, maximizing the browser is a waste of space.

With monitors getting wider and websites more compact, maximizing the browser is a waste of space. Widefox utilizes all available vertical real estate while adding extra features to your browsing experience!

Dec 18, 2022

A flexible, memory compact, fast and dynamic CSG implementation on top of three-mesh-bvh

A flexible, memory compact, fast and dynamic CSG implementation on top of three-mesh-bvh

three-bvh-csg An experimental, in progress, flexible, memory compact, fast and dynamic CSG implementation on top of three-mesh-bvh. More than 100 time

Jan 5, 2023

Create a schema object to encode/decode your JSON in to a compact byte buffer with no overhead.

Create a schema object to encode/decode your JSON in to a compact byte buffer with no overhead.

schemapack The fastest and smallest JavaScript object serialization library. Efficiently encode your objects in to compact byte buffers and then decod

Nov 26, 2022

Compact library for interacting with Ankr Scan Multichain API.

ankrscan.js Compact SDK for interacting with Ankr Scan MultiChain JSON-RPC API. SDK supports following MultiChain methods: getLogs - logs matching the

Jan 3, 2023

A compact JavaScript animation library with a GUI timeline for fast editing.

Timeline.js A compact JavaScript animation library with a GUI timeline for fast editing. Check it out in this example: http://vorg.github.io/timeline.

Nov 26, 2022

Boost is a Microsoft Excel Add-in to help developers import large excel workbooks into their database using SQL queries

Boost is a Microsoft Excel Add-in to help developers import large excel workbooks into their database using SQL queries

Microsoft Excel Add-in for Developers About Us Boost is a Microsoft Excel Add-in to help developers import large excel workbooks into their database u

Sep 30, 2022

An Obsidian plugin to paste Excel tables as Markdown tables in Obsidian editor.

An Obsidian plugin to paste Excel tables as Markdown tables in Obsidian editor.

Obsidian Excel to Markdown Table An Obsidian plugin to paste Excel tables as Markdown tables in Obsidian editor. Demo You can paste the copied Excel d

Jan 4, 2023

easier than regex string matching patterns for urls and other strings. turn strings into data or data into strings.

url-pattern easier than regex string matching patterns for urls and other strings. turn strings into data or data into strings. This is a great little

Jan 5, 2023

React components for efficiently rendering large lists and tabular data

React components for efficiently rendering large lists and tabular data

React components for efficiently rendering large lists and tabular data. Check out the demo for some examples. Sponsors The following wonderful compan

Jan 7, 2023

React components for efficiently rendering large lists and tabular data

React components for efficiently rendering large lists and tabular data

react-window React components for efficiently rendering large lists and tabular data React window works by only rendering part of a large data set (ju

Jan 4, 2023

A powerful data visualization 2D/3D large-screen editor tool with low-code.

tp-editor(2D/3D)中文说明 A topology 2D/3D editor with nodejs, express, socket.io es6, HT for Web and vite. It's a powerful large-screen data visualization

Dec 25, 2022

AlaSQL.js - JavaScript SQL database for browser and Node.js. Handles both traditional relational tables and nested JSON data (NoSQL). Export, store, and import data from localStorage, IndexedDB, or Excel.

AlaSQL.js - JavaScript SQL database for browser and Node.js. Handles both traditional relational tables and nested JSON data (NoSQL). Export, store, and import data from localStorage, IndexedDB, or Excel.

Please use version 1.x as prior versions has a security flaw if you use user generated data to concat your SQL strings instead of providing them as a

Jan 9, 2023

jQuery plugin to make HTML tables responsive

FooTable V3 This is a complete re-write of the plugin. There is no upgrade path from V2 to V3 at present as the options and the way the code is writte

Dec 19, 2022

Render readable & responsive tables in the terminal

terminal-columns Readable tables for the terminal. Tables can be automatically responsive! Features Content wrapped to fit column width Column widths

Oct 28, 2022

Make Your Company Data Driven. Connect to any data source, easily visualize, dashboard and share your data.

Make Your Company Data Driven. Connect to any data source, easily visualize, dashboard and share your data.

Redash is designed to enable anyone, regardless of the level of technical sophistication, to harness the power of data big and small. SQL users levera

Dec 30, 2022

An open-source boat display cockpit for navigation, speed, heading, and tide tables running on Raspberry Pi and accessible as a webapp through any smartphone.

An open-source boat display cockpit for navigation, speed, heading, and tide tables running on Raspberry Pi and accessible as a webapp through any smartphone.

An open-source boat display cockpit for navigation, speed, heading, and tide tables running on Raspberry Pi and accessible as a webapp through any smartphone

Dec 30, 2022

Convert a simple HTML syntax into tables compatible with Foundation for Emails.

Inky Inky is an HTML-based templating language that converts simple HTML into complex, responsive email-ready HTML. Designed for Foundation for Emails

Dec 22, 2022
Comments
  • Toggle buttons don't show up when last <th> is not shrinkable

    Toggle buttons don't show up when last is not shrinkable

    Hi, there is a bug in the following lines;

     //setup toggle buttons
     if (hId === r.children("td").last().index() && r.children("td:not(:has(table))").length > 0) {
    

    If the parent table looks line this, the toggle button(s) won't show up:

    <table class="shrink">
                <thead>
                    <tr>
                        <th>User-ID </th>
                        <th class="shrink-xs">Age </th>
                        <th >Full Name </th>
                        <th class="shrink-md">Company </th>
                        <!-- cause of bug -->
                        <th>Country </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>#0001 </td>
                        <td>27 </td>
                        <td>Maria Anders </td>
                        <td >Alfreds Futterkiste </td>
                        <td >Germany </td>
                    </tr>
                </tbody>
            </table>
    

    This is due to the fact that the jQuery condition does not check for the total length of the header columns, but only takes those into account that have a certrain shrink-* class set.

    opened by Cle-O 2
Owner
null
A JQuery plugin to create AJAX based CRUD tables.

What is jTable http://www.jtable.org jTable is a jQuery plugin used to create AJAX based CRUD tables without coding HTML or Javascript. It has several

Volosoft 1.1k Dec 21, 2022
Live searching/filtering for HTML tables in a jQuery plugin

jQuery Filter Table Plugin This plugin will add a search filter to tables. When typing in the filter, any rows that do not contain the filter will be

Sunny Walker 175 Oct 29, 2022
jQuery plugin for stacking tables on small screens

stacktable.js The Responsive Tables jQuery plugin for stacking tables on small screens. The purpose of stacktable.js is to give you an easy way of con

John Polacek 1k Nov 30, 2022
An Obsidian plugin to provide an editor for Markdown tables

An Obsidian plugin to provide an editor for Markdown tables. It can open CSV data and data from Microsoft Excel, Google Sheets, Apple Numbers and LibreOffice Calc as Markdown tables from Obsidian Markdown editor.

Ganessh Kumar 112 Dec 31, 2022
Fixed . Doesn't need any custom css/html. Does what position:sticky can't

jquery.floatThead Documentation & Examples: http://mkoryak.github.io/floatThead/ Float the table header on scroll. No changes to your HTML/CSS are req

Misha Koryak 1.2k Dec 6, 2022
JavaScript data grid with a spreadsheet look & feel. Works for React, Angular, and Vue. Supported by the Handsontable team ⚡

Handsontable is a JavaScript component that combines data grid features with spreadsheet-like UX. It provides data binding, data validation, filtering

Handsontable 17.4k Dec 28, 2022
A simple, modern and interactive datatable library for the web

Frappe DataTable A modern datatable library for the web Introduction Frappe DataTable is a simple, modern and interactive datatable library for displa

Frappe 836 Dec 24, 2022
Luckysheet is an online spreadsheet like excel that is powerful, simple to configure, and completely open source.

English| 简体中文 Introduction ?? Luckysheet is an online spreadsheet like excel that is powerful, simple to configure, and completely open source. Links

mengshukeji 12.7k Dec 31, 2022
Nice, sleek and intuitive. A grid control especially designed for bootstrap.

jQuery Bootgrid Plugin Nice, sleek and intuitive. A grid control especially designed for bootstrap. Getting Started jQuery Bootgrid is a UI component

Rafael Staib 976 Dec 16, 2022
A stupidly small and simple jQuery table sorter plugin

Stupid jQuery Table Sort This is a stupid jQuery table sorting plugin. Nothing fancy, nothing really impressive. Overall, stupidly simple. Requires jQ

Joseph McCullough 708 Dec 26, 2022