Basic Responsive Table Plugin For jQuery - Basic Table

Basic Responsive Table Plugin For jQuery - Basic Table
File Size: 11.2 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Basic Table is an ultra-light jQuery plugin to create responsive, mobile-readable data tables using JS resize() method and CSS3 media queries.

See also:

How to use it:

1. Include the required jQuery basic table plugin's stylesheet in the head section of your web page.

<link rel="stylesheet" href="basictable.css">

2. Include the jQuery basic table plugin's script after you've installed jQuery library.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.basictable.min.js"></script>

3. Create a standard table on your web page.

<table id="table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jill Smith</td>
      <td>25</td>
    </tr>
  </tbody>
</table>

4. The basic implementation using all default settings. Use breakpoint option to custom the viewport's width when the table will engage in responsive mode.

$('#table').basictable({breakpoint: 641});

5. Use CSS3 media queries instead of breakpoint option.

@media only screen and (max-width: 568px) {
  #table thead {
      display: none;
  }

  #table tbody td {
      border: none !important;
      display: block;
      vertical-align: top;
  }

  #table tbody td:before {
      content: attr(data-th) ": ";
      display: inline-block;
      font-weight: bold;
      width: 6.5em;
  }

  #table tbody td.bt-hide {
      display: none;
  }
}

6. All the default settings.

  • breakpoint: 568: Custom breakpoint
  • contentWrap: true: Wraps the original content within the cell in a span with class .bt-content, to help with CSS selection.
  • forceResponsive: true: The library will always force the table into responsive mode once the breakpoint is met. If this is set to false the table will only change mode when the table itself is larger than its immediate parent's inner width.
  • noResize: false: Disable Basic Table's JS resize. The table won't engage in responsive mode unless media query or another resize bind outside of Basic Table is defined.
  • tableWrap: false: When the library is initialize create a div wrapper around the table with class .bt-wrapper. This wrapper will toggle an active class when the table mode changes.
  • showEmptyCells: false:When true, empty cells will be shown.

7. Available methods.

$('table').basictable('start');
$('table').basictable('stop');
$('table').basictable('destroy');

Change log:

2016-12-09

  • JS clean up

2016-07-20

  • Fix tables in IE9
  • Long text support

2016-03-27

  • Add an option to show empty cells.

2016-03-25

  • Fixed Multiple table selection

2016-01-31

  • Added multiple heading row support with colspan heading. Also better tfoot support

2016-01-06

  • Added support for tfoot and duplicated bt-content wrappers

2015-12-21

  • Fixed missing second parameter

This awesome jQuery plugin is developed by jerrylow. For more Advanced Usages, please check the demo page or visit the official website.