Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://github.com/VagnerDomingues/jquery.table-shrinker below:

VagnerDomingues/jquery.table-shrinker: Shrinks any large data tables into compact and responsive tables

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

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

• 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!

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

Jquery

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

Insert the .css

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

Insert the .js

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

First, add shrink class to the table you want to be shrinked

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.

default: true

Table rows inside wrapper became striped.

default: true

Animate when collapsing the wrapper.

default: 300

name says it all.

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.

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).

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.

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).

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.

default: false

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.

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>

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" > H_B@wolfe.com </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.

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>

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>

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>

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4