Table Class

Scrollable table with fixed header. Built-in support for iScroll (just include it - no configuration required).

Constructors

Table( parent, config )

Used to instantiate this class

parent	DOM element in which to render this component
config	Configuration settings (optional). See config options for more information.

Config Options

columns

Column definitions for the table. This config is required. Example:

        columns: [
            {header: 'ID', hidden:true},
            {header: 'Name', width:'100%'},
            {header: 'Username', width:'150'},
            {header: 'Role', width:'100'},
            {header: 'Enabled', width:'80', align:'center'},
            {header: 'Last Active', width:'150', align:'right'}
        ]

Column headers are used as labels in the header row. They are also used as column identifiers using the get and set methods for a row.

Column widths can be defined using percentages (e.g. '100%') or in pixels (e.g. '100px' or '100' or 100). Normally, there should be one column with a width of '100%'. This will allow the column fill all available area not occupied by columns with fixed column widths. The only exception is to define multiple columns with percentages as long as all the percentages add up to 100%.

Column alignment is used to set the alignment of the cells associated with the column. Options include 'left', 'right', and 'center'.

multiselect

If true, the table will allow users to select multiple rows using control or shift key. Default is false (only one row is selected at a time).

overflow

If true, the table will render a vertical scrollbar, allowing users to scroll up/down and see rows that are out of view. If false, the scrollbar is hidden from view. Default is true.

style

Style for individual elements within the component. Note that you can provide CSS class names instead of individual style definitions.

Events

onSelectionChange( rows )

Called whenever a row in the grid is selected or deselected. Contents of the selected rows can be retrieved using the getContent method. Example:

        table.onSelectionChange = function(rows){
            for (var i=0; i<rows.length; i++){
                var row = rows[i];
                if (row.selected){

                  //Get content of the first cell
                    var cells = row.childNodes;
                    var cell = cells[0].getContent();

                  //Alternatively, get content via the row.get() method
                    var cell = row.get(0);
                }
                else{

                }
            }
        };

rows	An array of rows that have had thier selection changed

onRowClick( row, e )

Called whenever a row in the table is clicked. Use the onSelectionChange event listener to determine whether selection has changed.

onHeaderClick( idx, colConfig, cell, event )

Called whenever a header cell is clicked.

onKeyEvent( keyCode, modifiers )

Called whenever a keyboard event is initiated from the table.

onOverflow( hasOverflow )

Called whenever the table overflow status changes.

onScroll( y, maxY, h )

Called whenever the table is scrolled. Implementations of this method can be used, for example, to load records when a client scrolls to the bottom of the page.

Public Methods

addRows( rows )

Appends multiple rows to the table. On some browsers (e.g. iPad) this method is significantly faster than calling addRow() multiple times. Example:

    table.addRows([
        ["Bob","12/30","$5.25"],
        ["Jim","10/28","$7.33"]
    ]);

addRow( )

Appends a row to the table and populates the cells with given values. Example:

    table.addRow("Bob","12/30","$5.25");

Note that this method also accepts an array of values. Example:

    table.addRow(["Bob","12/30","$5.25"]);

select( row )

Used to select a given row.

deselect( row )

Used to deselect a given row.

selectAll( )

Selects all the rows in the table.

deselectAll( )

Deselects all the rows in the table.

focus( )

Used to set browser focus on the table.

clear( )

Removes all the rows from the table

update( )

Used to refresh the scroll bars. This method is called internally whenever rows are added or removed from the table.

hasOverflow( )

Returns true if the table is overflowing.

scrollTo( x, y )

Used to scroll to a specific x/y location when the table has an overflow.

x	Accepts an x position (integer) or a row in the table
y	Accepts a y position. Ignored if x is a row.

getScrollInfo( )

Returns scroll position and dimenstions for the visible area.

getRowCount( )

Returns the total number of rows in the table.

forEachRow( callback )

Used to traverse all the rows in the table and extract contents of each cell. Example:

    table.forEachRow(function (row, content) {
        console.log(content);
    });

Optional: return true in the callback function if you wish to stop processing rows.

updateRow( row, data )

Used to update contents of a given row.

removeRow( row )

Used to remove a row from the table and update the scroll.

getColumnWidth( index )

Returns the width of a given column

showColumn( idx )

Used to render a column if it is hidden

hideColumn( idx )

Used to hide column

getMask( )

Returns the mask element associated with the table. A mask is a simple DOM element with custom show() and hide() methods and is rendered over the grid control. The mask is typically used to prevent users from interacting with the grid during load events (e.g. show mask before load and hide after data is rendered) or to indicate that the table is disabled.