Fixed-header-table

Why use this plugin?

FixedHeaderTable in its simplest form displays a fixed header for any valid table mark-up. This is an active jQuery plugin project so expect new features and improvements to be released. Some options include a fixed footer using the tables tfoot element or cloning the thead as a fixed footer. This plugin is meant to be lightweight, easy to use and performant.

How it works.

Using this plugin is very simple. All that is needed is valid table mark-up.

<table>
  <thead>
    <tr>
      <th></th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td></td>
    </tr>
  </tbody>
</table>

Fixed Header Table will do the rest for you. Both fixed width columns and non-fixed width columns are supported. Current browser support includes Internet explorer 6-9, Chrome, Firefox, and Safari.

Theming

Adding an optional themeClass will add the class to the plugin wrapper. This will allow for easy theming for the table.

Demo time!

Docs

Methods

destroy

Remove the fixedHeaderTable functionality completely. This will return the element back to its pre-init state. Code example:

$('selector').fixedHeaderTable('destroy');

hide

Hide the table. Code example:

$('selector').fixedHeaderTable('hide');

show

Show the table. Code example:

$('selector').fixedHeaderTable('show');

Events

create

This event is triggered when .fixedHeaderTable is created. Code example:

$('selector').fixedHeaderTable({
  create: function() { ... }
});

Options

altClass

The specified class name will be added to odd rows (tr) for theming. Code example:

$('selector').fixedHeaderTable({ altClass: 'className' });

autoShow

When autoShow is false the table will be hidden automatically when fixedHeaderTable is called. The table will remain hidden until .fixedHeaderTable('show') is called on it. Code example:

$('selector').fixedHeaderTable({ autoShow: true });

cloneHeadToFoot

When cloneHeadToFoot is true the table header will be cloned and used as the table footer. Code example:

$('selector').fixedHeaderTable({ cloneHeadToFoot: true });

fixedColumn version 1.3 only

When fixedColumn is true the first column will be fixed if the table scrolls horizontally. Code example:

$('selector').fixedHeaderTable({ fixedColumn: true });

footer

When footer is true the TFOOT of the table will be used as a fixed footer. A TFOOT must be included in the table mark-up. Code example:

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

height

When height is set the table thead, tbody, and optional tfoot will be equal to the height value. Height is in pixels. Code example:

$('selector').fixedHeaderTable({ height: 500 });

width

When width is set the table width will be equal to the width value. Width is in pixels. Code example:

$('selector').fixedHeaderTable({ width: 500 });

themeClass

The specified class name will be added to the table for theming. Code example:

$('selector').fixedHeaderTable({ themeClass: 'className' });