Table

Two tables showing a variety
of display options

Description

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":

if({Root Container.MyTable.selectedRow} = -1,

"n/a", // this is the fail case

{Root Container.MyTable.data}[{Root Container.MyTable.selectedRow},

"ProductCode"])

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:

if({Root Container.MyTable.selectedRow} = -1,

-1, // this is the fail case

toInt({Root Container.MyTable.data}[{Root Container.MyTable.selectedRow},

"Quantity"]))

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 insure 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. See the Event Types section for more information.

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: (more about the table's exportHTML function is here.)

# Get a reference to the table

table = event.source.parent.getComponent("Table")

# Prompt user to save the exported file

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: (more about the system.db.exportCSV function is here.)

# Get a reference to the table

table = event.source.parent.getComponent("Table")
system.dataset.exportCSV("mydata.csv", 1, table.data)

Printing

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

table = event.source.parent.getComponent("Table") # Get a reference to the table

table.print()

See also:

SQL Query Binding

Expression Binding

Event Types - cellEdited

system.dataset.exportCSV

system.dataset.dataSetToExcel

system.dataset.dataSetToHTML

system.print.createPrintJob

Properties

Appearance

Font

Font of text of this component

Scripting name	font
Data type	Font

Foreground Color

The foreground color of the component.

Scripting name	foreground
Data type	Color

Background Color

The background color of the component.

Scripting name	background
Data type	Color

Header Font

Font of the table's header text

Scripting name	headerFont
Data type	Font

Header Foreground Color

The foreground color of the table's header.

Scripting name	headerForeground
Data type	Color

Header Visible

Whether or not the table header is visible.

Scripting name	headerVisible
Data type	boolean

Row Height

The height of each row, in pixels

Scripting name	rowHeight
Data type	int

Background Mode

This mode determines the color that this table's cell's backgrounds will be.

Scripting name

backgroundColorMode

Data type

int

Values

1	Constant
2	Alternating
3	Mapped

Odd Row Background

The color which odd rows will be colored if background mode is 'Alternating'

Scripting name	oddBackground
Data type	Color

Selection Background

The background color of a selected cell.

Scripting name	selectionBackground
Data type	Color
Flags	expert

Selection Foreground

The foreground color of a selected cell.

Scripting name	selectionForeground
Data type	Color
Flags	expert

Show Horizontal Grid Lines?

Scripting name	showHorizontalLines
Data type	boolean
Flags	expert

Show Vertical Grid Lines?

Scripting name	showVerticalLines
Data type	boolean
Flags	expert

Grid Line Color

The color used to draw grid lines.

Scripting name	gridColor
Data type	Color
Flags	expert

Antialias

Draw with antialias on? Makes text smoother

Scripting name	antialias
Data type	boolean
Flags	expert

Behavior

Selection Mode

This mode determines if only one row/cell/column can be selected at once, or single or multiple intervals

Scripting name

selectionMode

Data type

int

Values

0	Single
1	Single Interval
2	Multiple Interval

Row Selection Allowed

This 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.

Scripting name	rowSelectionAllowed
Data type	boolean

Column Selection Allowed

This 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.

Scripting name	columnSelectionAllowed
Data type	boolean

Resizing Allowed

Whether or not the user is allowed to resize table headers or not.

Scripting name	resizingAllowed
Data type	boolean

Auto-Resize Mode

Determines how the table resizes the columns

Scripting name

autoResizeMode

Data type

int

Values

4	All Columns
3	Last Column
1	Next Column
0	Off
2	Subsequent Columns

Edit Click Count

The number of clicks required to start editing a cell.

Scripting name	clickCountToStart
Data type	int

Initially Selected Row

The index of the row that should be selected by default when this table's
data is filled in.

Scripting name	initialRowSelection
Data type	int
Flags	expert

Touchscreen Mode

Controls when this table component responds if touchscreen mode is enabled.

Scripting name

touchscreenMode

Data type

int

Flags

expert

Values

0	None
-1	Automatic

Common

Name

The name of this component.

Scripting name	name
Data type	String
Flags	bindable

Enabled

If disabled, a component cannot be used.

Scripting name	componentEnabled
Data type	boolean

Visible

If disabled, the component will be hidden.

Scripting name	visible
Data type	boolean
Flags	bindable

Border

The border surrounding this component. NOTE that the border is unaffected by rotation.

Scripting name	border
Data type	Border

Opaque

If false, backgrounds are not drawn. If true, backgrounds are drawn.

Scripting name	opaque
Data type	boolean

Cursor

The mouse cursor to use when hovering over this component.

Scripting name

cursorCode

Data type

int

Values

0	Default
1	Crosshair
2	Text
3	Wait
12	Hand
13	Move
4	SW Resize
5	SE Resize
6	NW Resize
7	NE Resize
8	N Resize
9	S Resize
10	W Resize
11	E Resize

Data

The data for this table

Scripting name	data
Data type	Dataset
Flags	bindable

Column Attributes Data

The dataset describing the column attributes.

Scripting name	columnAttributesData
Data type	Dataset
Flags	expert

Selected Column

The index of the first selected column, or -1 if none.

Scripting name	selectedColumn
Data type	int
Flags	bindable \| expert

Selected Row

The index of the first selected row, or -1 if none.

Scripting name	selectedRow
Data type	int
Flags	bindable \| expert

Data Quality

The data quality code for any tag bindings on this component.

Scripting name	dataQuality
Data type	int
Flags	bindable \| expert

Uncategorized

TestData

Toggle this property to fill in the table's data with random data.

Scripting name	test
Data type	boolean
Flags	expert

Properties Loading

The number of properties currently being loaded

Scripting name	propertiesLoading
Data type	int
Flags	bindable \| read-only

Scripting

Events

The following event sets are fired by this component. See Component Event Handlers to learn more.

•

mouse

•

focus

•	propertyChange

•

cell

•

key

Scripting Functions

addRow(newRow)

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.
Returns	nothing

deleteRow(rowIndex)

Deletes a row from the table's dataset.

Parameters	int rowIndex - The index of the row to delete.
Returns	nothing

exportCSV(filename, showHeaders)

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.

Returns

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

exportHTML(filename, title, width)

Prompts the user to save the table's data as an html file.

Parameters

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

String title - The title for the HTML page.

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

Returns

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

getDataAsHTML(title, width)

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.

Returns

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

getRowsInViewOrder()

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
Returns	int[]

getSelectedColumn()

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

Parameters	none
Returns	int

getSelectedColumnCount()

Returns the number of columns that are currently selected.

Parameters	none
Returns	int

getSelectedColumns()

Returns a list of ints representing the currently selected columns.

Parameters	none
Returns	int[]

getSelectedRow()

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

Parameters	none
Returns	int

getSelectedRowCount()

Returns the number of rows that are currently selected.

Parameters	none
Returns	int

getSelectedRows()

Returns a list of ints that represent the currently selected rows.

Parameters	none
Returns	int[]

isCellSelected(row, column)

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

Parameters

int row

int column

Returns

boolean - 1 or 0 meaning selected or not selected, respectively.

isColumnSelected(column)

Tests whether the given column is currently selected or not.

Parameters	int column
Returns	boolean

isRowSelected(row)

Tests whether the given row is currently selected or not.

Parameters	int row
Returns	boolean

print()

This specialized print function will paginate the table onto multiple pages.

This function accepts keyword-style invocation.

Keyword Args

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]

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]

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]

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

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

Returns

boolean - True if the print job was successful.

setColumnLabel(column, label)

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

Parameters

int column

String label

Returns

nothing

setColumnSelectionInterval(index0, index1)

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

Parameters

int index0

int index1

Returns

boolean - True if selection range is valid.

setColumnWidth(column, width)

Used to set a column's width at runtime.

Parameters

int column

int width

Returns

nothing

setRowSelectionInterval(index0, index1)

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

Parameters

int index0

int index1

Returns

boolean - True if selection range is valid.

setSelectedColumn(column)

Sets the given column to be the selected column.

Parameters	int column
Returns	nothing

setSelectedRow(row)

Sets the given row to be the selected row.

Parameters	int row
Returns	nothing

setValue(row, column, value)

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.

Returns

nothing

sortByColumn(columnName [, asc])

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

Parameters

String columnName

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

Returns

nothing

sortOriginal()

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

Parameters	none
Returns	nothing

updateRow(rowIndex, changes)

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.

Returns

nothing

Extension Functions

The table has the following extension functions. See each function's doc string for usage details.

•	getBackgroundAt()

•	getDisplayTextAt()

•	getForegroundAt()