Customizing TableKit to stripe column groups

I’m a big fan of TableKit, a JavaScript library (based on Prototype) that provides client-side sorting, row striping, column resizing, and more. (Check out their demo to see more.) There’s one feature I needed on a recent project that was missing: the ability to stripe column groups (defined with the colgroup tag) with alternating background colors (as you would stripe rows of alternating colors). It was easy to add this functionality to TableKit by adding the following JavaScript code to the TableKit library.

TableKit.ColGroups = {
	stripe : function(table) {
		var colgroups = table.getElementsBySelector('colgroup');
		colgroups.each(function(cg,i) {
			TableKit.ColGroups.addStripeClass(table,cg,i);
		});
	},
	addStripeClass : function(t,cg,i) {
		t = t || cg.up('table');
		var op = TableKit.option('colgroupEvenClass colgroupOddClass', t.id);
		$(cg).removeClassName(op[0]).removeClassName(op[1]).addClassName(
			((i+1)%2 === 0 ? op[0] : op[1]));
	},
	hide : function(colgroup) {
		Element.setStyle(colgroup,{visibility:'collapse'});
	}
};

The code above expects two new TableKit options, named colgroupEvenClass and colgroupOddClass. To add those as available options to TableKit, find the section of code below and add the two lines named colgroupEvenClass and colgroupOddClass.

	...
	options : {
		autoLoad : true,
		stripe : true,
		sortable : true,
		resizable : true,
		editable : true,
		rowEvenClass : 'roweven',
		rowOddClass : 'rowodd',
		sortableSelector : ['table.sortable'],
		columnClass : 'sortcol',
		descendingClass : 'sortdesc',
		ascendingClass : 'sortasc',
		noSortClass : 'nosort',
		sortFirstAscendingClass : 'sortfirstasc',
		sortFirstDecendingClass : 'sortfirstdesc',
		resizableSelector : ['table.resizable'],
		minWidth : 10,
		showHandle : true,
		resizeOnHandleClass : 'resize-handle-active',
		editableSelector : ['table.editable'],
		formClassName : 'editable-cell-form',
		noEditClass : 'noedit',
		editAjaxURI : '/',
		editAjaxOptions : {},
		colgroupEvenClass : 'colgroupeven',
		colgroupOddClass : 'colgroupodd'
	},
	...

With that, you can now stripe your column groups by doing the following. The example below assumes a table whose id is mytable.

TableKit.ColGroups.stripe($('mytable'));

That command will apply two classes to your colgroup tags — by default, colgroupEven and colgroupOdd. Most modern browsers will pass down the background color for a colgroup to its table cells, "striping" your column groups.

One thought on “Customizing TableKit to stripe column groups”

  • Hello,

    I need this exact feature you added.

    I tried add the new lines of code, but I wasn’t able to stripe the columns.

    I get [] when I try

    var colgroups = table.getElementsBySelector(‘colgroup’);
    console.log(colgroups);

    Do I need to add colgroup to the TDs so that it gets collected in the call above?

    Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>