According to Cordell

Large HTML tables with fixed first column and header

By
on

Recently I wanted to create a large text heavy table (cells had large blocks of text in them) in HTML. Furthermore, I wanted an Excel-like “split” on the first column and row. I realized that this could probably not be solved in pure CSS and would likely require a Javascript solution. After much hunting I found the optimal solution in a JQuery add on called datatables. Datatables is a robust product that could be very handy in many web-app scenarios, where a database is backing your datables. However, my particular problem was static, without a database behind it.

Here is the process I followed to get the stated goal:

  1. Download the latest datatables from here and place them in your site root.
  2. I deleted all of the extraneous examples included in the package, this is probably wise.
  3. Additionally you will need the FixedHeader plugin for datatables to achieve the split effect. Alternatively, if you are just freezing the first column you could download the FixedColumn plugin. FH satisfies both, so I found it to be the better option.
  4. Attach Jquery to your large-tabled webpage. You could use the latest version or the one included with datatables.
  5. Attach the datatables and FixedHeader scripts relatively to where you downloaded them in your site root. 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="datatables/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="datatables/js/FixedHeader.js"></script>

Next, add the following javascript to get the FixedHeader effect working with your table. 

$(document).ready( function () {
	var oTable = $('#example').dataTable( {
		"iDisplayLength": -1,
		"bFilter": false,
		"bInfo": false,
		"bPaginate": false,
		"bLengthChange": false,
		"aoColumns": [
			{"bSortable": false, "sWidth": "20px", "sHeight": "600px" },
			null, null, null,null,null,null,null,null,null,null,null,null,null,
			{"bSortable": false, "sWidth": "20px" }
		]
	} );
	new FixedHeader( oTable, { "left": true,} );
} );

A few key points here. “#example” is the id of your table. The “aoColumns” sets properties of specific columns. If you are modifying individual columns, all columns have to have an entry. So make sure that if you want to leave it as default, you change it to null. If you do not have an entry for each column here, your table will break and degrade to standard HTML (frustrating). The final line that defines new FixedHeader is where you set what column and rows are fixed. You can set all four, but in this example only the left is frozen (“left”: true).

After this point, it is just a matter of formatting your HTML and styling CSS to taste.