Create Tables With Fastened Headers, Footers, And Columns – jQuery Fixedheadertable.js

A tiny jQuery plugin developed to create HTML tables with mounted headers, footers, and columns.

With this plugin, you could have the power to scroll by the contents of the desk, however all the time have the ability to see the header on the highest (footer on the underside, specified column on the left).

See Additionally:

The best way to use it:

1. Load the jquery.fixedheadertable.js script after you could have jQuery library put in correctly.

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.fixedheadertable.js"></script>

2. To freeze the header and footer, your HTML desk will need to have thead and tfoot parts.

<desk class="instance">
  <thead>
    <tr>
      ...
    </tr>
  </thead>
  <tfoot>
    <tr>
      ...
    </tr>
  </tfoot>
  <tbody>
    <tr>
      ...
    </tr>
  </tbody>
</desk>

3. Name the operate on the HTML desk.

$('.instance').fixedHeaderTable({
  footer: true,
});

4. Or clone the desk header to the footer in case your desk has no tfoot ingredient.

$('.instance').fixedHeaderTable({
  footer: true,
  cloneHeadToFoot: true,
});

5. Stick a specified variety of columns to the left of the desk.

$('.instance').fixedHeaderTable({
  fixedColumns: 2
});

6. Decide whether or not to cover the HTML desk till the plugin is initialized. Default: true.

$('.instance').fixedHeaderTable({
  autoShow: false,
});

7. The plugin additionally gives a number of choices to fashion the HTML desk.

$('.instance').fixedHeaderTable({
  altClass: 'altClass',
  themeClass: 'wrapperClass',
  width: '100%',
  peak: '100%',
  borderCollapse: true,
});

This superior jQuery plugin is developed by markmalek. For extra Superior Usages, please test the demo web page or go to the official web site.