Vision - Table | Ignition User Manual (2024)

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​

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:

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:

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​

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