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. To push several at once, see (see HtmlTable.pushMany)

myHtmlTable.push(row, rowProperties, target, tag, where);

1. row - (array or element) the data for the row or TR element.
2. rowProperties - (object; optional) the properties for the row (class, id, styles, etc)
3. target - (element; optional) The element that the row is injected into, before, after, etc. Defaults to the table body.
4. tag - (string; optional) The type of element to create (td or th); defaults to td.
5. where - (string; optional) the argument passed to Element.inject that specifies where the row is inserted relative to the specified target (before, after, top, bottom, 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]}

Update a table row

myHtmlTable.update(tr, row);

1. tr - (TR element) the row to update
2. row - (array or element) the data for the row or TR element. Same as the row data sent to HtmlTable.push

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

Inserts a group of rows into the table.

myHtmlTable.push(rows, rowProperties, target, tag, where);

1. rows - (array) An array of row data objects (see HtmlTable.push)
2. rowProperties - (object; optional) the properties for the row (class, id, styles, etc)
3. target - (element; optional) The element that the row is injected into, before, after, etc. Defaults to the table body.
4. tag - (string; optional) The type of element to create (td or th); defaults to td.
5. where - (string; optional) the argument passed to Element.inject that specifies where the row is inserted relative to the specified target (before, after, top, bottom, etc)

//example of 'simple' rows
myTable.push([
        [1, 'one'],
        [2, 'two'],
        [3, 'three']
    ], {
    'class': 'tableRowClass'
});

The above example would produce a table with 3 rows each with the class tableRowClass.

• (array) An array of row results returned by HtmlTable.push.

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