Perspective - Table | Ignition User Manual (2024)

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 avalueproperty. 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: [] |''
 }
} 

arrayvirtualizedEnables 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: booleanselectionWhen 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.objectfilterWhere Table filtering is configured, as well as the filtered data.Click to see the filter properties.objectenableHeaderWhen enabled, the table header is displayed including the main table header along with the Header Groups. Default is true.value: booleanenableFooterWhen selected, this enables the table footer, including the main table footer along with the Footer Groups. Default is false.value: booleanenableHeaderGroupsEnable table header groups if available.Default is false.value: booleanenableFooterGroupsEnable table footer groups if available. Default is false.value: booleanheaderGroupsHeader 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.

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

objectcolumnsThe 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, seeTable Column Configurations. You can add Column Config options by selectingAdd 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 thecursor. 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. SeeColor Selector.
• color.unselected: Color when the toggle switch is not selected. SeeColor 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 resizeis 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.

arraydragOrderable When enabled, users may drag column headers to reorder columns in the table ifColumn Configoptions are present.value: booleansortOrderThe default weighted order in which columns and their contents are sorted relative to other columns and their contents. Used when the component loads.ForsortOrderto be applied, the table must meet the following requirements:

Objects under thecolumnsarray 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 thefieldsetting set to the data item under the data property (for example, "population" in the table's default data set).

• sortablemust be enabled.

• sortmust be set to something other than none.

Once all columns have been configured, the sortOrder can be configured.Each element in thesortOrderarray is expected to be a string value representing the name of the column (as determined byfieldvalue in the columns array). For example, sorting by population first, city second, and country last, would look like the following:arrayrowsConfigures all rows in the table component. Includes settings for expanding rows into subviews.Click to see the rows properties.objectcellsConfigures 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.

objecteditingCell The current editing cell with two properties to display the column and row when actively editing.nullFormat 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.

objectpagerEnables table pagination. Pagination improves performance and appearance on large tables, over 1000 rows.Click to see the pager properties.objectresizeModeSpecifies 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: booleanstyleSets 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.objectemptyMessageEmpty 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

  See Also

  Table Rows Video at Inductive University

  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.

objectheaderStyle 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.objectheaderGroupStyle 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.objectbodyStyle 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.objectfooterStyle 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.objectfooterGroupStyle 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