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.

See it in action!

Options

Interactive demo: Select options below then build table.

ONOFF
ONOFF
ONOFF
Build Table 

$('selector').fixedHeaderTable({ footer: true, cloneHeadToFoot: true, fixedColumn: false });

Table

Documentation

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' });