Component Palette Icon:



The Table component provides a powerful and flexible means of displaying your database data in tabular form. Properties enable you to customize the data content, style, navigation, and user interaction of your table.

The Table component properties have impact on the way a user can interact with a table in the runtime.

InteractionDescription
Column ResizingWhen configured through the designer via the corresponding column config, a column can be resized during runtime.  The resize handle exists in a 36px swath centered on the end of the header cell. Hovering over this area will change the mouse cursor to column resizing. Dragging the resize handle will display a resize guide effectively providing a visual for the new column position as the user drags.  These changes in width will not persist, and are merely for the convenience of the user.
Sorting

When sorting is enabled on a column and the table head is enabled, a sort indicator will display to the right of the header cell content.  The sort indicator will display the sort direction.

    • Single Sort - Enabled by double clicking on a header cell.

    • Multi Sort - Enabled by holding down Shift then double-clicking on multiple header cells.



As of 8.1.6 the Table component now sorts columns based on the underlying data type in the column, instead of sorting alphanumerically as if all values were string formatted. 
Selection

When selection is enabled, a user may select table data based upon the table's selection configuration.  In the browser, selection is indicated by a light blue overlay rendered on cells. The root selection, or most recently selected cell has a light blue border.  The root selection corresponds with the selected column and selected row propertiess of the table component's selection configuration.

    • Single - Single mouse click enabled.

    • Single Interval - Shift and single mouse click enabled.

    • Multiple Interval - Command/Ctrl + shift and single mouse click enabled.

Editing

When editing is enabled on an individual cell, a user can edit a cell by performing the interaction specified by the 'allow edit on' property of the table component.  When in edit mode, an editing cell with the corresponding cells content will be presented for edit. To commit this edit, the user must press the return or enter key. To exit the edit, the user may either press the escape key or select another table cell.  When an edit is committed, the edited data is sent to the cell edit extension function of the table component

Paging

When paging is enabled, a user may use the provided buttons to navigate between available pages and also jump to a specific page within range.


FilteringWhen filtering is enabled, a user may filter all of the data, not just the data being displayed when pagers are enabled, of the table component.  If paging also happens to be enabled, the table will automatically page jump if it becomes necessary so that it does not display an empty page.
Coloring/Look

The table is made up of various subareas (rows, cells, etc). To aid with styling the component, these subareas have dedicated style objects that can be used to change the look. Furthermore, some parts of the table's property model allow for more fine tuned control of the look.

For example, changing the color of all the rows on table can be accomplished by setting a background color on the rows.style  object. However, if you wanted to alternate colors on each row, you could instead look towards the rows.striped.color  object, which allows you to pick colors for even and odd rows separately. 

Removed the following, since it looks like there were never implemented. IGN-215

Freeze a ColumnIf the table head property is enabled, a user can freeze a column by holding down Alt and double clicking the column header.  This action "freezes" the column within the bounds of the table so that the user may scroll to perform data comparisons.  To unfreeze a column, hold down Alt and double click on the column header of the frozen column or of the source column.  A frozen column can be dragged horizontally within the bounds of the table by selecting and dragging with the mouse. It is possible to freeze as many columns as a user may like.  The user is not confined to freezing columns that are only visible when at scroll start position.
Freeze a RowA user may freeze an individual row by holding down 'alt' and double clicking on the desired row within the table body.  This will fix the table row within the bounds of the table. To unfreeze, perform the same operation on either the frozen row or the source row.  A frozen row can be dragged vertically within the bounds of the table by selecting and dragging with the mouse. The user is not confined to freezing rows that are only visible when at scroll start position.



NameDescriptionProperty Type
data
Can be a dataset, an array of arrays, or an array of objects. The preferred (recommended) data is either a dataset or an array of objects. Individual data items can be a string, a number, or an object with reserved keys.


Object data items must have a value property. Optionally they can also have properties to indicate the style for the object and whether it is editable.

city: {
  value: 'Folsom',
  editable: true,
  style: {
    backgroundColor: 'grey',
    classes: [] | ''
  }
}
array
virtualized

Enables virtualization of table rows, which is an optimization method that only shows a portion of the underlying data on the chart at a time.

While enabled, the table will only be populated with a smaller subset of data: just the visible rows, and a few rows above and below. The idea being the component will be populated with new records as the user scrolls down the listing, assuming there are enough records to necessitate a scrollbar. 

Enabling virtualization generally results in a performance gain in the session, in cases where the data property is populated with a large amount of content, as the table will only have to "load" a small subset of content. The trade off is that the table will need to load records as the user scrolls, so scrolling quickly may not feel as "smooth" when compared to disabling virtualization. 

value: boolean
selection

When Selection is configured, a user will be able to select table data based upon the table's selection configuration. Similar to Vision module, you can select single, single interval, and multiple interval selection modes. The current selection and selection data is written back to the table components property tree.  With the exception of the selection data property, the selection properties are bidirectional, meaning that if you were to change the value of the selected column property, it should be reflected in the table component.

NameDescriptionProperty Type
modeThis option determines if only one row, cell, or column can be selected at once. Options are single, single interval, and multiple interval.value: string 
enableRowSelectionThis option is used in conjunction with the Column Selection allowed flag in order to determine whether whole rows, whole columns, or both (single cells) are selectable. Can be set to true or false. Default is true.value: boolean
enableColumnSelectionThis option is used in conjunction with the Row Selection allowed flag in order to determine whether whole rows, whole columns, or both (single cells) are selectable . Can be set to true or false. Default is false.value: boolean
selectedColumn

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

value: numeric
selectedRowThe index of the first selected row, or null if none.value: numeric
dataAn array of objects representing the current selection.array
object
filter

Where Table filtering is configured, as well as the filtered data.

NameDescriptionProperty Type
enabledEnables filtering. Default is false.value: boolean
textContains the text you want to filter on.value: string
results

The filtered data.

NameDescriptionProperty Type
enabledEnables the filter results to be written back to the props. Doing so may cause performance decline. Default is false.value: boolean
dataAn array of objects representing the current filtered data if filtering is enabled. Each object represents a row of the table.array
object
object
enableHeaderWhen enabled, the table header is displayed including the main table header along with the Header Groups. Default is true.value: boolean
enableFooterWhen selected, this enables the table footer, including the main table footer along with the Footer Groups. Default is false.value: boolean
enableHeaderGroupsEnable table header groups if available. Default is false.value: boolean
enableFooterGroupsEnable table footer groups if available. Default is false.value: boolean
headerGroups

Header Groups are additional headers that are displayed above the main table header. Each header group equates to a single row with individual cells containing title text.

NameDescriptionProperty Type
titleText displayed in the header.value: string
spanYou can use the span property to instruct individual cells to span multiple columns of the table. However, header group cells cannot span more than the available columns. If you specify more columns in the span property than are actually available in the table, the cell will only span the remaining space.value: numeric
justifyJustify content horizontally. Options are left, right, and center.value: string
alignAligns the content vertically. Options are top, center, or bottom.value: string
styleSets a style that applies to header. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object
object
footerGroups

Footer Groups are additional footers that display above the main table footer. Each footer group equates to a single row which consists of individual cells containing title text.

NameDescriptionProperty Type
titleText displayed in the footer group.value: string
spanYou can use the span property to instruct individual cells to span multiple columns of the table. However, footer group cells cannot span more than the available columns. If you specify more columns in the span property than are actually available in the table, the cell will only span the remaining space.value: numeric
justifyJustify content horizontally. Options are left, right, and center.value: string
alignAligns the content vertically. Options are top, center, or bottom.
value: string
styleSets a style that applies to footer. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object


object
columns

The Columns property allows for granular column-by-column configurations, indicating how each column should be displayed in the table. When a Column Config option is present, the table reflects that custom configuration. When empty, the table component displays all available columns.

Column configs enable the you to customize the table component's display and how users will be able to interact with the table in the runtime.

A single cell of a Table component can be a whole view instead of just a simple value (like a string).

NameDescriptionProperty Type
fieldA string that matches this column config with a table column. This string must correspond to the default column name of the column.value: string

visible

Toggles column visibility. Allows table columns to be invisible to users, but data will be available to view params and selection.

value: boolean

editableEnables editing of all cells within this column. This can be overridden if the Editable property is set to false on an individual cell. value: boolean
renderThe default render setting is auto. Can be auto, number, date, boolean, string, or view.value: string
justifySets the justification for the content of the column. Options are left, center, right, or auto. The default setting is auto.value: string dropdown
alignSets the alignment for the content of the column. Options are top, center, or bottom. The default alignment is center.value: string
resizable
Enables columns to be resized. When enabled, users can resize columns in the runtime by hovering over the edge of the column header then dragging the cursor.
value: boolean
sortableEnables the column to be sorted. When enabled, users can double click on the column header in the run time to sort by ascending or descending order.value: boolean
viewPathWhen render mode is set to View, the table will display the view found at the view path within each cell of this column.value: string 
viewParamsParameters to feed the configured view. Will be added to implicit parameters as follows: {row:number;rowIndex:number;value:PlainObject;...viewParams}object
booleanWhen render mode is set to Boolean, you can then specify how the boolean is represented in the runtime, for example, as a checkbox, toggle switch, value, and so forth. See Toggle Switch below.value: string 
numberType of component to render for boolean. Options are number or progress. When render mode is set to Number, you can then specify whether the number is represented in the runtime as value or as progress.value: string 
progressBar

A progress bar configuration that is used when Number property is set to progress bar. You can specify the maximum value of the progress bar, as well as configure the following:

NameDescriptionProperty Type
maxProgress bar maximum value.value: numeric
bar

Settings for the bar.

NameDescriptionProperty Type

color

Color of the bar and the track.  See Color Selector.

color

style

Sets a style for the progress bar. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.

object
object
track

Settings for the track.

NameDescriptionProperty Type

color

Color of the bar and the track.  See Color Selector.

color

style

Sets a style for the progress bar. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.

object
object
value

Settings for the value on the Progress Bar.

NameDescriptionProperty Type
enabled

Whether or not to show the value.

value: boolean
format

Format to apply to the value.

value: string
justify

Horizontal alignment of the value.

value: string
style

Sets a style for the value. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.

object
object
object
toggleSwitchToggle switch configuration used when boolean is set to display as a toggle switch. Can specify selected and unselected color.


NameDescriptionProperty Type
color.selectedColor when the toggle switch is selected.  See Color Selector.color
color.unselectedColor when the toggle switch is not selected.  See Color Selector.color
value: boolean
numberFormatA number format string when render mode is set to number. Options are none, number [1,000.12], integer [1,200], four decimal precision [1.1200], percent [10.12%], scientific [1.01E+03], accounting [$(1,000.12)], financial [(1,000.12)], currency [$1,000.12], currency (rounded) [$1,012], duration [24:01:00], abbreviation [1.2k], or ordinal [100th].value: string 
dateFormatDate format string used when render mode is set to date. Options are none, date [10/15/1018], time [3:59:00 PM], or date time [10/15/2018 15:59:00]value: string 
widthThe width of this column. If resize is enabled, specifies the column width on initial load. User can override this in the runtime if the Resizable option is enabled.value: numeric
strictWidthIf enabled, the width of the column becomes fixed.value: boolean
styleSets a style for this individual column. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object
header

Header cell configuration.

NameDescriptionProperty Type
titleText for title of the column.value: string
justifySetting for justification of the title. Options are right, left, and center.value: string dropdown
alignSetting for alignment of the title. Options are top, center, and bottom.value: string dropdown
styleSets a style for this header. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object


value: object
footer

Footer cell configuration.

NameDescriptionProperty Type
titleText for title of the footer.value: string
justifySetting for justification of the title. Options are right, left, and center.value: string dropdown
alignSetting for alignment of the title. Options are top, center, and bottom.value: string dropdown
styleSets a style for this footer. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object


value: string

Implicit Properties

rowDataUsed to map parameters on a view cell to an entire row of data. The view must have a rowData object input parameter, with sub values that match the names of the columns. Then add the new view to the props.columns.0.viewPath property, and the input parameter as the props.columns.0.field property.value: string
array

sortOrder


The default weighted order in which columns and their contents are sorted relative to other columns and their contents. Used when the component loads. 

For sortOrder to be applied, the table must meet the following requirements

  • Objects under the columns array much be defined for each column in the table's underlying data property you wish to display and sort on.
    • In addition, each object under columns must have the field setting set to the data item under the data property (for example, "population" in the table's default data set). 
    • sortable must be enabled
    • sort must be set to something other than none

Once all columns have been configured, the sortOrder can be configured.

Each element in the sortOrder array is expected to be a string value representing the name of the column (as determined by field value in the columns array). For example, sorting by population first, city second, and country last, would look like the following:



array
rows

Configures all rows in the table component. Includes settings for expanding rows into subviews.

NameDescriptionProperty Type
height



A minimum height value applied to all rows. A row cannot be shorter than this value, but it can be taller based on the height of the content it displays. This property can be set to "auto" (the default value) or given a numerical value that will correspond to a minimum row height in pixels. 

value: string | numeric

subviewExpansionMode

Specifies how many subviews can be expanded at any given time. Options are multiple or single. Default is multiple.

value: string

subview
When enabled, each table row can be expanded into a subview. The Expandable Arrow opens the subview. Content of the subview is determined by the View Path property.


NameDescriptionProperty Type
enabledEnable each row to allow toggling of the specified view.value: boolean
viewPathA viewpath used to display a view as an expanded rowvalue: string
viewParams

Parameters to feed the configured view. Parameters specified here will be passed to the root of the "params" category of properties on the sub view.

In addition, the following parameters will automatically be made available to the sub view:

  • row - a number representing the row
  • rowIndex - a number reepresenting the index of the current row
  • value -  JSON Object representing the contents of the table. The value of each column in the table will be a value under this object. Example: value.population. 
object
object
striped

Settings for setting the striping (alternating background color) to the rows of the table.

NameDescriptionProperty Type
enabledWhen enabled (true), the table will be displayed with alternating background color to the rows of the table.value: boolean
color

Color settings

NameDescriptionProperty Type
evenBackground color for the even rows. See Color Selector.color
odd

Background color for the odd rows. See Color Selector.

color
object
object
highlight

Highlight settings.

NameDescriptionProperty Type
enabledWhen enabled (true), this feature will highlight the row that is currently selected or moused over.value: boolean
color

Highlight color for the row. See Color Selector.

color
object
styleSets a style that applies to every row in the table. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object
object
cells

Configures all cells in the table component.

NameDescriptionProperty Type
allowEditOnEnables the table cells to be edited on a single click, double click, or long press.value: string
styleSets a style that applies to every cell in the table. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object
object
pager

Enables table pagination. Pagination improves performance and appearance on large tables, over 1000 rows.

NameDescriptionProperty Type
options Rows to show per pager option.array
initialOptionInitial option to use when the table first loads. Must exist as an available option.value: numeric
topEnables top pager. The pager is a menu that displays the current page and Previous and Next icons for navigation. value: boolean
bottomEnables bottom pager. The pager is a menu that displays the current page and Previous and Next icons for navigation. value: boolean
activePageRepresents the current active page and corresponds to the value of the page jump input field.value: numeric

resizeMode

Specifies whether the table resize mode is either Fill or Fixed. In Fill resized mode, the total width of all the columns cannot be less than the width of the table. In Fixed resized mode, the total width of all the columns can be less than the width of the table.

value: boolean
styleSets a style that applies to the component. Full menu of style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object
emptyMessage

Empty message configuration.

noData


Empty message configuration for when there is either no data source or the data source is empty.

NameDescriptionProperty Type
textText to display when there is no data source or the data source is empty.value: string
textStyleSets a style that applies to the text. Full menu of style options is available. You can also specify a style class.object
icon

 Settings for the icon to be displayed when there is no data source or the data source is empty.

pathShorthand path to the icon source, in format: library/iconName.value: string
colorColor of the icon. Alternatively, you can use fill settings in the style property.value: string
styleSets a style that applies to the icon. Full menu of style options is available. You can also specify a style class.object
object
bottomEnables bottom pager. The pager is a menu that displays the current page and Previous and Next icons for navigation. value: boolean
activePageRepresents the current active page and corresponds to the value of the page jump input field.value: numeric
object
noFilterResults


Empty message configuration for when a filter returns no results.

NameDescriptionProperty Type
textText to display when a filter returns no results.value: string
textStyleSets a style that applies to the text. Full menu of style options is available. You can also specify a style class.object
icon

Settings for the icon to be displayed when a filter returns no results.

pathShorthand path to the icon source, in format: library/iconName.value: string
colorColor of the icon. Alternatively, you can use fill settings in the style property.value: string
styleSets a style that applies to the icon. Full menu of style options is available. You can also specify a style class.object
object
object

The Perspective Event Types Reference page describes all the possible component event types for Perspective components. Not all component events support each Perspective component. The Component Events and Actions page shows how to configure events and actions on a Perspective component. Component scripting is handled separately and can be accessed from the Component menubar or by right clicking on the component.

This onEditCellCommit event is used with a runAction script on a table to take user entry and store it in the table or a database.

Provides a chance do something once a user has typed something into a cell. The user must commit the new value (generally achieved by pressing the Enter/Return key) before the event will trigger.

Additionally, the cell must first be editable (props.data.[rowNumber].[columnName].editable is set to true). The first cell in the default dataset on a newly created instance of the component demonstrates where the editable property must be positioned.


This component event is designed to be used in tandem with a script runAction. Within the script action, special properties and methods are available on the event object, which is passed to the script action as a parameter.

  • Object Path

event.column

  • Type

String

  • Description

The name of the column under which the cell was edited.

  • Object Path

event.row

  • Type

Number

  • Description

The row index number (zero based) of the cell that was edited.

  • Object Path

event.value

  • Type

Any

  • Description

The value that was typed into the cell.

    # This example will set the value of a cell, based on what the user typed into it.
    
	# Get the value that was typed into the cell
	valueToSet = event.value
	
	# We need to set a value in a particular cell. The event object contains row and column properties
	#  that report the position of the cell that was edited.
	self.props.data[event.row][event.column] = valueToSet

This onSelectionChange event will trigger when the selection in the chart changes.


The onSelectionChange event will fire on startup or mount if props do not equal the table components default selection config.

This component event is designed to be used in tandem with a script runAction. Within the script action, special properties and methods are available on the event object, which is passed to the script action as a parameter.

  • Object Path

event.selectedColumn

  • Type

String or null

  • Description

The name of the column that the selected cell is located under.

  • Object Path

event.selectedRow

  • Type

Number or null

  • Description

The row index of the selected row (zero based)

  • Object Path

event.data

  • Type

Array

  • Description

Represents the currently selected entries. The contents of the array is based on the enabledRowSelection and enableColumnSelection properties as represented on the table below. The actual resulting value may include additional values if the selection mode on the table is set to "single interval" or "multiple interval".

enabledRowSelectionenableColumnSelectionResulting return typeExample Output
TrueFalse

An array containing a number of JSON objects that each represent a single row.

Each JSON object contains one key-value pair for each column on the table.

[{"city":"Folsom","country":"United States", "population":77271}]
FalseTrue

An array of JSON objects, where each object represents a separate row in the selected column.

Each object contains a single key-value pair, where the key is the column name and the value is the value of the cell.

[{"city":"Folsom"}, {"city":"Helsinki"},
{"city":"Jakarta"},]
TrueTrueAn array containing a single JSON object, which can be treated like a Python dictionary.
[{"city":"Folsom"}]

This onEditCellStart event fires when the user starts editing a cell. For onEditCellStart , the value is the initial value before any edits.


This component event is designed to be used in tandem with a script runAction. Within the script action, special properties and methods are available on the event object, which is passed to the script action as a parameter.

  • Object Path

event.column

  • Type

String or number

  • Description

The column the editing cell is positioned under.

  • Object Path

event.row

  • Type

Number

  • Description

The row index of the selected row (zero based).

  • Object Path

event.rowIndex

  • Type

Number

  • Description

The row index as it is represented in the current visible data. Useful in cases where some of the rows are hidden, such as when filtering.

  • Object Path

event.value

  • Type

Any

  • Description

The value of the cell before editing began.

This onEditCellCancel event is fired when the user has canceled a cell edit and has exited editing mode by effectively pressing the escape key.

This component event is designed to be used in tandem with a script runAction. Within the script action, special properties and methods are available on the event object, which is passed to the script action as a parameter.

  • Object Path

event.column

  • Type

String

  • Description

The column name of the cell being edited.

  • Object Path

event.row

  • Type

Number

  • Description

The row index of the selected row (zero based).

  • Object Path

event.rowIndex

  • Type

Number

  • Description

The row index as it is represented in the current visible data. Useful in cases where some of the rows are hidden, such as when filtering.

  • Object Path

event.value

  • Type

Any

  • Description

The value of the cell before editing began.

This onRowClick event is fired when a row in the table is clicked.

This component event is designed to be used in tandem with a script runAction. Within the script action, special properties and methods are available on the event object, which is passed to the script action as a parameter.

  • Object Path

event.row

  • Type

Number

  • Description

The row index of the selected row (zero based).

  • Object Path

event.rowIndex

  • Type

Number

  • Description

The row index as it is represented in the current visible data. Useful in cases where some of the rows are hidden, such as when filtering.

  • Object Path

event.value

  • Type

PlainObject

  • Description

The rows value as a JSON object.

This onRowDoubleClick event is triggered when a row in the table is double clicked.

This component event is designed to be used in tandem with a script runAction. Within the script action, special properties and methods are available on the event object, which is passed to the script action as a parameter.

  • Object Path

event.row

  • Type

Number

  • Description

The row index of the selected row (zero based).

  • Object Path

event.rowIndex

  • Type

Number

  • Description

The row index as it is represented in the current visible data. Useful in cases where some of the rows are hidden, such as when filtering.

  • Object Path

event.value

  • Type

PlainObject

  • Description

The rows value as a JSON object.

This onSubviewExpand event is triggered when a row subview is expanded.

This component event is designed to be used in tandem with a script runAction. Within the script action, special properties and methods are available on the event object, which is passed to the script action as a parameter.

  • Object Path

event.row

  • Type

Number

  • Description

The row index of the selected row (zero based).

  • Object Path

event.rowIndex

  • Type

Number

  • Description

The row index as it is represented in the current visible data. Useful in cases where some of the rows are hidden, such as when filtering.

  • Object Path

event.value

  • Type

PlainObject

  • Description

The rows value as a JSON object.

This onSubviewCollapse event is triggered when a row subview is collapsed.

This component event is designed to be used in tandem with a script runAction. Within the script action, special properties and methods are available on the event object, which is passed to the script action as a parameter.

  • Object Path

event.row

  • Type

Number

  • Description

The row index of the selected row (zero based).

  • Object Path

event.rowIndex

  • Type

Number

  • Description

The row index as it is represented in the current visible data. Useful in cases where some of the rows are hidden, such as when filtering.

  • Object Path

event.value

  • Type

PlainObject

  • Description

The rows value as a JSON object.

For examples of the Table component, please see the following pages: