This example demonstrates how the Uize.Widget.TableSort widget class can be used to add sorting capability to a table on a page - without the table having to be generated by JavaScript, and without the table having to have messy JavaScript event handlers inside the HTML markup, and - most importantly - without the table having to be destroyed and rebuilt. This is an example of one of the several progressive enhancement (aka "unobtrusive JavaScript") features provided by the UIZE JavaScript Framework.

Move your mouse over the table's column headings and notice how the heading becomes highlighted. Also, a tooltip indicates what action will result from clicking a heading. Click a heading and see how the table is instantaneously sorted by the data in that column. Click again to reverse the sort order. The Uize.Widget.TableSort class adds a few other progressive enhancements. Move your mouse over the rows of data and see how the current row is highlighted. This makes it easier for the eye to follow the row from left to right, allowing you to make sure you're reading data for the row that you think you're reading it for - something that is notoriously difficult for wide tables. Notice also, how a tooltip for each column's data displays the heading of the column - helping with large tables that get scrolled so the user can no longer see the headings.