Super Tables - HTML Tables with Fixed Headers and More

Posted on February 08, 2008 06:34:50 PM --- 13926 Views

What are Super Tables?

Something that's not really that super yet but may be someday. Super Tables are large HTML tables enhanced with cross-browser fixed vertical and horizontal scrolling headers with custom skins and features.

How do they work?

Using a small (10kb uncompressed) javascript file and an equally small (4kb) CSS skin file, a rendered HTML table is taken by the superTables.js script and is turned into a Super Table using only a single line of javascript code.

Why would I need them?

You might need them if you have one or more large tables on your website and/or application and wish to:

• Enhance the user experience.
• Constrain tables sizes while still keeping the headers in view.
• Turn static tables into web-based spreadsheets.
• Avoid having to rewrite old HTML table code into javascript or XML for use in similiar products.

Features:

• Fixed headers - vertical and horizontal scrolling supported
• Supports: Internet Explorer 5.5, 6 & 7, Firefox 2 & 3, Opera 9.25 & 9.5 and Safari 3 (Tested in Windows only)
• Supports multiple header rows
• Supports multiple fixed left columns
• Minimal implementation needed
• MIT Style License

Download:

• Compressed: Super Tables v0.30
• Uncompressed: Super Tables v0.30

• Rendering speed increased significantly in Firefox and Internet Explorer.
• Required CSS styles have lessened dramatically.
• rowSpan and colSpan support added.
• onStart option added. onStart is a function run before the superTable script begins to re-render the table. Any this.variableNameHere variables you create here can be used later ( eg. onFinish function )
• Fixed various minor bugs.

• Uncompressed: Super Tables v0.25  (change log)
  Version 0.25 Change Log:

  • Rendering speed slightly increased.
  • Internet Explorer 5.5 support added.
  • Decreased every CSS skin file from 6kb to 4kb uncompressed.
  • onFinish option added. onFinish is a function run after the superTable script has re-rendered the table. All this.variableNameHere variables from the script are accessible in this function. ( eg. this.columnWidths )
  • Fixed various minor bugs.
• Uncompressed: Super Tables v0.24
• Uncompressed: Super Tables v0.23
• Uncompressed: Super Tables v0.23a
• Uncompressed: Super Tables v0.22
• Uncompressed: Super Tables v0.21

Demo / Skins:

View the demo page

View the skins demo page

How To Use:

Include superTables.js and superTables.css in the page / template containing your HTML table.

Make sure your table has an id assigned to it. Then, in either your onLoad or onDomReady function, create the new superTable object using the table's id as the parameter along with any options you choose.

TO CALL: 
new superTable([string] tableId, { options });

OPTIONS:   ( order does not matter )
cssSkin : string   ( eg. "sDefault", "sSky", "sOrange", "sDark" )
headerRows : integer   ( default is 1 )
fixedCols : integer   ( default is 0 )
colWidths : integer array   ( use -1 for auto sizing (in the array) )
onStart : function   ( any this.variableNameHere variables you create here can be used later ( eg. onFinish function ) )
onFinish : function   ( all this.variableNameHere variables created in this script can be used in this function )

EXAMPLES:
var myST = new superTable("myTableId");

var myST = new superTable("myTableId", {
    cssSkin : "sDefault",
    headerRows : 1,
    fixedCols : 2,
    colWidths : [100, 230, 220, -1, 120, -1, -1, 120],
    onStart : function () {
        this.start = new Date();
    },
    onFinish : function () {
        alert("Finished... " + ((new Date()) - this.start) + "ms.");
    }
});

Notes / Known Issues (v0.30):

• No quirksmode support (officially, but still should work)
• Element id's may be duplicated when fixedCols > 0, causing getElementById() issues
• Safari will render the header row incorrectly if the fixed header row count is 1 and there is a colspan > 1 in one or more of the cells (fix available)

Regarding Assistance:

My email address is linked to at the bottom of this page on the right hand side. I will also look at any comments on the most recent release announcement post.

Please note: At this time, given how early in release it is, assistance will be very limited.

Future Features:

• Graceful degradation on older browsers
• Table resizing
• Basic sorting
• ..and more likely