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.
  
  

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 component event of the Table component.

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.

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.

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

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.

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.

columns

The 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, such as a single cell of a Table component being changed from a simple value (like a string) to an embedded view.

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.

For examples on how column configurations work, see Table Column Configurations .

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	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. 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: string
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
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
filter	The following feature is new in Ignition version 8.1.22 Click here to check out the other new features Column-specific filtering configuration. Name Description Property Type enabled When true, will apply any valid column filters configured here. boolean visible Specifies 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 string String type column filter. Name Description Property Type condition The conditions by which the string filter will apply. Possible values include: contains equals starts with ends with value: string dropdown value The specific string value that will be used for the filter. value: string object number Number type column filter. Name Description Property Type 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: string dropdown value The specific number value that will be used for the filter. value: string object boolean Boolean type column filter. Name Description Property Type condition The condition by which the boolean filter will apply. Possible values include: true false value: string dropdown object date Date type column filter. Name Description Property Type condition The condition by which the date filter will apply. Possible values include: 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: string dropdown value The specific date time that will be used for the filter. value: string object	object
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
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
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
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 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. Name Description Property 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. Name Description Property 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
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
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
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 . As of 8.1.11, this style is applied to the header, cells, and footer of the entire column.	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
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

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 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:

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

Click to see the rows properties

Name	Description	Property Type
height	The following feature is new in Ignition version 8.1.6 Click here to check out the other new features 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. 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 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. object In addition to the properties above, subviews will be passed implicit parmeters 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.	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

Configures all cells in the table component.

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

Click to see the Pager properties.

Name	Description	Property Type
options	Rows to show per pager option.	array
initialOption	Initial option to use when the table first loads. Must exist as an available option.	value: numeric
top	Enables top pager. The pager is a menu that displays the current page and Previous and Next icons for navigation.	value: boolean
bottom	Enables bottom pager. The pager is a menu that displays the current page and Previous and Next icons for navigation.	value: boolean
activePage	Represents the current active page and corresponds to the value of the page jump input field.	value: numeric
style	The following feature is new in Ignition version 8.1.11 Click here to check out the other new features Sets a style that applies to the pager container. Full menu of style options is available. You can also specify a style class .	object

Empty message configuration.

noData	The following feature is new in Ignition version 8.1.2 Click here to check out the other new features Empty message configuration for when there is either no data source or the data source is empty. Click to see the noData properties. Name Description Property Type text Text to display when there is no data source or the data source is empty. value: string textStyle Sets 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. path Shorthand path to the icon source, in format: library/iconName. value: string color Color of the icon. Alternatively, you can use fill settings in the style property. value: string style Sets a style that applies to the icon. Full menu of style options is available. You can also specify a style class . object object bottom Enables bottom pager. The pager is a menu that displays the current page and Previous and Next icons for navigation. value: boolean activePage Represents the current active page and corresponds to the value of the page jump input field. value: numeric	object
noFilterResults	The following feature is new in Ignition version 8.1.2 Click here to check out the other new features Empty message configuration for when a filter returns no results. Click to see the noFilterResults properties. Name Description Property Type text Text to display when a filter returns no results. value: string textStyle Sets 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. path Shorthand path to the icon source, in format: library/iconName. value: string color Color of the icon. Alternatively, you can use fill settings in the style property. value: string style Sets a style that applies to the icon. Full menu of style options is available. You can also specify a style class . object object	object
style	The following feature is new in Ignition version 8.1.11 Click here to check out the other new features Sets a style that applies to the empty message display area. Full menu of style options is available. You can also specify a style class .	object

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. You can also specify a style class .