Skip to main content
Version: 7.9


Component Palette Icon:


The Table component is very powerful and easy to configure. It is very flexible, allowing you to easily display your tabular data in a variety of ways. Important features include:

  • Column Sorting: Your users can easily sort the data by clicking on the column headers. The sorting is a 3-mode sort: 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. This allows you to give powerful visual indication of different types of rows in you tables, such as differentiating between alarm states.
  • Column Translation: Allow the table component to handle all code mapping, such as mapping 0 to "Off" and 1 to "On". No fancy SQL knowledge required.
  • Images: Map values to images, allowing intuitive visual cues.
  • 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 exact specification.
  • Column Hiding: Hide columns from view that contain identifying data used by the row coloring or by other components.
  • Printing: Print tables directly to multi-paged printouts.
  • Editing: Columns can be made editable. Changes will be reflected in the underlying dataset, at which point they can be mapped back to a database.

Basic Usage

The basic usage of the Table is to use a SQL Query binding on its Data property to let the table display data from a database. Often this query will by dynamic or indirect. See the Property Binding section for more information.

Binding to Selected Data

It is common to want to bind other components to values in the selected row of the table. In order to do this safely, you 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 for a column named "ProductCode":

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

If you're binding to an integer, date, or other non-String type value thats inside a dateset, you'll need to cast the value to the correct type to make the expression parser happy. 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}[{Root Container.MyTable.selectedRow},"Quantity"]) // this selects from the dataset

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.

Exporting to HTML

You can export the table to an HTML file that retain's the table's formatting. To do this, use a script like this:

Python Scripting
# Get a reference to the table and call the exportHTML() function
table = event.source.parent.getComponent("Table")
table.exportHTML("MyTable.html", "My Table Header", 500)

Exporting to CSV

You can export the table's raw data to a CSV file. To do this, use a script like this:

Python Scripting
# Get a reference to the table and call the exportCSV() finction
table = event.source.parent.getComponent("Table")
table.exportCSV("MyTable.csv", 1)


Printing a table is a snap! Simply use the table's built in print function like this:

Python Scripting
# Get a reference to the table and call the print() finction
table = event.source.parent.getComponent("Table")


NameDescriptionProperty TypeScriptingCategory
AntialiasDraw with antialias on? Makes text smoother.boolean.antialiasAppearance
Auto-Resize ModeDetermines how the table resizes the
Background ColorThe background color of the component.Color.backgroundAppearance
Background ModeThis mode determines the color that this table's cell's backgrounds will
BorderThe border surrounding this component. NOTE that the border is unaffected by rotation.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 flag to determine whether not whole-rows, whole-columns, or both (single-cells) are selectable.boolean.columnSelectionAllowedBehavior
CursorThe mouse cursor to use when hovering over this
DataThe data for this table.Dataset.dataData
Data QualityThe data quality code for any tag bindings on this
Edit Click CountThe number of clicks required to start editing a
EnabledIf disabled, a component cannot be used.boolean.componentEnabledCommon
FontFont of text on this component.Font.fontAppearance
Foreground ColorThe foreground color of the component.Color.foregroundAppearance
Grid Line ColorThe color used to draw grid lines.Color.gridColorAppearance
Header FontFont of the table's header text.Font.headerFontAppearance
Header Foreground ColorThe foreground color of the table's header.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 when this table's data is filled
NameThe name of this component.String.nameCommon
Odd Row BackgroundThe color which odd rows will be colored if background mode is 'Alternating'.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
Resizing AllowedWhether or not the user is allowed to resize table headers or not.boolean.resizingAllowedBehavior
Row HeightThe height of each row, in
Row Selection AllowedThis flag is used in conjunction with the Column Selection Allowed flag to determine whether not whole-rows, whole-columns, or both (single-cells) are selectable.boolean.rowSelectionAllowedBehavior
Selected ColumnThe index of the first selected column, or -1 if
Selected RowThe index of the first selected row, or -1 if
Selection BackgroundThe background color of a selected cell.Color.selectionBackgroundAppearance
Selection ForegroundThe foreground color of a selected cell.Color.selectionForegroundAppearance
Selection ModeThis mode determines if only one row/cell/column can be selected at once, or single or multiple
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
VisibleIf disabled, the component will be hidden.boolean.visibleCommon


See the 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.


The Table component has a Table customizer to manage column configurations and configure background color mapping. It allows you to customize how you want the table to look to users.


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