Table
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":
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 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"
])
// 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. 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 export HTML 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 fpmi.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()
table
=
event.source.parent.getComponent(
"Table"
)
# Get a reference to the table table.print()
Name |
Description |
Property Type |
Scripting |
Category |
Antialias |
Draw with antialias on? Makes text smoother. |
boolean |
.antialias |
Appearance |
Auto-Resize Mode |
Determines how the table resizes the columns. |
int |
.autoResizeMode |
Behavior |
Background Color |
The background color of the component. |
Color |
.background |
Appearance |
Background Mode |
This mode determines the color that this table's cell's backgrounds will be. |
int |
.backgroundColorMode |
Appearance |
Border |
The border surrounding this component. NOTE that the border is unaffected by rotation. |
Border |
.border |
Common |
Column Attributes Data |
The dataset describing the column attributes. |
Dataset |
.columnAttributesData |
Data |
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. |
boolean |
.columnSelectionAllowed |
Behavior |
Cursor |
The mouse cursor to use when hovering over this component. |
int |
.cursorCode |
Common |
Data |
The data for this table. |
Dataset |
.data |
Data |
Data Quality |
The data quality code for any tag bindings on this component. |
int |
.dataQuality |
Data |
Edit Click Count |
The number of clicks required to start editing a cell. |
int |
.clickCountToStart |
Behavior |
Enabled |
If disabled, a component cannot be used. |
boolean |
.componentEnabled |
Common |
Font |
Font of text of this component. |
Font |
.font |
Appearance |
Foreground Color |
The foreground color of the component. |
Color |
.foreground |
Appearance |
Grid Line Color |
The color used to draw grid lines. |
Color |
.gridColor |
Appearance |
Header Font |
Font of the table's header text. |
Font |
.headerFont |
Appearance |
Header Foreground Color |
The foreground color of the table's header. |
Color |
.headerForeground |
Appearance |
Header Visible |
Whether or not the table header is visible. |
boolean |
.headerVisible |
Appearance |
Initially Selected Row |
The index of the row that should be selected by default when this table's<BR>data is filled in. |
int |
.initialRowSelection |
Behavior |
Name |
The name of this component. |
String |
.name |
Common |
Odd Row Background |
The color which odd rows will be colored if background mode is 'Alternating'. |
Color |
.oddBackground |
Appearance |
Opaque |
If false, backgrounds are not drawn. If true, backgrounds are drawn. |
boolean |
.opaque |
Common |
Properties Loading |
The number of properties currently being loaded. (Read only. Usable in bindings and scripting.) |
int |
.propertiesLoading |
Uncategorized |
Resizing Allowed |
Whether or not the user is allowed to resize table headers or not. |
boolean |
.resizingAllowed |
Behavior |
Row Height |
The height of each row, in pixels. |
int |
.rowHeight |
Appearance |
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. |
boolean |
.rowSelectionAllowed |
Behavior |
Selected Column |
The index of the first selected column, or -1 if none. |
int |
.selectedColumn |
Data |
Selected Row |
The index of the first selected row, or -1 if none. |
int |
.selectedRow |
Data |
Selection Background |
The background color of a selected cell. |
Color |
.selectionBackground |
Appearance |
Selection Foreground |
The foreground color of a selected cell. |
Color |
.selectionForeground |
Appearance |
Selection Mode |
This mode determines if only one row/cell/column can be selected at once, or single or multiple intervals. |
int |
.selectionMode |
Behavior |
Show Horizontal Grid Lines? |
Shows horizontal grid lines. |
boolean |
.showHorizontalLines |
Appearance |
Show Vertical Grid Lines? |
Shows vertical grid lines. |
boolean |
.showVerticalLines |
Appearance |
TestData |
Toggle this property to fill in the table's data with random data. |
boolean |
.test |
Misc |
Touchscreen Mode |
Controls when this table component responds if touchscreen mode is enabled. |
int |
.touchscreenMode |
Behavior |
Visible |
If disabled, the component will be hidden. |
boolean |
.visible |
Common |
.addRow(newRow)
-
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
-
Scope
Client
.deleteRow(rowIndex)
-
Description
Deletes a row from the table's dataset.
-
Parameters
int rowIndex - The index of the row to delete.
-
Return
Nothing
-
Scope
Client
.exportCSV(filename, showHeaders)
-
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.
-
Scope
Client
.getDataAsHTML(title, width)
-
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.
-
Scope
Client
.getRowsInViewOrder()
-
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
-
Scope
Client
.getSelectedColumn()
-
Description
Returns the index of the currently selected column, or -1 if none is selected.
-
Parameters
none
-
Return
int
-
Scope
Client
.getSelectedColumnCount()
-
Description
Returns the number of columns that are currently selected.
-
Parameters
none
-
Return
int
-
Scope
Client
.getSelectedRow()
-
Description
Returns the index of the currently selected row, or -1 if none is selected.
-
Parameters
none
-
Return
int
-
Scope
Client
.getSelectedRows()
-
Description
Returns a list of the indexes of the selected row, or none if none is selected.
-
Parameters
none
-
Return
List, None
-
Scope
Client
.getSelectedRowCount()
-
Description
Returns the number of rows that are currently selected.
-
Parameters
none
-
Return
int
-
Scope
Client
.isCellSelected(row, column)
-
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
-
Scope
Client
.isColumnSelected(column)
-
Description
Tests whether the given column is currently selected or not.
-
Parameters
int column- The column to test.
-
Return
boolean
-
Scope
Client
.isRowSelected(row)
-
Description
Tests whether the given row is currently selected or not.
-
Parameters
int row - The row to test.
-
Return
boolean
-
Scope
Client
.print(fitWidth, headerFormat, footerFormat, showDialog, landscape)
-
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.
-
Scope
Client
.setColumnLabel(column, label)
-
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
-
Scope
Client
.setColumnSelectionInterval(index0, index1)
-
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.
-
Scope
Client
.setColumnWidth(column, width)
-
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
-
Scope
Client
.setRowSelectionInterval(index0, index1)
-
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.
-
Scope
Client
.setSelectedColumn(column)
-
Description
Sets the given column to be the selected column.
-
Parameters
int column - Column to select.
-
Return
nothing
-
Scope
Client
.setSelectedRow(row)
-
Description
Sets the given row to be the selected row.
-
Parameters
int row - Row to select.
-
Return
nothing
-
Scope
Client
.setValue(row, column, value)
-
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
-
Scope
Client
.sortByColumn(columnName [, asc])
-
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
-
Scope
Client
.sortOriginal()
-
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
-
Scope
Client
.updateRow(rowIndex, changes)
-
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
-
Scope
Client
getBackgroundAt
-
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
-
Scope
Client
getForegroundAt
-
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
-
Scope
Client
getDisplayTextAt
-
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
-
Scope
Client
cell
cell
This event occurs when a component that can receive input, such as a text box, receives the input focus. This usually occurs when a user clicks on the component or tabs over to it.
.source |
The component that fired this event |
.oldValue |
The value that this property was before it changed. Note that not all components include an accurate oldValue in their events. |
.newValue |
The new value that this property changed to. |
.row |
The row of the dataset this cell represents. |
.column |
The column of the dataset this cell represents. |
focus
focusGained
This event occurs when a component that can receive input, such as a text box, receives the input focus. This usually occurs when a user clicks on the component or tabs over to it.
.source |
The component that fired this event. |
.oppositeComponent |
The other component involved in this focus change. That is, the component that lost focus in order for this one to gain it, or vise versa. |
focusLost
This event occurs when a component that had the input focus lost it to another component.
.source |
The component that fired this event |
.oppositeComponent |
The other component involved in this focus change. That is, the component that lost focus in order for this one to gain it, or vise versa. |
key
keyPressed
An integer that indicates whether the state was changed to "Selected" (on) or "Deselected" (off). Compare this to the event object's constants to determine what the new state is.
.source |
The component that fired this event. |
.keyCode |
The key code for this event. Used with the keyPressed and keyReleased events. See below for the key code constants. |
.keyChar |
The character that was typed. Used with the keyTyped event. |
.keyLocation |
Returns the location of the key that originated this key event. Some keys occur more than once on a keyboard, e.g. the left and right shift keys. Additionally, some keys occur on the numeric keypad. This provides a way of distinguishing such keys. See the KEY_LOCATION constants, the keyTyped event always has a location of KEY_LOCATION_UNKNOWN. |
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
keyReleased
Fires when a key is released and the source component has the input focus. Works for all characters, including non-printable ones, such as SHIFT and F3.
.source |
The component that fired this event. |
.keyCode |
The key code for this event. Used with the keyPressed and keyReleased events. See below for the key code constants. |
.keyChar |
The character that was typed. Used with the keyTyped event. |
.keyLocation |
Returns the location of the key that originated this key event. Some keys occur more than once on a keyboard, e.g. the left and right shift keys. Additionally, some keys occur on the numeric keypad. This provides a way of distinguishing such keys. See the KEY_LOCATION constants in the documentation, the keyTyped event always has a location of KEY_LOCATION_UNKNOWN. |
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
keyTyped
Fires when a key is pressed and then released when source component has the input focus. Only works for characters that can be printed on the screen.
.source |
The component that fired this event. |
.keyCode |
The key code for this event. Used with the keyPressed and keyReleased events. See below for the key code constants. |
.keyChar |
The character that was typed. Used with the keyTyped event. |
.keyLocation |
Returns the location of the key that originated this key event. Some keys occur more than once on a keyboard, e.g. the left and right shift keys. Additionally, some keys occur on the numeric keypad. This provides a way of distinguishing such keys. See the KEY_LOCATION constants in the documentation, the keyTyped event always has a location of KEY_LOCATION_UNKNOWN. |
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
mouse
mouseClicked
This event signifies a mouse click on the source component. A mouse click the combination of a mouse press and a mouse release, both of which must have occurred over the source component. Note that this event fires after the pressed and released events have fired.
.source |
The component that fired this event. |
.button |
The code for the button that caused this event to fire. |
.clickCount |
The number of mouse clicks associated with this event. |
.x |
The x-coordinate (with respect to the source component) of this mouse event. |
.y |
The y-coordinate (with respect to the source component) of this mouse event. |
.popupTrigger |
Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists. |
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
mouseEntered
This event fires when the mouse enters the space over the source component.
.source |
The component that fired this event. |
.button |
The code for the button that caused this event to fire. |
.clickCount |
The number of mouse clicks associated with this event. |
.x |
The x-coordinate (with respect to the source component) of this mouse event. |
.y |
The y-coordinate (with respect to the source component) of this mouse event. |
.popupTrigger |
Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists. |
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
mouseExited
This event fires when the mouse leaves the space over the source component.
.source |
The component that fired this event. |
.button |
The code for the button that caused this event to fire. |
.clickCount |
The number of mouse clicks associated with this event. |
.x |
The x-coordinate (with respect to the source component) of this mouse event. |
.y |
The y-coordinate (with respect to the source component) of this mouse event. |
.popupTrigger |
Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists. |
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
mousePressed
This event fires when a mouse button is pressed down on the source component.
.source |
The component that fired this event. |
.button |
The code for the button that caused this event to fire. |
.clickCount |
The number of mouse clicks associated with this event. |
.x |
The x-coordinate (with respect to the source component) of this mouse event. |
.y |
The y-coordinate (with respect to the source component) of this mouse event. |
.popupTrigger |
Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists. |
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
mouseReleased
This event fires when a mouse button is released, if that mouse button's press happened over this component.
.source |
The component that fired this event. |
.button |
The code for the button that caused this event to fire. |
.clickCount |
The number of mouse clicks associated with this event. |
.x |
The x-coordinate (with respect to the source component) of this mouse event. |
.y |
The y-coordinate (with respect to the source component) of this mouse event. |
.popupTrigger |
Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists. |
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
mouseMotion
mouseDragged
Fires when the mouse moves over a component after a button has been pushed.
.source |
The component that fired this event. |
.button |
The code for the button that caused this event to fire. |
.clickCount |
The number of mouse clicks associated with this event. |
.x |
The x-coordinate (with respect to the source component) of this mouse event. |
.y |
The y-coordinate (with respect to the source component) of this mouse event. |
.popupTrigger |
Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists. |
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
mouseMoved
Fires when the mouse moves over a component, but no buttons are pushed.
.source |
The component that fired this event. |
.button |
The code for the button that caused this event to fire. |
.clickCount |
The number of mouse clicks associated with this event. |
.x |
The x-coordinate (with respect to the source component) of this mouse event. |
.y |
The y-coordinate (with respect to the source component) of this mouse event. |
.popupTrigger |
Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists. |
.altDown |
True (1) if the Alt key was held down during this event, false (0) otherwise. |
.controlDown |
True (1) if the Control key was held down during this event, false (0) otherwise. |
.shiftDown |
True (1) if the Shift key was held down during this event, false (0) otherwise. |
propertyChange
propertyChange
Fires whenever a bindable property of the source component changes. This works for standard and custom (dynamic) properties.
.source |
The component that fired this event. |
.newValue |
The new value that this property changed to. |
.oldValue |
The value that this property was before it changed. |
.propertyName |
The name of the property that changed. NOTE: remember to always filter out these events for the property that you are looking for! Components often have many properties that change. |
This component has a customizer to manage the column configurations and the background color mapping.
#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
)