fnagel edited this page Apr 6, 2011 · 19 revisions
Clone this wiki locally

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.



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.
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.

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 11 KB.

Accessibility features

  • full browser history and title support via jQuerry Address
  • keyboard support (arrow keys or native tabular index, Home, End, Space)
  • ARIA Live-Regions
  • ARIA and HTML table relations


Structure of a table used with the widget:

<table summary="Summery text">
	<caption>Some caption</caption>
			<th><a href="#server_site_order">Head</a></th>

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-text text alphabetically and time; default
ui-table-text-html text with HTML tags alphabetically
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 (text alphabetically) also sorts time: 20:00:13.


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 ascending
textDesc string Sort descending descending
disabled boolean false disable widget
jqAddress.enable boolean true enable browser history support
jqAddress.title.enable boolean true enable title change
jqAddress.title.split string Ι set delimiter string
jqAddress.changeRow boolean true allow user to change row range

You need to add the add the jQuery Address file, if you like to use browser history support. jQuery Address support is currently only available in master branch (jQuery 1.4, UI 1.8).


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

  • onInit
  • onUpdateData
  • onSetHTML
  • onRowSort


Method Description
updateData build new working array (which holds only not hided data)
setHTML build and inject new tbody (parameter: is the new row number to begin; parameter is master branch only, legacy should update options.rowToStart manually)
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)

Take a look in the js/demo.js file to learn how to extend the widget for your needs.

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