Table

This widget extends a standard HTML table. You could add a sorting functionality, add a pager functionality, hide cols and rows — pretty cool when a user has to handle huge tables.

Update
I blogged about jQuery UI sortable Tables (German language).

Demo

The functional demo demonstrates what is possible using this widget: some lines of jQuery implement a panel to control the columns or a very simple search. Both examples are not part of the widget itself and have no accessibility features, but could be interesting if you wish to extend the widget yourself (located in a separate js file called demo.js).
Take a look at the performance demo if you are concerned about speed issues. While developing performance and stability was permanently tested, but keep in mind that we have to run trough every table cell. However, really big tables (10.000+) should be initialized by adding data with a JSON file (please provide a dummy table) or by extending the widget with a loading screen.

• Table Demo: Functionality
• Table Demo: Performance
• Table Demo: Multiple

Functionality features

• sort data by number, date, text alphabetically
• high performance: handle even large tables
• hide columns and rows
• pager functionality
• Standard jQuery widget methods: disable, enable, destroy

Minified file size is less than 10 KB.

Accessibility features

• keyboard support (arrow keys or native tabular index, Home, End, Space)
• ARIA Live-Regions
• ARIA and HTML table relations

Documentation

Structure of a table used with the widget:

<table summary="Summery text">
	<caption>Some caption</caption>
	<thead>
		<tr>
			<th><a href="#server_site_order">Head</a></th>
			.
			.
			.
		</tr>
	</thead>
	<tbody>  
		<tr>
			<td>cotent</td>
			.
			.
			.
		</tr>
		.
		.
		.
	</tbody>  
</table>

As the head elements (th) are not deleted, you could define sorting methods or CSS styles as you wish — even after initialization. It’s possible to set server site sorting, if Java-Script is disabled or a complex sorting is needed, by defining hyperlinks (recommended).

Sorting methods

Control the used sorting method by adding a CSS class to each head element (th):

CSS class	example data
ui-table-number	123 or 123.456
ui-table-number-de	123,456
ui-table-date	07/28/2009
ui-table-date-de	28.07.2009
ui-table-date-iso	2009-07-28
ui-table-deactivate	deactivates sorting for this column
ui-state-active	class to set a column as presorted (server site)

Default sorting method is text alphabetically (also sorts time: 20:00:13).

Options

The widget works (with small tables) out-of-the-box but there are a few more options to configure the widget:

Option	Type	Default	Description
rowToStart	number	1	row to start (starts with 1)
rowsToShow	number	false	how many rows shown (starts with 1, false = show all)
colScopeRow	number	1	defines row head (specify a col, starts with 0)
defaultSortBy	string	asc	first sort ascending or descending (asc or desc)
colsToHide	array	false	Array of columns hide (starts with index 0)
rowsToHide	array	false	Array of rows to hide (starts with index 0)
keyboard	boolean	true	set keyboard control active
pager	boolean	false	set pager functionality
textPager	string	Page:	title string
textAsc	string	Sort	ascending
textDesc	string	Sort	descending
disabled	boolean	false	disable widget

Callbacks

The event onRowSort calls the function setHTML, but its callback is fired before.

• onInit
• onUpdateData
• onSetHTML
• onRowSort

Methods

Method	Description
updateData	build new working array (which holds only not hided data)
setHTML	build and inject new tbody
rowSort	sort data and call setHTML
colSwitch	switches column (parameter: number); used by keyboard control)
buildPager	build and inject pager
setPager	set specific page as active (parameter: index)
disable
enable
disable
destroy

This text is licensed under a Creative Commons Attribution-Share Alike 3.0 Unported Licence.