Skip to main content
Version: 8.1

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​

PropertyDescriptionProperty TypeScriptingCategory
Auto-Resize ModeDetermines how the table resizes the columns.int.autoResizeModeBehavior
Background ColorThe 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.backgroundAppearance
Background ModeThis mode determines the color that this table's cell's backgrounds will be.int.backgroundColorModeAppearance
BorderThe 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.borderCommon
Column Attributes DataThe dataset describing the column attributes.Dataset.columnAttributesDataData
Column Selection AllowedThis 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.columnSelectionAllowedBehavior
CursorThe mouse cursor to use when hovering over this component. Options are: Default, Crosshair, Text, Wait, Hand, Move, SW Resize, or SE Resize.int.cursorCodeCommon
DataThe data for this table.Dataset.dataData
Edit Click CountThe number of clicks required to start editing a cell.int.clickCountToStartBehavior
EnabledIf disabled, a component cannot be used.boolean.componentEnabledCommon
FontFont of text on this component.Font.fontAppearance
Foreground ColorThe foreground color of the component. See Color Selector.Color.foregroundAppearance
Grid Line ColorThe color used to draw grid lines. See Color Selector.Color.gridColorAppearance
Header FontFont of the table's header text.Font.headerFontAppearance
Header Foreground ColorThe foreground color of the table's header. See Color Selector.Color.headerForegroundAppearance
Header VisibleWhether or not the table header is visible.boolean.headerVisibleAppearance
Initially Selected RowThe index of the row that should be selected by default.int.initialRowSelectionBehavior
Mouseover TextThe text that is displayed in the tooltip that pops up on mouseover of this component.String.toolTipTextCommon
NameThe name of this component.String.nameCommon
Odd Row BackgroundThe color which odd rows will be colored if background mode is 'Alternating'. See Color Selector.Color.oddBackgroundAppearance
OpaqueIf false, backgrounds are not drawn. If true, backgrounds are drawn.boolean.opaqueCommon
Properties LoadingThe number of properties currently being loaded. (Read only. Usable in bindings and scripting.)int.propertiesLoadingUncategorized
QualityThe data quality code for any Tag bindings on this component.QualityCode.qualityDeprecated
Resizing AllowedWhether or not the user is allowed to resize table headers or not.boolean.resizingAllowedBehavior
Row HeightThe height of each row, in pixels.int.rowHeightAppearance
Row Selection AllowedThis 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.rowSelectionAllowedBehavior
Selected ColumnThe index of the first selected column, or -1 if none.int.selectedColumnData
Selected RowThe index of the first selected row, or -1 if none.int.selectedRowData
Selection BackgroundThe background color of a selected cell. See Color Selector.Color.selectionBackgroundAppearance
Selection ForegroundThe foreground color of a selected cell. See Color Selector.Color.selectionForegroundAppearance
Selection ModeThis mode determines if only one row/cell/column can be selected at once, or single or multiple intervals.int.selectionModeBehavior
Show Horizontal Grid Lines?Shows horizontal grid lines.boolean.showHorizontalLinesAppearance
Show Vertical Grid Lines?Shows vertical grid lines.boolean.showVerticalLinesAppearance
TestDataToggle this property to fill in the table's data with random data.boolean.testMisc
Touchscreen ModeControls when this table component responds if touchscreen mode is enabled.int.touchscreenModeBehavior
VisibleIf disabled, the component will be hidden.boolean.visibleCommon

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​

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)