TableGear can be applied to any table, not just one in a database. This simple example shows how to apply it to any standard HTML table, making the rows sortable as well as adding classes to even and odd rows so they can be styled.
<table id="items"> <thead> <tr> <th class="sortable">Item Name</th> <th class="sortable numeric">Price</th> <th class="sortable date">Sell Date</th> </tr> </thead> <tbody> <tr> <td>Box</td> <td>$3.00</td> <td>August 12, 2008</td> </tr> <tr> <td>Stereo</td> <td>$125.63</td> <td>May 3, 2005</td> </tr> <tr> <td>iPod</td> <td>$287</td> <td>October 3, 2006</td> </tr> <tr> <td>Picture Frame</td> <td>$15.42</td> <td>June 30, 2003</td> </tr> </tbody> </table> <script type="text/javascript" src="MooTools.js"></script> <script type="text/javascript" src="TableGear.js"></script> <script type="text/javascript"> new TableGear("items"); </script>
In the example, you will see that you need a table element with an id attribute and thead and tbody elements inside. Inside the header row, you will need th elements that have the class sortable for each column that you want to be able to sort. Additionally, you can specify the data type for the type of data you want to sort. See the documentation for more about sortable data types.
Now that your table is ready, all that's left is to link to your MooTools and TableGear source files, and create a new instance of TableGear, passing the table's id in the constructor.