Create Tables With Fixed Headers, Footers, And Columns - jQuery Fixedheadertable.js

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

With this plugin, you have the ability to scroll through the contents of the table, but always be able to see the header on the top (footer on the bottom, specified column on the left).

See Also:

• 10 best JavaScript Plugins For Sticky table Header
• 10 Best Responsive Table Plugins In JavaScript And CSS

How to use it:

1. Load the jquery.fixedheadertable.js script after you have jQuery library installed properly.

<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 table must have thead and tfoot elements.

<table class="example">
  <thead>
    <tr>
      ...
    </tr>
  </thead>
  <tfoot>
    <tr>
      ...
    </tr>
  </tfoot>
  <tbody>
    <tr>
      ...
    </tr>
  </tbody>
</table>

3. Call the function on the HTML table.

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

4. Or clone the table header to the footer if your table has no tfoot element.

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

5. Stick a specified number of columns to the left of the table.

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

6. Determine whether to hide the HTML table until the plugin is initialized. Default: true.

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

7. The plugin also provides several options to style the HTML table.

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

---

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