Class RapidContext.Widget.Table

Extends: RapidContext.Widget

The table widget class. Used to provide a sortable and scrolling data table, using an outer <div> HTML element around a <table>. The Table widget can only have TableColumn child nodes, each providing a visible data column in the table.

Source code: RapidContext_Widget_Table.js

Class Summary
 
Creates a new data table widget.
Method Summary
 
addChildNode(child)
Adds a single child table column widget to this widget.
 
Adds the specified row id values to the selection.
 
Clears all the data in the table.
 
getCellElem(row, col)
Returns a table cell element.
 
Returns the column index of a field.
 
Returns an array with the data in the table.
 
Returns the unique key identifier column field, or null if none was set.
 
Returns the number of rows in the table.
 
getRowId(index)
Returns the row id for the specified row index.
 
Returns the currently selected row data.
 
Returns the currently selected row ids.
 
Returns the current sort key for the table.
 
Redraws the table from updated source data.
 
Removes a single child table column widget from this widget.
 
Removes the specified row id values from the selection.
 
setAttrs(attrs)
Updates the widget or HTML DOM node attributes.
 
setData(data)
Sets the table data.
 
setIdKey(key)
Sets the unique key identifier column field.
 
Sets the selection to the specified row id values.
 
sortData(field, direction)
Sorts the table data by field and direction.
Methods borrowed from class RapidContext.Widget:
addAll, addClass, animate, blurAll, destroy, disable, enable, getChildNodes, hasClass, hide, isDisabled, isHidden, removeAll, removeClass, setStyle, show, toggleClass, uid
Event Summary
 
Emitted when the table data is cleared.
 
Emitted when the table selection changes.
Class Detail
RapidContext.Widget.Table(attrs)
Creates a new data table widget.
JavaScript:
var attrs1 = { field: "id", title: "Identifier", key: true, type: "number" };
var attrs2 = { field: "name", title: "Name", maxLength: 50, sort: "asc" };
var attrs3 = { field: "modified", title: "Last Modified", type: "datetime" };
var col1 = RapidContext.Widget.TableColumn(attrs1);
var col2 = RapidContext.Widget.TableColumn(attrs2);
var col3 = RapidContext.Widget.TableColumn(attrs3);
var exampleTable = RapidContext.Widget.Table({}, col1, col2, col3);
RapidContext.Util.registerSizeConstraints(exampleTable, "50%", "100%");
User Interface XML:
<Table id="exampleTable" w="50%" h="100%">
  <TableColumn field="id" title="Identifier" key="true" type="number" />
  <TableColumn field="name" title="Name" maxLength="50" sort="asc" />
  <TableColumn field="modified" title="Last Modified" type="datetime" />
</Table>
Parameters:
{Object} attrs
the widget and node attributes
{String} attrs.select Optional
the row selection mode (none, one or multiple), defaults to one
{String} attrs.key Optional
the unique key identifier column field, defaults to null
{Boolean} attrs.hidden Optional
the hidden widget flag, defaults to false
{Widget} ... Optional
the child table columns
Returns:
{Widget} the widget DOM node
Method Detail
setAttrs(attrs)
Updates the widget or HTML DOM node attributes.
Parameters:
{Object} attrs
the widget and node attributes to set
{String} attrs.select Optional
the row selection mode (none, one or multiple)
{String} attrs.key Optional
the unique key identifier column field
{Boolean} attrs.hidden Optional
the hidden widget flag

addChildNode(child)
Adds a single child table column widget to this widget.
Parameters:
{Widget} child
the table column widget to add

removeChildNode(child)
Removes a single child table column widget from this widget. This will also clear all the data in the table.
Parameters:
{Widget} child
the table column widget to remove

{Number} getColumnIndex(field)
Returns the column index of a field.
Parameters:
{String} field
the field name
Returns:
{Number} the column index, or -1 if not found

{String} getIdKey()
Returns the unique key identifier column field, or null if none was set.
Returns:
{String} the key column field name, or null for none

setIdKey(key)
Sets the unique key identifier column field. Note that this method will regenerate all row identifiers if the table already contains data.
Parameters:
{String} key
the new key column field name

{String} getSortKey()
Returns the current sort key for the table.
Returns:
{String} the current sort field, or null for none

{Node} getCellElem(row, col)
Returns a table cell element.
Parameters:
{Number} row
the row index
{Number} col
the column index
Returns:
{Node} the table cell element node, or null if not found

clear()
Clears all the data in the table. The column headers will not be affected by this method. Use removeAll() or removeChildNode() to also remove columns.

{Array} getData()
Returns an array with the data in the table. The array returned should correspond exactly to the one previously set, i.e. it has not been sorted or modified in other ways.
Returns:
{Array} an array with the data in the table

setData(data)
Sets the table data. The table data is an array of objects, each having properties corresponding to the table column fields. Any object property not mapped to a table column will be ignored (i.e. a hidden column). See the TableColumn class for data mapping details. Note that automatically generated row ids will be reset by this method and any selection on such tables is lost.
var data = [
    { id: 1, name: "John Doe", modified: "@1300000000000" },
    { id: 2, name: "First Last", modified: new Date() },
    { id: 3, name: "Another Name", modified: "2004-11-30 13:33:20" }
];
table.setData(data);
Parameters:
{Array} data
an array with data objects

sortData(field, direction)
Sorts the table data by field and direction.
Parameters:
{String} field
the sort field
{String} direction Optional
the sort direction, either asc or desc

redraw()
Redraws the table from updated source data. Note that this method will not add or remove rows and keeps the current row order intact. For a more complete redraw of the table, use setData().

{Number} getRowCount()
Returns the number of rows in the table. This is a convenience method for getData().length.
Returns:
{Number} the number of table rows

{String} getRowId(index)
Returns the row id for the specified row index. If the row index is out of bounds, null will be returned. The row ids are the data values from the key column, or automatically generated internal values if no key column is set. Note that the row index uses the current table sort order.
Parameters:
{Number} index
the row index, 0 <= index < row count
Returns:
{String} the unique row id, or null if not found

{Array} getSelectedIds()
Returns the currently selected row ids. If no rows are selected, an empty array will be returned. The row ids are the data values from the key column, or automatically generated internal values if no key column is set.
Returns:
{Array} an array with the selected row ids

{Object/Array} getSelectedData()
Returns the currently selected row data.
Returns:
{Object/Array} the data row selected, or an array of selected data rows if multiple selection is enabled

{Array} setSelectedIds()
Sets the selection to the specified row id values. If the current selection is changed the select signal will be emitted.
Parameters:
{String/Array} ... Optional
the row ids or array with ids to select
Returns:
{Array} an array with the row ids actually modified

{Array} addSelectedIds()
Adds the specified row id values to the selection. If the current selection is changed the select signal will be emitted.
Parameters:
{String/Array} ... Optional
the row ids or array with ids to select
Returns:
{Array} an array with the new row ids actually selected

{Array} removeSelectedIds()
Removes the specified row id values from the selection. If the current selection is changed the select signal will be emitted.
Parameters:
{String/Array} ... Optional
the row ids or array with ids to unselect
Returns:
{Array} an array with the row ids actually unselected
Event Detail
onclear()
Emitted when the table data is cleared. This event signal carries no event information.

onselect()
Emitted when the table selection changes. This event signal carries no event information.