| Name | Description | Property 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.
Click to see Object data item specifics 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. Click to see the selection properties | Name | Description | Property Type |
|---|
| mode | This option determines if only one row, cell, or column can be selected at once. Options are single, single interval, and multiple interval. | value: string dropdown | | enableRowSelection | This 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 | | enableColumnSelection | This 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 | | selectedRow | The index of the first selected row, or null if none. | value: numeric | | data | An array of objects representing the current selection. | array |
| object |
| enableFiltering |
This feature was removed from Ignition in version 8.0.2
When enabled, a filtering component will be displayed above the table heading. As a user enters text into the filter, the table will update dynamically to display only rows that contain the search text. Replaced by the filter property. | value: boolean |
| filter |
The following feature is new in Ignition version 8.0.2
Click here to check out the other new features
Where Table filtering is configured, as well as the filtered data. Click to see the filter properties | Name | Description | Property Type |
|---|
| enabled | Enables filtering. Default is false. | value: boolean | | text | Contains the text you want to filter on. | value: string | | results | The filtered data. Click to see the results properties | Name | Description | Property Type |
|---|
| enabled | Enables the filter results to be written back to the props. Doing so may cause performance decline. Default is false. | value: boolean | | data | An array of objects representing the current filtered data if filtering is enabled. Each object represents a row of the table. | array |
| object |
| object |
| enableHeader | When enabled, the table header is displayed including the main table header along with the Header Groups. Default is true. | value: boolean |
| enableFooter | When selected, this enables the table footer, including the main table footer along with the Footer Groups. Default is false. | value: boolean |
| enableHeaderGroups | Enable table header groups if available. Default is false. | value: boolean |
| enableFooterGroups | Enable 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. Click to see the headerGroups properties | Name | Description | Property Type |
|---|
| title | Text displayed in the header. | value: 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: numeric | | justify | Justify content horizontally. Options are left, right, and center. | value: string dropdown | | align | Aligns the content vertically. Options are top, center, or bottom. | value: string dropdown | | 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 |
| 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. Click to see the footerGroups properties | Name | Description | Property Type |
|---|
| title | Text displayed in the footer group. | value: 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: numeric | | justify | Justify content horizontally. Options are left, right, and center. | value: string dropdown | | align | Aligns the content vertically. Options are top, center, or bottom.
| value: string | | style | Sets 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).
Click to see the columns properties | Name | Description | Property Type |
|---|
| 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: string | visible
|
The following feature is new in Ignition version 8.0.5
Click here to check out the other new features
Toggles column visibility. Allows table columns to be invisible to users, but data will be available to view params and selection. | value: 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: boolean | | render | The default render setting is auto. Can be auto, number, date, boolean, string, or view. | value: string dropdown | | justify | Sets the justification for the content of the column. Options are left, center, right, or auto. The default setting is auto. | value: string dropdown | | align | Sets the alignment for the content of the column. Options are top, center, or bottom. The default alignment is center. | value: string dropdown | | 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 | | 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: boolean | | 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: string dropdown | | viewParams | Parameters to feed the configured view. Will be added to implicit parameters as follows: {row:number;rowIndex:number;value:PlainObject;...viewParams} | object | | 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: string dropdown | | 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: string dropdown | | 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: | Name | Description | Property Type |
|---|
| max | Progress bar maximum value. | value: numeric | | bar | Settings for the bar. | Name | Description | Property Type |
|---|
color | Color of the bar and the track. See Color Selector. | color | | style |
The following feature is new in Ignition version 8.0.13
Click here to check out the other new features
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 | | width |
This feature was removed from Ignition in version 8.0.13
Width of the bar. | value: numeric | | linecap |
This feature was removed from Ignition in version 8.0.13
Linecap shape of the bar (round, square, or butt). | value: string |
| object | | track | Settings for the track. | Name | Description | Property Type |
|---|
color | Color of the bar and the track. See Color Selector. | color | | style |
The following feature is new in Ignition version 8.0.13
Click here to check out the other new features
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 | | width |
This feature was removed from Ignition in version 8.0.13
Width of the bar and the track. | value: numeric | | linecap |
This feature was removed from Ignition in version 8.0.13
Linecap shape of the bar and the track (round, square, or butt). | value: string |
| object | | value | Settings for the value on the Progress Bar. | Name | Description | Property Type |
|---|
| show |
This feature was removed from Ignition in version 8.0.13
Whether or not to show the value. | value: boolean | | color |
This feature was removed from Ignition in version 8.0.13
Color of the bar and the track. See Color Selector. | color | | enabled |
The following feature is new in Ignition version 8.0.13
Click here to check out the other new features
Whether or not to show the value. | value: boolean | | format |
The following feature is new in Ignition version 8.0.13
Click here to check out the other new features
Format to apply to the value. | value: string | | justify |
The following feature is new in Ignition version 8.0.13
Click here to check out the other new features
Horizontal alignment of the value. | value: string | | style |
The following feature is new in Ignition version 8.0.13
Click here to check out the other new features
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 | | toggleSwitch | Toggle switch configuration used when boolean is set to display as a toggle switch. Can specify selected and unselected color.| Name | Description | Property Type |
|---|
| color.selected | Color when the toggle switch is selected. See Color Selector. | color | | color.unselected | Color when the toggle switch is not selected. See Color Selector. | color |
| value: boolean | | 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: string dropdown | | 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: string dropdown | | 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: numeric | | strictWidth | If enabled, the width of the column becomes fixed. | value: 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. | object | | header | Header cell configuration. | Name | Description | Property Type |
|---|
| title | Text for title of the column. | value: string | | justify | Setting for justification of the title. Options are right, left, and center. | value: string dropdown | | align | Setting for alignment of the title. Options are top, center, and bottom. | value: 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. | object |
| value: object | | footer | Footer cell configuration. | Name | Description | Property Type |
|---|
| title | Text for title of the footer. | value: string | | justify | Setting for justification of the title. Options are right, left, and center. | value: string dropdown | | align | Setting for alignment of the title. Options are top, center, and bottom. | value: 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. | object |
| value: string |
The following feature is new in Ignition version 8.0.2
Click here to check out the other new features
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: string |
| array |
sortOrder
|
The following feature is new in Ignition version 8.0.11
Click here to check out the other new features
The default weighted order in which columns and their contents are sorted relative to other columns and their contents. Used when the component loads. | array |
| rows | Configures all rows in the table component. Click to see the rows properties | Name | Description | Property Type |
|---|
subviewExpansionMode |
The following feature is new in Ignition version 8.0.10
Click here to check out the other new features
Specifies how many subviews can be expanded at any given time. Options are multiple or single. Default is multiple. | value: dropdown list | | 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.| Name | Description | Property Type |
|---|
| enabled | Enable each row to allow toggling of the specified view. | value: boolean | | viewPath | A viewpath used to display a view as an expanded row | value: string dropdown | | viewParams | Parameters to feed the configured view. Will be added to implicit parameters as follows: {row:number;rowIndex:number;value:PlainObject;...viewParams} | object |
| object | | striped | Settings for setting the striping (alternating background color) to the rows of the table. | Name | Description | Property Type |
|---|
| enabled | When enabled (true), the table will be displayed with alternating background color to the rows of the table. | value: boolean | | color | Color settings | Name | Description | Property Type |
|---|
| even | Background 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. | Name | Description | Property Type |
|---|
| enabled | When 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 | | style | Sets 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. Click to see the cells properties. | Name | Description | Property Type |
|---|
| allowEditOn | Enables the table cells to be edited on a single click, double click, or long press. | value: string dropdown | | 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 |
| object |
| pager | Enables table pagination. Pagination improves performance and appearance on large tables, over 1000 rows. |
|
| 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 |
| style | Sets 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 |
