Table Properties

This section describes some of the Table component properties. For information on other properties, see General Interface GUI Property Reference or hover over a property name in the Properties Editor palette.

For more information on General Interface APIs for the Table component, see jsx3.gui.Table in General Interface API Reference.

Column Definitions

All column-specific information for the Table component is defined by an instance property instead of in the serialization file as is common with other components, such as Matrix. The Column property maps to a CDF document, which defines the metadata that determines how columns are rendered. Metadata includes width, column label, mapped attribute name, and attribute data type.

To define metadata for columns in a table, use the Column editor. Simply click the Column Editor button in the Properties Editor palette next to the Value field of the Columns property and enter Column Label, Width, Attribute Name, and Attribute Data Type values. Then click the Update button. Values in the Column editor are saved in CDF format.

When working in the Column editor, use the following buttons to add, delete, and reorder rows. Then click the Update button to save your changes.

Button	Description
	Adds a row after the last row.
	Deletes the row.
	Moves the row up.
	Moves the row down.

Column Metadata

You can enter this metadata for a Table column:

• Column Label the text/HTML to use for the column.
• Width the width of the column. Specify integers or percentage.
• Attribute Name the named attribute mapped to the column.
• Attribute Data Type the data type for the mapped attribute which is used in sorting. Select Text or Number.

Formatting Rows and Cells

You can format headers, rows, and cells in a table in these ways:

• Inline CSS style properties
• Named CSS rules
• XSL templates

Multiple properties and rules are supported for inline CSS and CSS rules. You can also set styles for alternate rows. Cell styles, however, are applied to all cells in the body of the table. For custom formatting of individual cells, specify an XSL template for the Value Template property. Because the XSL template is shared by all columns, conditional output must be handled by the XSL template.

Also, if any custom formatting is required for HTML output-escaping, localization, and so on, the XML Transformers property provided by the jsx3.xml.Cacheable interface should be used instead of relying on a list of named resolvers as is currently supported by Matrix.

For more information, see Style, Class, Style (Alt), Class (Alt), and Value Template properties in General Interface GUI Property Reference and jsx3.gui.Table in General Interface API Reference.

Specifying Column Header Height

Because browsers render the box profile differently, do not specify a CSS height property when applying styles to column label HTML of the Table component. Use CSS padding, border, and font-size properties to control height instead of a CSS height property.

For example, if you want a header of 29 pixels, set the font size, padding, and border so that the sum of their heights equals 29 pixels. In the following column label example, the sum of the heights is equal to 29:

<div style='font-size:12px;padding:8px;border-right:solid 1px gray;border-bottom:solid 1px gray'>Col 1</div>

12 (font)+ 16 (padding) + 1 (bottom border) = 29

The steps for setting column height include:

1. Specify the height of the row that contains the column labels (the header) in the Header Height property in the Properties Editor palette. Note that the Header Height property value should be equal to the sum of the heights of the CSS style properties: font size, border, and padding.
2. Decide and calculate the height of the CSS style properties: font size, border, and padding. Remember that the sum of these heights should be equal to the Header Height property value. For example, if the Header Height property is set to 20, the height of font size, border, and padding should equal 20.
3. Enter the CSS values in the Column Label field of the Column editor. Click the Column Editor button in the Properties Editor palette next to the Value field of the Columns property to open the Column editor.

The next figure demonstrates a column header that is set properly. The Header Height property in the Properties Editor palette is 29 and the sum of the height of the CSS style properties equals 29.

The next figure demonstrates a column header that is not set properly. The Header Height property is 100 and the sum of the height of the CSS style properties equals 29.