Fullpage demo

 $('#0').fixheadertable({
    caption     : 'My employees (200)', 
    colratio    : [100, 150, 150, 150, 220, 150], 
    height      : 300, 
    width       : 960, 
    zebra       : true, 
    sortable    : true,
    sortedColId : 1, 
    resizeCol   : true,
    pager       : true,
    rowsPerPage : 10,
    sortType    : ['integer', 'string', 'string', 'string', 'string', 'date'],
    dateFormat  : 'm/d/Y'
});
		

Load this example

/**
 * This is a basic use of the plugin. Just set the height option to 
 * have a fixed header table. You can also apply the zebra option which alternate
 * the row style (you can change the applied class with the zebraClass option)
 */
  
$('#1').fixheadertable({ 
    height     : 200, 
    zebra      : true,
    zebraClass : 'ui-state-active' // default
});
		

Load this example

/**
 * This is a basic use too with the caption option.
 * Note that natively, there will have a toggle arrow which allow you
 * to show/hide your table. To disable it, set the showhide option to false.
 */

$('#2').fixheadertable({ 
    caption  : 'My employees', 
    showhide : true, // default
    height   : 200, 
    width    : 960
});
		

Load this example

/**
 * By default, the table and the columns will resize according to his parent's width. 
 * So if the container is not large enough, the column's overflow will be clipped.
 * But through the minWidth option, you can set the minimum width before horizontal scrolling.
 * You also have the minWidthAuto option, which let the plugin calculate a min-width automatically.
 */
 
$('#3').fixheadertable({ 
    caption  : 'My employees', 
    height   : 200, 
    width    : 960, 
    minWidth : 1000
});
		

Load this example

/**
 * The colratio option allow you to set an exact width in pixel for each column. To be available,
 * you need to fill the array with as much values as there are columns, else it won't work.
 * (ex : 6 columns => 6 values) ;-)
 * Note that each value means 'the width in pixel'
 *
 * Thanks to the resizeCol option, you can resize manually the columns. This option works ONLY if
 * the colratio option is set and valid! you can set a min-width with the minColWidth option.
 */
 
$('#4').fixheadertable({ 
    caption     : 'My employees', 
    colratio    : [50, 150, 150, 150, 220, 150], 
    height      : 200, 
    width       : 960, 
    zebra       : true,
    resizeCol   : true,
    minColWidth : 50 
});
		

Load this example

/**
 * The sortable option allow you to sort your columns. If the option is set, all the columns
 * will be sortable. By default, the sort callback is 'string' but through the sortType option you
 * can specify the type of sort. 
 * To be available, you need to fill the array with as much values as there are columns, else it won't work.
 *
 * Availables sort callbacks :
 * - 'string'  (default) 
 * - 'float'
 * - 'integer'
 * - 'date'    (use with the dateFormat option : default 'd-m-y')
 *
 * The sortedColId option allow you to sort the column by default (specify the id of the column)
 */
 
$('#5').fixheadertable({ 
   caption     : 'My employees', 
   colratio    : [50, 150, 150, 150, 220, 150], 
   height      : 200, 
   width       : 960, 
   zebra       : true, 
   sortable    : true,
   sortedColId : 0, 
   sortType    : ['integer', 'string', 'string', 'string', 'string', 'date'],
   dateFormat  : 'm/d/Y'
});
		

Load this example

/**
 * The pager option allow you the reduce the set of visible rows. More rows and columns
 * you have, more the sort will be long for example. But not with the pager.
 * Yo can also use the linked option rowsPerPage wich allow you to change the range (10, 25, 50 or 100).
 * 
 * Use the navigation arrows to navigate through your table.
 */
 
$('#6').fixheadertable({ 
    caption     : 'My employees', 
    colratio    : [50, 150, 150, 150, 220, 150],
    height      : 200,
    width       : 960,
    zebra       : true,
    sortable    : true,
    sortedColId : 2, 
    sortType    : ['integer', 'string', 'string', 'string', 'string', 'date'],
    dateFormat  : 'm/d/Y',
    pager       : true,
    rowsPerPage : 10
});
		

Load this example

/**
 * This example takes back all the options viewed before.
 */

$('#7').fixheadertable({ 
    caption     : 'My employees', 
    colratio    : [50, 150, 150, 150, 220, 150],
    height      : 200,
    width       : 960,
    zebra       : true,
    sortable    : true,
    sortedColId : 3, 
    sortType    : ['integer', 'string', 'string', 'string', 'string', 'date'],
    dateFormat  : 'm/d/Y',
    pager       : true,
    rowsPerPage : 10,
    resizeCol	: true
});