Vision - Table

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, switch into preview mode and use your mouse to resize the columns, then switch back to design mode. To ensure that the changes to the column widths persist 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. See the Script Builders in Vision section for more information.

Properties

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

• Vision - Table Customizer
• Vision Component Customizers

Examples

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({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
)

#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)