Fixed Table Header

• Overview
• Examples
  • Simple Scrollable Table
  • Scrollable and Sorttable
  • Fixed Header and Column
• Usage
• Download
  • Download as .tar
  • Download as .zip
• License
• Feedback/Comments
• FAQ

Overview

fixedTableRC is a jQuery plug-in for converting a well formatted HTML table to a scrollable table with fixed table header and columns. This is a light weight plugin for rendering HTML table to an scrollable table the fixed header and configurable number of fixed columns. It is stil under development and in beta stage, for more details read Known Issue section below.

The original idea is from question on SO Large Dynamic Table with Fixed Rows and Fixed Columns. The first version of Fixed Table RC was neat but it had some limitations such as nested div structures, breaks on well formatted table and the hanging scrollbars.

This new version has lot of bug fixes, better browser compatibilty, performance improvements, code optimization, sorttable table, new colModal options and more options to come.

What is a scrollable table?

A scrollable table is nothing but a simple HTML table with scrollbars. We can create a scrollable table by placing the html table inside a div (see below table) and style the div with fixed height say height: 300px and overflow:auto. Now The table content is intact and We can use scroller to view the entire table.

The issue with the scrollable table is that when you scroll vertically, the header would scroll top hiding from the view and when scrolling horizontally, the columns in left would scroll left hiding from the view.

The goal of fixedTableRC plugin is to create a scrollable table with fixed header and fixed columns while scrolling horizontally and vertically.

Examples

$('#fixed_hdr3').fxdHdrCol({
	fixedCols:  0,
	width:     "100%",
	height:    200,
	colModal: [{width: 30, align: 'center'},
			   {width: 70, align: 'center'}, 
			   {width: 200, align: 'left'}, 
			   {width: 100, align: 'center'}, 
			   {width: 70, align: 'center'}, 
			   {width: 250, align: 'center'}
			  ]
});

$('#fixed_hdr2').fxdHdrCol({
	fixedCols:  0,
	width:     "100%",
	height:    400,
	colModal: [
		   { width: 50, align: 'center' },
		   { width: 110, align: 'center' },
		   { width: 170, align: 'left' },
		   { width: 250, align: 'left' },
		   { width: 100, align: 'left' },
		   { width: 70, align: 'left' },
		   { width: 100, align: 'left' },
		   { width: 100, align: 'center' },
		   { width: 90, align: 'left' },
		   { width: 400, align: 'left' }
	],
	sort: true
});

$('#fixed_hdr1').fxdHdrCol({
	fixedCols: 3,
	width:     "100%",
	height:    400,
	colModal: [
	   { width: 50, align: 'center' },
	   { width: 110, align: 'center' },
	   { width: 170, align: 'left' },
	   { width: 250, align: 'left' },
	   { width: 100, align: 'left' },
	   { width: 70, align: 'left' },
	   { width: 100, align: 'left' },
	   { width: 100, align: 'center' },
	   { width: 90, align: 'left' },
	   { width: 400, align: 'left' }
	]					
});

Usage

To use the function, include jQuery library and fixedTableRC plugin.

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/meetselva/fixed-table-rows-cols/master/fixed_table_rc.js"></script>

Include sorttable plugin to enable sort feature on fixed table header plugin,

<script type="text/javascript" src="https://raw.github.com/meetselva/fixed-table-rows-cols/gh-pages/js/sortable_table.js"></script>

Include the css for fixed table header column plugin,

<link rel="stylesheet" type="text/css" href="fixed_table_rc.css" />

Now use the plugin like below,

<script type="text/javascript">
   $(document).ready(function() {
	$('#fixed_hdr2').fxdHdrCol({
		fixedCols:  0,
		width:     "100%",
		height:    400,
		colModal: [
			   { width: 50, align: 'center' },
			   { width: 110, align: 'center' },
			   { width: 170, align: 'left' },
			   { width: 250, align: 'left' },
			   { width: 100, align: 'left' },
			   { width: 70, align: 'left' },
			   { width: 100, align: 'left' },
			   { width: 100, align: 'center' },
			   { width: 90, align: 'left' },
			   { width: 400, align: 'left' }
		],
		sort: true
	});
   });
</script>

License

You may use this plugin under the terms of the MIT License. License Terms (Read More)

Feedback / Comments

This plugin is maintained in Github. Feedback/Comments