To use the ColumnList widget the columnlist.js, sortabletable.js and columnlist.css files needs to be included and two images used to indicate sorting direction asc.png and desc.png should be placed in a the same directory (if their located elsewhere change the IMG_DESC and IMG_ASC settings at the top of the columnlist.js file).

<link type="text/css" rel="stylesheet" href="columnlist.css" />
<script type="text/javascript" src="sortabletable.js"></script>
<script type="text/javascript" src="columnlist.js"></script>

As mentioned in the introduction the columnlist can be created in two different ways, either by attaching to an existing structure or by generating it. Let's begin with the later of the two.

Generating a new structure

The first step is to create an instance of the WebFXColumnList class using the default constructor o = new WebFXColumnList(). Then the create method is called, with the target element and an array with column labels as the arguments. This will create a new, emtpy, column list widget out of the container element. Once it's created rows can be added using the addRow method (or addRows to add multiple rows at once).


The base of the column list is the container element and it has to be an existing element. The size of this element controls the size of the widget.

<div id="container" style="width: 320px; height: 240px;">


The following JavaScript code will create a ColumnList widget with the 15 most popular kinds of ice cream (according to the International Ice Cream Association).

var aColumns = [

var aData = [
	['3','Butter pecan','Light brown','5.3%'],
	['5','Neapolitan','Greenish brown','4.2%'],
	['6','Chocolate chip','Brown','3.9%'],
	['7','French vanilla','Yellowish white','3.8%'],
	['8','Cookies and cream','Light brown','3.6%'],
	['9','Vanilla fudge ripple','White', '2.6%'],
	['10','Praline pecan','Brown','1.7%'],
	['12','Chocolate almond','Brown','1.6%'],
	['13','Coffee','Dark brown', '1.6%'],
	['14','Rocky road','brown', '1.5%'],
	['15','Chocolate marshmallow','Light brown','1.3%']

var el = document.getElementById('container');

var o = new WebFXColumnList();
o.create(el, aColumns);


Attaching to existing structure

The other method that can be used to create a column list widget is to attach it to an existing structure. This method is preferred if the content is being generated by a server side script of some sort as it's quite a lot faster for larger amounts of date. The major drawbacks are that it's not as convenient and requires more markup.

The idea here is to manually create the structure that would be generated by the create method (described above) and then simply attach the widget to it.

The main difference here is that the content (header columns and data) is defined using HTML rather than JavaScript. Thus there's a lot of HTML markup but very little JavaScript, quite the opposite of the create method.


<div id="container" class="webfx-columnlist" style="margin-left: 50px; width: 640px; height: 480px;">
<div id="head" class="webfx-columnlist-head">
	<table cellspacing="0" cellpadding="0">
			<td>Flavor<img src="images/asc.png"/></td>
			<td>Color<img src="images/asc.png"/></td>
			<td>Texture<img src="images/asc.png"/></td>
			<td>Price<img src="images/asc.png"/></td>
<div id="body" class="webfx-columnlist-body">
	<table cellspacing="0" cellpadding="0">
		<colgroup span="4">
			<col style="width: auto;" />
			<col style="width: auto;" />
			<col style="width: auto;" />
			<col style="width: auto;" />
		<tr><td>Vanilla</td><td>White</td><td>Smooth</td><td>$ 10</td></tr>
		<tr><td>Pear</td><td>Green</td><td>Smooth</td><td>$ 8</td></tr>
		<tr><td>Strawberry</td><td>Pink</td><td>Smooth</td><td>$ 8</td></tr>
		<tr><td>Chocolate</td><td>Brown</td><td>Chunky</td><td>$ 8</td></tr>
		<tr><td>Pistachio</td><td>Light green</td><td>Chunky</td><td>$ 9</td></tr>


var o = new WebFXColumnList();
var rc = o.bind(document.getElementById('container'), document.getElementById('head'), document.getElementById('body'));


The example code above is actually a shortened version of the demo linked below. Please see that demo for the full source and the result.


Author: Emil A Eklund