Search

User Manual

GETTING STARTED


OTHER EDITIONS


LAUNCHERS


MODULES


PLATFORM


APPENDIX


TUTORIALS & HELPFUL TRICKS


STRATEGIC PARTNER LINKS

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

RESOURCES

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support

ALL USER MANUAL VERSIONS

Ignition 8.1. Offline Version (04/2021)
Ignition 8 Online Version
Ignition 7.9 Online Version
Ignition 7.8 Online Version

Deprecated Pages

SDK Documentation

Employees

Sign In

Skip to end of metadata
Go to start of metadata


Component Palette Icon:

On this page ...


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

NameDescriptionProperty 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
Border

The border surrounding this component. Options are: No border, Etched (Lowered), Etched (Raised), Bevel (Lowered), Bevel (Raised), Bevel (Double), Button Border, Field Border, Line Border, and Other Border.

Note: 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 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
Deprecated Properties
Data QualityThe data quality code for any Tag bindings on this component.int.dataQualityDeprecated

Scripting

Component Functions

  • Description

Adds a new row to the end of the table's dataset

  • Parameters

PySequence  newRow -  A sequence containing the values for the new row. The length of the sequence must match the number of columns in the table, and each value must be coercible into the correct datatype of the corresponding column.

  • Return

Nothing

  • Description

Deletes a row from the table's dataset.

  • Parameters

int  rowIndex -  The index of the row to delete.

  • Return

Nothing

  • Description

Prompts the user to save the table's data as a CSV file.

  • Parameters

String  filename -  A suggested filename for the user. For example: "table_data.csv"

boolean  showHeaders -  If true, include headers in CSV file.

  • Return

String  -  The path to the saved file, or null if the operation was cancelled.

  • Description

Creates an HTML page as a string in memory. This can then be written to a file, a database, emailed, etc.

  • Parameters

String  title -  The title for the HTML page.

int  width -  The width (in pixels) for the "table" element in the resulting html page.

  • Return

String  -  A string containing an HTML-formatted version of the table's data.

  • Description

Returns a list of ints that represent the underlying dataset's rows as they appear in the current sort order that the user is viewing.

  • Parameters

none

  • Return

List of Integers

  • Description

Returns the index of the currently selected column, or -1 if none is selected.

  • Parameters

none

  • Return

int  

  • Description

Returns the number of columns that are currently selected.

  • Parameters

none

  • Return

int  

  • Description

Returns the index of the currently selected row, or -1 if none is selected.

  • Parameters

none

  • Return

int  

  • Description

Returns a list of the indexes of the selected row, or none if none is selected.

  • Parameters

none

  • Return

List, None

  • Description

Returns the number of rows that are currently selected.

  • Parameters

none

  • Return

int  

  • Description

Tests whether the cell at the given row and column is currently selected or not.

  • Parameters

int row - The row to test.

int column - The column to test.

  • Return

boolean

  • Description

Tests whether the given column is currently selected or not.

  • Parameters

int column- The column to test.

  • Return

boolean

  • Description

Tests whether the given row is currently selected or not.

  • Parameters

int row - The row to test.

  • Return

boolean

  • Description

This specialized print function will paginate the table onto multiple pages.This function accepts keyword-style invocation.

  • Keyword Args

boolean fitWidth If true, the table's width will be stretched to fit across one page's width. Rows will still paginate normally. If false, the table will paginate columns onto extra pages. (default = true)  [optional]

string headerFormat A string to use as the table's page header. The substring "{0}" will be replaced with the current page number. (default = None)  [optional]

string footerFormat A string to use as the table's page footer. The substring "{0}" will be replaced with the current page number. (default = "Page {0}")  [optional]

boolean showDialog Whether or not the print dialog should be shown to the user. Default is true.  [optional]

boolean landscape Used to specify portrait (0) or landscape (1) mode. Default is portrait (0).  [optional]

  • Return

boolean True if the print job was successful.

  • Description

Used to set a column's header label to a new string at runtime.

  • Parameters

int column - The column index that will get a new headel label.

String label - The new header label.

  • Return

nothing

  • Description

Sets the given range of columns to be selected. If index0==index1, it will select a single column.

  • Parameters

int index0 - the first index.

int index1 - the second index.

  • Return

boolean  -  True if selection range is valid.

  • Description

Used to set a column's width at runtime.

  • Parameters

int column - The index of the column.

int width - The width to set it at in pixels.

  • Return

nothing

  • Description

Sets the given range of rows to be selected. If index0==index1, it will select a single row.

  • Parameters

int index0 - The first index.

int index1 - The second index.

  • Return

boolean  -  True if selection range is valid.

  • Description

Sets the given column to be the selected column.

  • Parameters

int column - Column to select.

  • Return

nothing

  • Description

Sets the given row to be the selected row.

  • Parameters

int row - Row to select.

  • Return

nothing

  • Description

Sets the value in the specified cell, altering the table's Data property. Will fire a propertyChange event for the "data" property, as well as a cellEdited event.

  • Parameters

int  row -  The index of the row to set the value at.

int  column -  The index or name of the column to set a value at.

PyObject  value -  The new value to use at the given row/column location.

  • Return

nothing

  • Description

Instructs the table to sort the data by the named column.

  • Parameters

String  columnName - The name of the column.

boolean  asc -  1 means ascending, 0 means descending. (default = 1)  [optional]

  • Return

nothing

  • Description

Instructs the table to clear any custom sort columns and display the data as it is sorted in the underlying dataset.

  • Parameters

nothing

  • Return

nothing

  • Description

Updates an entire row of the table's dataset.

  • Parameters

int  rowIndex -  The index of the row to update.

PyDictionary  changes -  A sequence containing the updated values for the row. The length of the sequence must match the number of columns in the table, and each value must be coercible into the correct datatype of the corresponding column.

  • Return

nothing

Extension Functions

  • Description

Called for each cell, returns the appropriate background color. Do not block, sleep, or execute any I/O; called on painting thread.

  • Parameters

Component self - A reference to the component that is invoking this function.

int row -The row index of the cell.

int col -The column index of the cell.

boolean isSelected - A boolean representing if the cell is currently selected.

Object value -The value in the table's dataset at index [row, col].

Color defaultColor -The color the table would have chosen if this function was not implemented.

  • Return

Color

  •  Description

Called for each cell, returns the appropriate foreground (text) color. Do not block, sleep, or execute any I/O; called on painting thread.

  • Parameters

Component self - A reference to the component that is invoking this function.

int row -The row index of the cell.

int col -The column index of the cell.

boolean isSelected - A boolean representing if the cell is currently selected.

Object value -The value in the table's dataset at index [row, col].

Color defaultColor - The color the table would have chosen if this function was not implemented.

  • Return

Color

  • Description

Called for each cell, returns a String which will be used as the text of the cell. Do not block, sleep or execute any I/O; called on the painting thread.

  • Parameters

Component self - A reference to the component that is invoking this function.

int row-The row index of the cell.

int col-The column index of the cell.

boolean isSelected: A boolean representing if the cell is currently selected.

Object value-The value in the table's dataset at index [row, col].

String defaultText -The string the table would have chosen if this function was not implemented.

  • Return

String

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)








  • No labels