YUI 2 DataTable Example : Scrolling DataTable with Footer
Demonstrates a DataTable footer which can be applied to either a Standard or a Scrolling DataTable.
This footer implementation is compatible column resizing and with re-calculating changes due to cell editing.
(Columns 1, 2 and 4 are resizeable, Columns 4 and 5 are editable ... try them!)
Select a Footer option :
The footer is defined within the DataTable "configuration" using the property called "tfooter", and the
heading for the footer can span several columns using "colspan" notation.
Presently, ROW_COUNT, SUM, MIN, MAX, MEAN or AVG calculations are available for use in the footer.
This footer capability is available via a widget I wrote that extends ScrollingDataTable and is
available below (or from a gist at gist:1015607 if you use GitHub).
NOTE: This example breaks in IE for a scrolling DataTable, due to bugs with columns widths See YUI DataTable Known Issues.
Also, note that I use Column "width" settings to help IE, you don't HAVE to use them!.
You can always see the entire source code for this example by using your browser's "show page source code" capability,
usually Right-Click in the browser main page.
Any comments or helpful recommendations can be posted on the YUILibrary - YUI 2 forum where I visit
under the username stlsmiths. Thanks!
HTML / CSS markup:
JavaScript code ... for this DEMO Page :
JS Code for DataTableSF Widget :
References for this Example: