Licensed under the Apache Software License 2.0

This component may be obtained, modified and distributed free of charge for personal as well as commercial use. Please see the license for the complete terms and exact wording.

2004-10-28: First public version released.
2004-11-23: Fixed column resizing in mozilla. It still can't make columns smaller than their content, but otherwise it seems to work. 2005-05-22: Fixed a bug in the removeRange method for index based removal, where the rows where deleted in the wrong order. Also added a clear method, that removes all rows.
2005-12-08: Fixed bug that caused rows to be colored even if colorEvenRows was false. Added rowSelection, columnSorting, moveColumns, sortAscImage and sortDescImage properties. Implemented column moving and alignment. Updated column resizing implementation. Added support for making columns smaller than their content in Mozilla, bringing the Mozilla support up to pair with that for IE. Added support for specifying column width on create.
2006-03-14: Fixed bug in getVellValue method, implemented this.moveColumns property and fixed an alignment bug.
2006-05-26: Changed license to Apache Software License 2.0.

Introduction

Since Erik wrote the Sortable Table article a year and a half ago we've received quite a few questions about how to combine it with the fixed header example, demonstrated in the Synchronized Scroll article, thus creating a sortable table with a fixed header. However it's not that easy to combine those and the result has often been a disappointment.

This ColumnList widget tries to overcome this, it uses the Sortable Table script to perform the sorting and has a table with a fixed header. It also adds a few extras; such as a clean object oriented interface, column resizing and, row coloring, to name a few.

Attach or Generate

The widget can either attach to a set of existing html elements or create the necessary elements on-the-fly from a javascript data structure. Both methods has its advantages, it's more efficient to attach to an existing structure than to generate it, but on-the-fly creation allows for mor flexibility. Either way the content can be accessed and modified in the same way regardless of how the widget was created.

Multiple Selection

There's also an option to allow multiple selection which, if enabled, makes it possible to select more than one row using the control or shift keys. Other keyboard bindings, such as the up and down arrow keys, are supported as well.

Introduction
Implementation
Usage
API
Demo
Download

Author: Emil A Eklund