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
	RapidContext.Widget.Table(attrs) Creates a new data table widget.

Method Summary
	addChildNode(child) Adds a single child table column widget to this widget.
	addSelectedIds() Adds the specified row id values to the selection.
	clear() Clears all the data in the table.
	getCellElem(row, col) Returns a table cell element.
	getColumnIndex(field) Returns the column index of a field.
	getData() Returns an array with the data in the table.
	getIdKey() Returns the unique key identifier column field, or null if none was set.
	getRowCount() Returns the number of rows in the table.
	getRowId(index) Returns the row id for the specified row index.
	getSelectedData() Returns the currently selected row data.
	getSelectedIds() Returns the currently selected row ids.
	getSortKey() Returns the current sort key for the table.
	redraw() Redraws the table from updated source data.
	removeChildNode(child) Removes a single child table column widget from this widget.
	removeSelectedIds() 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.
	setSelectedIds() 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
	onclear() Emitted when the table data is cleared.
	onselect() 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.