Builds table elements with methods to add rows quickly.

• Online Tutorial/Demo

• Options, Events, Class.Occlude

new HtmlTable([table, options]);

1. table - (mixed; optional) - a Table DOM element or it's id; if you do not specify one, one will be created.
2. options - (object; optional) a key/value set of options.

• properties - (object) a set of properties for the Table element; defaults to {cellpadding:0, cellspacing:0, border:0}
• rows - (array) an array of row objects (see HtmlTable.push)
• headers - (array) a row that is injected in the thead; required for sorting.

var myTable = new HtmlTable({
    properties: {
        border: 1,
        cellspacing: 3
    },
    headers: ['fruits', 'colors'],
    rows: [
        ['apple', 'red'],
        ['lemon', 'yellow']
    ]
});
myTable.inject($('someContainer'));

//ALSO

var myTable = new HtmlTable($('existingTable'));
myTable.push(['data','goes','here']);

Inserts a new table row.

myHtmlTable.push(row, rowProperties);

1. row - (array or element) the data for the row or TR element.
2. rowProperties - (object) the properties for the row (class, id, styles, etc)

Row data can be in either of two formats. Note that they can be mixed and matched.

• simple - (array) an array of strings, elements and element collections that will be inserted into each table data

OR

• detailed - (array) an array of objects with definitions for content and properties for each table data

Note that it can also be an actual TR element.

//example of 'simple' rows
myTable.push(['value 1', 'value 2', 'value 3'], {
    'class': 'tableRowClass'
}); //new row


//detailed rows
myTable.push([
    { //can specify data AND properties
        content: 'value 4',
        properties: {
            colspan: 2,
            'class': 'doubleWide',
            style: '1px solid blue'
        }
    },
    'value 5' //can just be data; mixing and the two in the same row is fine
]);


//RESULT:
<table cellpadding="0" cellspacing="0" border="0">
    <tr class="tableRowClass">
        <td>value 1</td>
        <td>value 2</td>
        <td>value 3</td>
    </tr>
    <tr>
        <td colspan="2" class="doubleWide" style="1px solid blue">value 4</td>
        <td>value 5</td>
    </tr>
</table>

• (object) an object containing the tr and td tags.

{tr: theTableRow, tds: [td, td, td]}

Empties the tbody of the table.

myTable.empty();

• (object) This instance of HtmlTable.

Sets the contents of the header or footer.

myTable.set(what, rowArray);

1. what - (string) either 'headers' or 'footers'
2. rowArray - (array) an array of header information; same as the row data sent to HtmlTable.push

• (object) The row data (same as returned by the push method).

If you pass an instance of HtmlTable into the $ or document.id function it will return the actual table Element.

document.id(myHtmlTable).setStyle('color', 'blue');

$(myHtmlTable) == myHtmlTable.table; // true

This class implements the following Element methods:

• adopt
• inject
• wraps
• grab
• replaces
• empty
• dispose

These will execute these methods on the table element.

Each method accepts exactly the same arguments as the Element equivalent.

• (object) This instance of HtmlTable.

myHtmlTable.inject(document.body);
//same as:
document.id(myHtmlTable).inject(document.body);

Extends the Element Type with a reference to its HtmlTable instance.

myElement.retrieve('HtmlTable'); //the instance of HtmlTable for the element