Skip to main content
Version: 8.1

Perspective - Table

Component Palette Icon:

Description‚Äč

The Table component displays database data in tabular form. Properties enable you to customize the data content, style, navigation, and user interaction of your table.

User Interaction‚Äč

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

  • New in 8.1.6
    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.
    SelectionWhen 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 properties 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.
  • EditingWhen 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 component event of the Table component.

    ‚Äč
    New in 8.1.38
    If an external source updates a cell value, which will cause either the selectedRow or selectedColumn property to change, the Table will page and scroll to the updated cell for increased visibility to Table edits.
    PagingWhen 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/LookThe 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.

    Properties‚Äč

    Most Properties have binding options. For more information on Bindings, see Types of Bindings in Perspective. This section only documents the Props Category of properties. The other Categories are described on the Perspective Component Properties page.

    NameDescriptionProperty Type
    dataCan 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
    virtualizedEnables 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
    selectionWhen 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.

    Click to see the selection properties.
    object
    filterWhere Table filtering is configured, as well as the filtered data. Click to see the filter properties.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
    headerGroupsHeader 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. The headerGroups properties include:
    • title: Text displayed in the header. Value is string.
    • span: You 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 is numeric.
    • justify: Justify content horizontally. Options are left, right, and center. Value is string.
    • align: Aligns the content vertically. Options are top, center, or bottom. Value is string.
    • style: Sets 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
    footerGroupsFooter 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. The footerGroups properties include:
    • title: Text displayed in the footer group. Value is string.
    • span: You 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 is numeric.
    • justify: Justify content horizontally. Options are left, right, and center. Value is string.
    • align: Aligns the content vertically. Options are top, center, or bottom. Value is string.
    • style: Sets 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
    columnsThe Columns property allows for granular column-by-column configurations, indicating how each column should be displayed in the table. Column configs enable the you to customize the table component's display and how users will be able to interact with the table in runtime. When a Column Config option is present, the table reflects that custom configuration. For examples on how column configurations work, see Table Column Configurations.

    You can add Column Config options by selecting Add Array Element under the Columns property. By default, the Table component displays all available data in columns, however choosing to customize column configuration will reset the table to a single column display. Columns will have to be manually added back into the table using the Add Array Element icon on the right of the Columns property. 
    • field: A string that matches this column config with a table column. This string must correspond to the default column name of the column. Value is string.
    • visible: Toggles column visibility. Allows table columns to be invisible to users, but data will be available to view params and selection. Value is boolean.
    • editable: Enables editing of all cells within this column. This can be overridden if the Editable property is set to false on an individual cell. Value is boolean.
    • render: The default render setting is auto. Can be auto, number, date, boolean, string, or view. When set to "view", the adjacent viewPath and viewParams properties can be used to specify which view, and set values on view parameters for the nested view. Value is string.
    • justify: Sets the justification for the content of the column. Options are left, center, right, or auto. The default setting is auto. Value is a string dropdown.
    • align: Sets the alignment for the content of the column. Options are top, center, or bottom. The default alignment is center. Value is 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 is boolean.
    • sortable: Enables 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 is boolean.
    • filter:
      New in 8.1.31
      Column-specific filtering configuration. Click here to see the columns.filter properties.
    • viewPath: When render mode is set to View, the table will display the view found at the view path within each cell of this column. Value is string.
    • viewParams: Parameters to feed the configured view. Will be added to implicit parameters as follows: {row:number;rowIndex:number;value:PlainObject;...viewParams}.
    • boolean: When 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 is string.
    • number: Type 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 is 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. Click here to see other progressBar properties.
    • toggleSwitch: Toggle switch configuration used when boolean is set to display as a toggle switch. Can specify selected and unselected color.
      • color.selected: Color when the toggle switch is selected. See¬†Color Selector.
      • color.unselected: Color when the toggle switch is not selected.¬† See¬†Color Selector.
    • numberFormat: A 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 is string.
    • dateFormat: Date 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 is string.
    • width: The 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 is numeric.
    • strictWidth: If enabled, the width of the column becomes fixed. Value is boolean.
    • style: Sets 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.
      Changed in 8.1.11
      As of 8.1.11, this style is applied to the header, cells, and footer of the entire column.
    • header: Header cell configuration.
      • title: Text for title of the column. Value is string.
      • justify: Setting for justification of the title. Options are right, left, and center. Value is a string dropdown
      • align: Setting for alignment of the title. Options are top, center, and bottom. Value is a string dropdown
      • style: Sets 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.
    • footer: Footer cell configuration.
      • title: Text for title of the footer. Value is string.
      • justify: Setting for justification of the title. Options are right, left, and center. Value is a string dropdown
      • align: Setting for alignment of the title. Options are top, center, and bottom. Value is a string dropdown
      • style: Sets 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.
      Implicit Properties
    • rowData: Used 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 is string.
    array
    dragOrderable
    New in 8.1.14
    When enabled, users may drag column headers to reorder columns in the table if Column Config options are present.
    value: boolean
    sortOrderThe 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 must 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
    rowsConfigures all rows in the table component. Includes settings for expanding rows into subviews. Click to see the rows properties.object
    cellsConfigures all cells in the table component.
    • allowEditOn: Enables the table cells to be edited on a single click, double click, or long press. Value is string.
    • style: Sets 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
    editingCell‚Äč
    New in 8.1.37
    The current editing cell with two properties to display the column and row when actively editing.
    nullFormat
    New in 8.1.25
    The table null format configuration used when a table contains either a "null" string value or blank cell data. Can be overridden by individual column nullFormat configuration.
    • includeNullStrings:Toggles inclusion of "null" strings in null format logic. Default value is false. Value is boolean.
    • strict: Overrides render mode and apply nullFormatValue when enabled. Value is boolean.
    • nullFormatValue: Value to be applied against null values (or "null" strings if includeNullStrings is set to true), and includes three build-in options: blank, N/A, and null.
    object
    pagerEnables table pagination. Pagination improves performance and appearance on large tables, over 1000 rows. Click to see the pager properties.object
    resizeModeSpecifies 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
    emptyMessageEmpty message configuration.
    • New in 8.1.2
      noData: Empty message configuration for when there is either no data source or the data source is empty. Click to see the noData properties.
    • New in 8.1.2
      noFilterResults: Empty message configuration for when a filter returns no results. Click to see the noFilterResults properties.
    • New in 8.1.11
      style: Sets a style that applies to the empty message display area. 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
    headerStyle
    New in 8.1.11
    Sets a style that applies to all column headers. Can be overridden by both columns.style and columns.header.style properties. 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
    headerGroupStyle
    New in 8.1.11
    Sets a style that applies to all headerGroups. 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
    bodyStyle
    New in 8.1.11
    Sets a style that applies to the table body. 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
    footerStyle
    New in 8.1.11
    Sets a style that applies to all column footers. Can be overridden by both columns.style and columns.footer.style properties. 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
    footerGroupStyle
    New in 8.1.11
    Sets a style that applies to all footerGroups. 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

    selection Properties‚Äč

    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
    selectedColumnThe 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
    style
    New in 8.1.11
    Sets a style that applies to the visual selection. This does not impact the highlight style when the mouse is hovered over 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

    filter Properties‚Äč

    NameDescriptionProperty Type
    enabledEnables filtering. Default is false.value: boolean
    textContains the text you want to filter on.value: string
    resultsThe filtered data.
  • enabled: Enables the filter results to be written back to the props. Doing so may cause performance decline. Default is false. Value is boolean.
  • data: An array of objects representing the current filtered data if filtering is enabled. Each object represents a row of the table.
  • object
    style
    New in 8.1.11
    Sets a style that applies to the filter display. 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

    columns.filter Properties‚Äč

    NameDescriptionProperty Type
    enabledWhen true, will apply any valid column filters configured here.boolean
    visibleSpecifies how the filter icon in the column header is visible to the user. Unless "never", will always be shown if a mobile device is connected.value: string dropdown
    stringString type column filter.
    • condition: The conditions by which the string filter will apply. Possible values include:
      • contains
      • equals
      • starts with
      • ends with
    • value: The specific string value that will be used for the filter. Value is string.
    object
    numberNumber type column filter.
    • condition: The conditions by which the number filter will apply. Possible values include:
      • greater than
      • greater than or equal to
      • less than
      • less than or equal to
      • equals
      • between
    • value: The specific number value that will be used for the filter. Value is string.
    object
    booleanBoolean type column filter.
      condition: The condition by which the boolean filter will apply. Possible values are true and false.
    object
    dateDate type column filter.
    • condition: The condition by which the date filter will apply. Possible values include:
      • contains
      • date equals
      • date time equals
      • before date
      • before date time
      • before or equal to date
      • before or equal to date time
      • after date
      • after date time
      • after or equal to date
      • after or equal to date time
      • between dates
      • between date times
    • value: The specific date time that will be used for the filter. Value is string.
    object

    columns.progressBar Properties‚Äč

    NameDescriptionProperty Type
    maxProgress bar maximum value.value: numeric
    barSettings for the bar.
  • color: Color of the bar and the track.¬†See¬†[Color Selector].
  • 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
    trackSettings for the track.
  • color: Color of the bar and the track.¬†See¬†[Color Selector].
  • 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
    valueSettings for the value on the Progress Bar.
  • enabled: Whether or not to show the value. Value is boolean.
  • format: Format to apply to the value. Value is string.
  • justify: Horizontal alignment of the value. Value is 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

    rows Properties‚Äč

    NameDescriptionProperty Type
    height‚Äč
    New in 8.1.6
    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
    subviewExpansionModeSpecifies how many subviews can be expanded at any given time. Options are multiple or single. Default is multiple.value: string
    subviewWhen 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.
  • enabled: Enable each row to allow toggling of the specified view. Value is boolean.
  • viewPath: A viewpath used to display a view as an expanded row. Value is 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 to the properties above, subviews will be passed implicit parameters provided by the row:
  • row: A number representing the row
  • rowIndex: A number representing 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.
  • stripedSettings for setting the striping (alternating background color) to the rows of the table.
  • enabled: When enabled (true), the table will be displayed with alternating background color to the rows of the table. Value is boolean.
  • color: Color settings:
  • object
    highlightHighlight settings.
  • enabled: When enabled (true), this feature will highlight the row that is currently selected or moused over. Value is boolean.
  • color: Highlight color for the row. See¬†Color Selector.
  • 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

    pager Properties‚Äč

    NameDescriptionProperty Type
    optionsRows 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
    style‚Äč
    New in 8.1.11
    Sets a style that applies to the pager container. 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.noData Properties‚Äč

    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 for text, background, margin and padding, border, shape and miscellaneous. 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.
  • path: Shorthand path to the icon source, in format: library/iconName. Value is string.
  • color: Color of the icon. Alternatively, you can use fill settings in the style property. Value is string.
  • style: Sets a style that applies to the icon. Full menu of¬†style options is available for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.
  • 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

    emptyMessage.noFilterResults Properties‚Äč

    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 for text, background, margin and padding, border, shape and miscellaneous. You can also specify a style class.object
    iconSettings for the icon to be displayed when a filter returns no results.
  • path: Shorthand path to the icon source, in format: library/iconName. Value is string.
  • color: Color of the icon. Alternatively, you can use fill settings in the style property. Value is string.
  • style: Sets a style that applies to the icon. 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

    Scripting‚Äč

    See the Perspective - Table Scripting page for the full list of scripting functions available for this component.

    Examples‚Äč

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