dataTable - Data Table

Contains cells arranged as rows and columns associated with a data source. Each cell can contain other controls (including tables) and text.

Category

Container Controls

Syntax

<xp:dataTable attributes>
	<xp:column attributes>content	</xp:column>
	...
</xp:dataTable>
Table 1. Essential properties
Property Description
id (dataTable) Defaults to dataTable1, dataTable2, and so on.

(column) Defaults to column1, column2, and so on.
value (dataTable) Typically the data binding is to a collection of elements, for example, a NotesDocumentCollection object.
var (dataTable) Typically this variable refers to one member of the bound data collection, for example, a NotesDocument object if the binding is to a NotesDocumentCollection object.
Table 2. All properties (dataTable)
Category Properties
accessibility caption, role, summary, title
Note: The role property is obsolete starting with 9.0.1. By default the appropriate compliant value is generated. For compliance with accessibility standards, do not specify a value for this property.
basics attrs, binding, dir, disabled, id, lang, loaded, partialExecute, partialRefresh, refreshId, rendered, rendererType, rules
data data, first, indexVar, rows, value, var
events onclick, ondblclick, onkeydown, onkeypress, onkeyup, onmousedown, onmousemove, onmouseout, onmouseover, onmouseup
format bgcolor, border, cellpadding, cellspacing, frame, showUnreadMarks, width
styling captionStyleClass, columnClasses, disableTheme, footerClass, headerClass, readMarksClass, rowClasses, style, styleClass, themeId, unreadMarksClass
Table 3. All properties (column)
Category Properties
accessibility role
basics binding, id, loaded, rendered, rendererType
styling disableTheme, style, styleClass, themeId

Pagers

A facets region containing a pager or pagers is part of the table depending on Design specifications. Use Source mode to work within the facet region.

Here is a sample facet for pager controls:

<xp:this.facets>
	<xp:pager partialRefresh="true" layout="Previous Group Next"
		xp:key="header" id="pager1">
	</xp:pager>
</xp:this.facets>
The following boxes on the Display tab under Properties affect the facet content as follows:
  • Show pager in header (cleared by default) generates a pager control of key header. No facets regions is generated if this is cleared.
  • Show pager in footer (cleared by default) generates a pager control of key footer.

Usage

At run time, the data table appears on the page. The user can access the table a cell at a time.

Once a data table is created, you can add and delete rows and columns.

The content of each column is one, two, or three values representing the header, middle, and footer rows in the table. The middle row is rendered as a variable number of rows depending on the number of elements in the data source.

For Domino® view capabilities such as categories, totals, response documents, and sorting, prefer a View control. A View control incorporates the capabilities of its source Domino® view.

Prefer this control where you need capabilities beyond those of a View control. This control allows the user to edit within columns whereas a View control does not. With this control, you can embed and bind other controls (for example, images) of your choice whereas a View control is constrained by the design of the source Domino® view.

For accessibility compliance, do not use this control for visual layout and do not set the role property to presentation. For visual layout, use the Table control.

Examples

This data table displays the subject and fruit items for all documents in the current database.
<xp:dataTable id="dataTable1" rows="30"
	value="#{javascript:return database.getAllDocuments()}" var="rowdoc">
	<xp:column id="column1">
		<xp:this.facets>
			<xp:label value="subject" id="label1" xp:key="header" style="font-weight:bold"></xp:label>
		</xp:this.facets>
		<xp:text escape="true" id="computedField1"><xp:this.value>
			<![CDATA[#{javascript:return rowdoc.getItemValueString("subject")}]]>
		</xp:this.value>	</xp:text>
	</xp:column>
	<xp:column id="column2">
		<xp:this.facets>
			<xp:label value="fruit" id="label2" xp:key="header" style="font-weight:bold"></xp:label>
		</xp:this.facets>
		<xp:text escape="true" id="computedField2"><xp:this.value>
			<![CDATA[#{javascript:return rowdoc.getItemValueString("fruit")}]]>
		</xp:this.value></xp:text>
	</xp:column>
</xp:dataTable>