Vision - Table

Component Palette Icon:

Description

The Table component allows you to display tabular data in a variety of ways. Important features include:

• Column Sorting: Allow users to sort the data by clicking on the column headers. Sorting has three modes: Ascending, Descending, and "Natural", which uses the default order of the data.
• Mapped Row Coloring: Map the background color of each row to a particular column.
• Column Translation: Allow the table component to handle all code mapping, such as mapping 0 to "Off" and 1 to "On".
• Images: Map values to images.
• Progress Bar Indication: Display numeric data as progress bars inside cells, providing fast visual reference for bounded amounts.
• Number and Date formatting: Format numbers and dates to your specification.
• Column Hiding: Hide columns from view.
• Printing: Print tables directly to multi-paged printouts.
• Editing: Columns can be made user-editable. Changes will be reflected in the underlying dataset, at which point they can be mapped back to a database.

Changing the Column Widths

To change a table's column's widths, simply switch into preview mode and use your mouse to resize the columns, and then switch back to design mode. To ensure that the changes to the column widths appear in the client, right-click on the table to open the table customizer and click OK without clicking anywhere else in the customizer. Clicking anywhere else in the customizer before clicking OK will reset the table column widths.

Editable Table

By setting any column to editable in the Table's customizer, the user will be able to double-click in the cell and edit the data. You can the respond to the resulting cellEdited event with an event handler and persist the data.

Properties

Property	Description	Property Type	Scripting	Category
Auto-Resize Mode	Determines how the table resizes the columns.	int	.autoResizeMode	Behavior
Background Color	The background color of the component. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector.	Color	.background	Appearance
Background Mode	This mode determines the color that this table's cell's backgrounds will be.	int	.backgroundColorMode	Appearance
Border	The border surrounding this component. Options are No border, Etched (Lowered), Etched (Raised), Bevel (Lowered), Bevel (Raised), Bevel (Double), and Field Border. Note: The border is unaffected by rotation. Changed in 8.1.21 As of 8.1.21, the "Button Border" and "Other Border" options are removed.	Border	.border	Common
Column Attributes Data	The dataset describing the column attributes.	Dataset	.columnAttributesData	Data
Column Selection Allowed	This flag is used in conjunction with the Row Selection Allowed property to determine whether whole-rows, whole-columns, or both (single-cells) are selectable.	boolean	.columnSelectionAllowed	Behavior
Cursor	The mouse cursor to use when hovering over this component. Options are: Default, Crosshair, Text, Wait, Hand, Move, SW Resize, or SE Resize.	int	.cursorCode	Common
Data	The data for this table.	Dataset	.data	Data
Edit Click Count	The number of clicks required to start editing a cell.	int	.clickCountToStart	Behavior
Enabled	If disabled, a component cannot be used.	boolean	.componentEnabled	Common
Font	Font of text on this component.	Font	.font	Appearance
Foreground Color	The foreground color of the component. See Color Selector.	Color	.foreground	Appearance
Grid Line Color	The color used to draw grid lines. See Color Selector.	Color	.gridColor	Appearance
Header Font	Font of the table's header text.	Font	.headerFont	Appearance
Header Foreground Color	The foreground color of the table's header. See Color Selector.	Color	.headerForeground	Appearance
Header Visible	Whether or not the table header is visible.	boolean	.headerVisible	Appearance
Initially Selected Row	The index of the row that should be selected by default.	int	.initialRowSelection	Behavior
Mouseover Text	The text that is displayed in the tooltip that pops up on mouseover of this component.	String	.toolTipText	Common
Name	The name of this component.	String	.name	Common
Odd Row Background	The color which odd rows will be colored if background mode is 'Alternating'. See Color Selector.	Color	.oddBackground	Appearance
Opaque	If false, backgrounds are not drawn. If true, backgrounds are drawn.	boolean	.opaque	Common
Properties Loading	The number of properties currently being loaded. (Read only. Usable in bindings and scripting.)	int	.propertiesLoading	Uncategorized
Quality	The data quality code for any Tag bindings on this component.	QualityCode	.quality	Deprecated
Resizing Allowed	Whether or not the user is allowed to resize table headers or not.	boolean	.resizingAllowed	Behavior
Row Height	The height of each row, in pixels.	int	.rowHeight	Appearance
Row Selection Allowed	This flag is used in conjunction with the Column Selection Allowed property to determine whether whole-rows, whole-columns, or both (single-cells) are selectable.	boolean	.rowSelectionAllowed	Behavior
Selected Column	The index of the first selected column, or -1 if none.	int	.selectedColumn	Data
Selected Row	The index of the first selected row, or -1 if none.	int	.selectedRow	Data
Selection Background	The background color of a selected cell. See Color Selector.	Color	.selectionBackground	Appearance
Selection Foreground	The foreground color of a selected cell. See Color Selector.	Color	.selectionForeground	Appearance
Selection Mode	This mode determines if only one row/cell/column can be selected at once, or single or multiple intervals.	int	.selectionMode	Behavior
Show Horizontal Grid Lines?	Shows horizontal grid lines.	boolean	.showHorizontalLines	Appearance
Show Vertical Grid Lines?	Shows vertical grid lines.	boolean	.showVerticalLines	Appearance
TestData	Toggle this property to fill in the table's data with random data.	boolean	.test	Misc
Touchscreen Mode	Controls when this table component responds if touchscreen mode is enabled.	int	.touchscreenMode	Behavior
Visible	If disabled, the component will be hidden.	boolean	.visible	Common

Scripting

See the Vision - Table Scripting Functions page for the full list of scripting functions available for this component.

Event Handlers

Event handlers allow you to run a script based off specific triggers. See the full list of available event handlers on the Component Events page.

Customizers

• Table Customizer
• Component Customizers

Examples

Binding to Selected Data

It is possible to bind other components to values in the selected row of the table. To do this, you will need to write an expression binding that protects against the case when nothing is selected or there are no rows. An expression like this would bind a label to the selected row's value in the "ProductCode" column:

Expression Binding

if({Root Container.MyTable.selectedRow} = -1,
    "n/a", // this is the fail case
    {Root Container.MyTable.data}[{Root Container.MyTable.selectedRow},"ProductCode"] // this selects from the dataset
)

If you're binding to an integer, date, or other non-String value inside a dataset, you will need to cast the value to the correct type. This binding would cast the selected "Quantity" column to an integer:

Expression Binding

if({Root Container.MyTable.selectedRow} = -1,
    -1, // this is the fail case
    toInt({Root Container.MyTable.data}[{Root Container.MyTable.selectedRow},"Quantity"]) // this selects from the dataset
)

Adding a New Row

Code Snippet

#The following would add a row to the table.
#Note that this function takes a list
#And that the property types of the list are the same as the table.
 
name = "Motor 1"
state = 2
amps = 35
list = [name, state, amps]
table = event.source.parent.getComponent('Table')
table.addRow(list)