Table

The table object displays data in a tabular format. It can operate in two modes: items mode and datasource mode, which are controlled by the Data Mode attribute.

In items mode, the table's data is populated with a uiSet of the Items attribute.

In datasource mode, the table's data is populated with a connected datasource, set in the Datasource ID attribute. The table's columns are defined in the Columns attribute.

Commands

If a Command Name is specified, the table sends commands to the server when actions are performed.

In items mode, commands are always sent for the following actions: add, edit, delete, move, import.

In datasource mode, a command is always sent for move actions, while add, edit and delete actions are not supported as commands, but are handled through the datasource callbacks (dataSourceInsert, dataSourceUpdate, dataSourceDelete).

For additional information on commands and their parameters, see the Commands attribute.

Attributes

Common

ID

Sets the object's ID.

The ID identifies the object and is used to reference it in UISet actions, allowing to change its attributes dynamically.

The ID is not unique, it can be shared among multiple objects to quickly change a common attribute.

IDs can't be changed with a UISet action, but they can have a Value Binding assigned to them. Value Bindings on IDs allow an object to be dinamically attached to a set of attribute values.

E.g. the following Value Binding switches the ID of the object between mybutton1 and mybutton2 based on the value of the UISet button.address:

Value binding:

="mybutton" + ui('button', 'address')

UISet:

UISet('button', 'address', '1') switches the ID to mybutton1

UISet('button', 'address', '2') switches the ID to mybutton2

Position and Size

Position

Sets the object's position.

Attribute Values

Value	Description	Example
x<left>y<top>	Specify left/top coordinates in pixels.	x10y20

This attribute is available when parent's layout is neither "flex" nor "grid".

When parent's layout is neither "flex" nor "grid", this attribute defaults to x0y0.

Flex Grow

Specifies if the objects should grow to fill the available space.

Attribute Values

Value	Description
false	Default value. Objects do not grow to fill the available space.
true	Objects expand to fill the available space.

This attribute is available when parent's layout is "flex".

The default value is: false.

Flex Shrink

Specifies if the objects should shrink to fit the available space.

Attribute Values

Value	Description
false	Default value. Objects do not shrink to fit the available space.
true	Objects shrink to fit the available space.

This attribute is available when parent's layout is "flex".

The default value is: false.

Column

Specifies the starting column of the object inside a grid container.

Minimum value is 1.

Attribute Values

Value	Description
<int>	Column index starting from 1.

This attribute is available when parent's layout is "grid".

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Column Span

Specifies how many grid columns the object spans.

Minimum value is 1.

Attribute Values

Value	Description
<int>	Column span starting from 1.

This attribute is available when parent's layout is "grid".

When parent's layout is "grid", this attribute defaults to 1.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Row

Specifies the starting row of the object inside a grid container.

Minimum value is 1.

Attribute Values

Value	Description
[empty]	Auto placement by the grid.
<int>	Row index starting from 1.

This attribute is available when parent's layout is "grid".

When parent's layout is "grid", this attribute defaults to auto.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Row Span

Specifies how many grid rows the object spans.

Minimum value is 1.

Attribute Values

Value	Description
<int>	Row span starting from 1.

This attribute is available when parent's layout is "grid".

When parent's layout is "grid", this attribute defaults to 1.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Width

Sets the object's width in pixels.

Minimum value is 100.

The default value is: 300.

Height

Sets the object's height in pixels.

Minimum value is 36.

The default value is: 200.

Data

Data Mode

Specifies the object's data mode, which controls the way the table's data is populated.

In items mode, the data is populated with a uiSet of the items attribute. In this mode, commands are sent to the server for the following user actions: add, edit, move and delete.

Attribute Values

Value	Description
items	Default value. Data is populated using the "items" attribute.
datasource	Data is populated with a datasource.

The default value is: items.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Datasource ID

The ID of the datasource to which the table is connected.

Attribute Values

Value	Description
[Datasource ID]	The datasource ID as defined on the server.

This attribute is available when datamode is "datasource".

Items

Specifies the table's content with an array of arrays (rows, columns).

Attribute Values

Value	Description	Example
<array>	The array of rows and columns.	[[1,"one"],[2,"two"]]

This attribute is available when datamode is "items".

Command Name

Specifies the command name used to send all table related commands (see the Command attribute).

Attribute Values

Value	Description
<string>	Command name.

By default, this attribute uses the id attribute.

Commands

Specifies the set of commands that are sent to the server when the user performs specific actions.

In items mode, the following commands are always sent: add, edit, delete, move, import.

In datasource mode, the move command is always sent, while add, edit and delete actions are not supported as commands, but are handled through the datasource callbacks (dataSourceInsert, dataSourceUpdate, dataSourceDelete).

Each command is sent with the name specified in the Command Name attribute, or table ID, and a JSON parameter based on the command type. When the command is triggered from the edit popup, the JSON also contains a popup property whose value matches the edit popup's ID (default add, edit, or a custom Edit Popups entry). This lets the server know exactly which popup initiated the action.

All commands involving the edit popup (pre-add, pre-edit, pre-duplicate, edit-change) can also specify a field property in the JSON reply, which applies changes to the edit popup fields. Each field is identified by its name, and the properties are a selection of the column attributes. Note: some attributes trigger a redraw of the edit popup. The following attributes can be specified:

• type - the field type (redraws the edit popup)
• visible - whether the field is visible (redraws the edit popup)
• value - the value of the field
• enabled - whether the field is enabled
• placeholder - the placeholder of the field
• readonly - whether the field is readonly
• items - the items of a select field in "items" mode
• list - the items of a select field in "list" mode
• prefix - the prefix of the field
• suffix - the suffix of the field
• clearbutton - whether the clear button is visible
• required - whether the field is required
• focustooltip - the tooltip of the field when focused
• error - set or clear the field error state (true, false, or an error message string)
• multienabled - if multiple rows are being edited, whether the field is checked for editing

E.g. { "fields": { "field1": { "value": "new value", "enabled": "false", "type": "select", ... }, ... } }

Pre-commands (prefixed with pre-) can be be cancelled by the server, for example in case it's not allowed, by adding the cancel property to the JSON reply.

{ "cancel": true }

Otherwise the action is performed locally by the client.

Pre-commands can also specify an editpopup property in the JSON reply to dynamically select a custom edit popup (defined in the Edit Popups attribute) to open instead of the default one: { "editpopup": "<popup id>" }

All standard command reply parameters are also supported (page, error, etc.). For example, to cancel an edit action and display a modal popup, the server can send:

{ "cancel": "true", "page": "page:error_popup" }

Attribute Values

Value	Description
pre-add	Sends a command when the user starts adding a row, including the default values of all fields. Command parameter: { "action": "pre-add", "values": { "<field name>": "<value>", ... } } In the JSON reply, the server can specify UISets for specific edit fields attributes: { "fields": { "<field name>": { "value": "value", "enabled": "false", "type":"select", ... }, ... } } The server can also specify a custom edit popup to open (defined in the Edit Popups attribute): { "editpopup": "<popup id>", "fields": { ... } } This action can be canceled by the server, by specifying in the JSON reply: { "cancel": "true" } Note: this command will block the UI until the server replies.
pre-edit	Sends a command when the user starts editing a row, including the row key and the current values of all fields. Command parameter: { "action": "pre-edit", "key": "<row key>", "values": { "<field name>": "<value>", ... } } The key property is the key of the edited row. For multiple row updates, the key property is replaced by the keys property, which is an array of keys: { "action": "pre-edit", "keys": ["<row key>", ...], "values": { "<field name>": "<value>", ... } } For inline edits, an inline property is added to the command parameter: { "action": "pre-edit", "key": "<row key>", "field": "<field name>", "values": { "<field name>": "<value>" }, "inline": "true" } In the JSON reply, the server can specify UISets for specific edit fields attributes: { "fields": { "<field name>": { "value": "value", "enabled": "false", "type":"select", ... }, ... } } The server can also specify a custom edit popup to open (defined in the Edit Popups attribute): { "editpopup": "<popup id>", "fields": { ... } } This action can be canceled by the server, by specifying in the JSON reply: { "cancel": "true" } Note: this command will block the UI until the server replies.
pre-delete	Sends a command when the user starts deleting a row, including the row key. This event is sent only if Delete Confirm is not false. Command parameter: { "action": "pre-delete", "keys": ["<row key>", ...] } The keys property is an array of all the deleted rows' keys. This action can be canceled by the server, by specifying in the JSON reply: { "cancel": "true" } Note: this command will block the UI until the server replies.
pre-duplicate	Sends a command when the user starts duplicating a row, including the row key and the current values of all fields. Command parameter: { "action": "pre-duplicate", "key": "<row key>", "values": { "<field name>": "<value>", ... } } The key property is the key of the edited row. For multiple row updates, the key property is replaced by the keys property, which is an array of keys: { "action": "pre-duplicate", "keys": ["<row key>", ...], "values": { "<field name>": "<value>", ... } } In the JSON reply, the server can specify UISets for specific edit fields attributes: { "<field name>": { "value": "value", "enabled": "false", "type": "select", ... }, ... } The server can also specify a custom edit popup to open (defined in the Edit Popups attribute): { "editpopup": "<popup id>", "fields": { ... } } This action can be canceled by the server, by specifying in the JSON reply: { "cancel": "true" } Note: this command will block the UI until the server replies.
add	Sends a command when the user inserts a row (confirms the add). The command parameter is a JSON: { "action": "add", "data": { "<field name>": "<value>", ... } } The data property is a JSON containing the values of the fields of the inserted row.
edit	Sends a command when the user updates a row (confirms the edit). The command parameter is a JSON: { "action": "edit", "key": "<row key>", "data": { "<field name>":"<value>", ... } } The key property is the key of the updated row. The data property is a JSON containing the values of the fields of the updated row. For multiple row updates, the key property is replaced by the keys property, which is an array of keys: { "action": "edit", "keys": ["<row key>", ...], "data": { "<field name>": "<value>", ... } } For inline edits, an inline property is added to the command parameter: { "action": "edit", "key": "<row key>", "field": "<field name>", "value": "<value>", "inline": "true" }.
delete	Sends a command when the user confirms the deletion of a row. The command parameter is a JSON: { "action": "delete", "keys": ["<row key>", ...] } The keys property is an array of all the deleted rows' keys.
move	Sends a command when the user attempts to move a row. The command parameter is a JSON: { "action": "move", "key": "<row key>", "after": "<row key>" } or { "action": "move", "key": "<row key>", "before": "<row key>" } The key property is the key of the moved row. To specify the position of the row, use either the after or before property. The after property is the key of the row after which the row is moved. The before property is the key of the row before which the row is moved.
import	Sends a command when the user imports data from a file. The command parameter is a JSON: { "action": "import", "columns": "<column ids>", "rows": [...] } The columns property is a comma-separated list of column ids. The rows property is an array of arrays, each array representing a row.
edit-change	Sends a command when the user changes the value of a field in the add/edit popup. The command includes the row key, the id of the edited field and the current values of all fields, including disabled ones. In multi-edit mode if a field has multiple values (and the field's edit checkbox is not checked), a null value is sent. Command parameter: { "action": "edit-change", "key": "<row key>", "field": "<field name>", "values": { "<field name>": "<value>", ... } } The key property is the key of the edited row. For multiple row updates, the key property is replaced by the keys property, which is an array of keys: { "action": "edit-change", "keys": ["<row key>", ...], "field": "<field name>", "values": { "<field name>": "<value>", ... } } For inline edits, an inline property is added to the command parameter: { "action": "edit-change", "key": "<row key>", "field": "<field name>", "value": "<value>", "inline": "true" } In the JSON reply, the server can specify UISets for specific edit fields attributes: { "fields": { "<field name>": { "value": "value", "enabled": "false", "type":"select", ... }, ... } }.
filter	Sends a command when the user changes the filter. Command parameter: { "action": "filter", "filter": "<filter>" } For column filters: { "action": "filter", "column": "<column index>", "columnFilters": { "": "<filter>" }.
select	Sends a command when the user changes the selected rows. Command parameter: { "action": "select", "keys": [...] } The keys property is an array of all the selected rows' keys.
sort	Sends a command when the user changes the sort. Command parameter: { "action": "sort", "column": "<column index>", "direction": "asc&#124;desc", "caseSensitive": "<true&#124;false>" } The column property is the index of the column that is sorted. The direction property is the sort direction. The caseSensitive property is true if the sort is case sensitive. The sort is always local, but this command is useful in case the table is showing only a subset of the data, and the server needs to know the current sort order to return the correct data.
row-click	Sent only when rowaction is set to command. Sends a command when the user clicks on a row. Command parameter: { "action": "row-click", "key": "<row key>" } The key property is the key of the clicked row.

Default behavior:

• When datamode is "items", this attribute defaults to add,edit,delete,move,row-click.
• When datamode is "datasource", this attribute defaults to move,row-click.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Columns

Columns

Specifies the table's columns.

Attribute Values

Value	Description	Example
<JSON array>	A JSON defining the columns.	[{"label":"Temperature","dataindex":"0","width":"120"}]

Frozen Left

Freezes a specified number of columns on the left.

Frozen columns won't move horizontally when the content of the table is scrolled and will overlap scrolling columns.

Columns that have the Hidden attribute set to false are not counted, so for example if the first column is hidden, Frozen Left = 1 will freeze the second column.

Columns with a variable Hidden attribute (e.g. it has value binding or it's set to edit etc.), are counted as visible columns

Minimum value is 0.

Attribute Values

Value	Description
<int>	The number of columns to freeze.

The default value is: 0.

Frozen Right

Freezes a specified number of columns on the right.

Frozen columns won't move horizontally when the content of the table is scrolled and will overlap scrolling columns.

Columns that have the Hidden attribute set to false are not counted, so for example if the last column is hidden, Frozen Right = 1 will freeze the second column.

Columns with a variable Hidden attribute (e.g. it has value binding or it's set to edit etc.), are counted as visible columns

Minimum value is 0.

Attribute Values

Value	Description
<int>	The number of columns to freeze.

The default value is: 0.

Resizable Columns

Specifies if the columns can be resized by the user.

Attribute Values

Value	Description
false	Default value. Columns can't be resized.
true	Columns can be resized.
save	Columns can be resized and the new size is stored locally (in the localStorage of the browser).

The default value is: false.

Sortable

Specifies if the table's rows are sortable by column. A command is sent if sort is specified in the Extra Commands attribute. This is useful for example when the table is showing only a subset of the data, and the server needs to know the current sort order to return the correct data.

Attribute Values

Value	Description
false	Default value. Rows can't be sorted.
true	Rows can be sorted.

The default value is: false.

Sort Column

Specifies the index of a column to apply a local sort. Hidden columns are counted too.

Minimum value is 0.

Attribute Values

Value	Description
<int>	The index of the column to be sorted.

This attribute is available when sortable is not "false".

When sortable is not "false", this attribute defaults to 0.

Sort Direction

If "Sort Column" is specified, specifies the sort order to apply a local sort.

Attribute Values

Value	Description
none	Default value. Not sorted.
asc	Sorted in ascending order.
desc	Sorted in descending order.

This attribute is available when sortable is not "false".

The default value is: none.

Case Sensitive Sort

Specifies whether the local sort is case sensitive.

Attribute Values

Value	Description
false	Default value. Case insensitive.
true	Case sensitive.

This attribute is available when sortable is "local".

When sortable is "local", this attribute defaults to false.

Rows

Row Height

Row height in pixels.

Attribute Values

Value	Description	Example
<integer>	Row height in pixels.	30

The default value is: 26.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Row CSS Class Field

Specifies a data field used to customize row appearance. The field's value is applied as a CSS class. Custom CSS Classes are specified within the ()[custom.css] file.

Attribute Values

Value	Description	Example
<index>	If the data mode is items, this is the index of the column in items, that will be used as CSS class.	0
<name>	If the data mode is datasource, this is the name of the column in the specified datasource, that will be used as CSS class.	name

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Row Action

Specifies the action to perform when a row is clicked.

If a cell is selectable or already has an action (e.g. button, switch...), the row action is not triggered when clicking on the cell.

Attribute Values

Value	Description
auto	Default value. Select the row, if there's a selection column.
edit	Edit the row. Enabled only in edit mode.
inline-edit	Edit the cell inline. Enabled only in edit mode.
select	Select the row.
command	Send a command with the name specified in the Command Name attribute and { "action": "row-click", "key": "<row key>" } as parameter. Check the Commandsattribute for more information.
none	No action.

The default value is: auto.

Selection

Specifies the list of selected rows' key values.

Attribute Values

Value	Description
<comma-separated list>	List of key values to select.

Edit Options

Edit Mode

Controls the edit mode. When edit mode is true, the edit, add, delete, import buttons appear (both in the bottom toolbar and in the columns, if defined).

Attribute Values

Value	Description
false	Default value. Edit not enabled.
true	Edit enabled.
toggle	Edit mode can be toggled by the user.

The default value is: false.

Add Enabled

Specifies if the user can add items.

Attribute Values

Value	Description
true	Default value. Adding items is enabled.
false	Adding items is disabled.

The default value is: true.

Edit Enabled

Specifies if the user can edit items.

Attribute Values

Value	Description
true	Default value. Editing items is enabled.
false	Editing items is disabled.

The default value is: true.

Multi Edit Enabled

Specifies if the user can edit multiple items.

Attribute Values

Value	Description
true	Default value. Editing multiple items is enabled.
false	Editing multiple items is disabled.

This attribute is available when editenabled is "true".

When editenabled is "true", this attribute defaults to true.

Delete Enabled

Specifies if the user can delete items.

Attribute Values

Value	Description
true	Default value. Deleting items is enabled.
false	Deleting items is disabled.

The default value is: true.

Delete Confirm

Requires a confirmation before deleting the item(s).

Attribute Values

Value	Description
false	Default value. No confirmation, the item(s) is deleted right away.
doubleclick	A second click (or touch or enter key) is required to confirm the deletion.
popup	A popup is displayed to ask for confirmation.

The default value is: false.

Delete Confirm Message

The confirmation message to be displayed if the "confirm" attribute is set to "popup".

Attribute Values

Value	Description	Example
<string>	The message to be displayed in the confirm popup.	Are you sure?

This attribute is available when deleteconfirm is "popup".

Move Enabled

Specifies if the user can move items.

Attribute Values

Value	Description
true	Default value. Moving items is enabled.
false	Moving items is disabled.

The default value is: true.

Import Enabled

Specifies if the user can import items from a CSV file.

Attribute Values

Value	Description
true	Default value. Import is enabled.
false	Import is disabled.

The default value is: true.

Export Enabled

Specifies if the user can export items to a CSV file.

Attribute Values

Value	Description
true	Default value. Export is enabled.
false	Export is disabled.

The default value is: true.

Edit Popup

Edit Popup Width

Specifies the edit popup's width in pixels.

Minimum value is 0.

Attribute Values

Value	Description
<int>	Width in pixels.

The default value is: 300.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Edit Popup Field Width

Specifies the width of the edit popup's fields in pixels.

Minimum value is 0.

Attribute Values

Value	Description
<int>	Width in pixels.

The default value is: auto.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Edit Popup Field Height

Specifies the default height of the edit popup's fields in pixels.

Minimum value is 16.

Attribute Values

Value	Description
<int>	Height in pixels.

The default value is: 24.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Display Required Fields

Displays a symbol next to required fields' labels on the add/edit popup.

Attribute Values

Value	Description
true	Default value. Display.
false	Hide.

The default value is: true.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Edit Popups

Configures custom edit popup forms for table add/edit/duplicate actions.

Each popup has an ID that is used to reference it in two ways:

Client-side: A button column with action="edit" can specify an Edit Popup attribute to open a custom popup when clicked.

Server-side: The server can respond to pre-add, pre-edit, or pre-duplicate commands with { "editpopup": "popup-id" } to dynamically select which popup to open.

The popup ID is also sent back with every edit popup command through the popup property, so the server knows which popup initiated the action.

Attribute Values

Value	Description
<JSON>	A JSON defining the edit popup overrides.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Toolbar

Item Label

Specifies a label to use when referring to the items. It's used in the bottom toolbar for the item count and elsewhere Singular and plural words can be specified by separating them with a pipe character ("|")

Attribute Values

Value	Description	Example
<string>	The item labels.	`person

The default value is: item|items.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Show Item Count

Shows the item count in the bottom toolbar.

Attribute Values

Value	Description
true	Default value. Show.
false	Hide.

The default value is: true.

Show Top Bottom Buttons

Shows up/down buttons to scroll the table to the top/bottom.

Attribute Values

Value	Description
true	Show.
false	Default value. Hide.

The default value is: false.

Filter

Filter

Displays an input field for filtering the items. After typing a value in the field or setting the Filter Value attribute, any item that does not match the input will be hidden. A match occurs when the filter value is found anywhere within any item's fields ('value', 'label', etc). Hidden columns are skipped. Individual columns can specify if they should be included in the filter or if the filter applies to the original/formatted value with the format attribute.

Attribute Values

Value	Description
false	Default value. Hides the filter field.
true	Display the filter field.
toggle	User can toggle the filter field's visibility.

The default value is: false.

Filter Placeholder

Specifies a short hint that is displayed in the filter field before the user enters a value. Describes the expected value of an input field (e.g. a sample value or a short description of the expected format)

Attribute Values

Value	Description
<string>	A short hint.

This attribute is available when filter is one of "true" or "toggle".

Filter Value

Specifies a string used as filter value. It's applied even if the filter field is hidden.

Attribute Values

Value	Description	Example
<string>	The filter string.	Jan 2015

Column Filters

Displays input fields on each column that filter the items.

Attribute Values

Value	Description
false	Default value. Hides the columns' filter fields.
true	Display the columns' filter fields.
toggle	User can toggle the columns' filter fields visibility.

The default value is: false.

Column Filters Value

Specifies the values of the per-column filters as a comma-separated list. Each value is matched to a declared column by position, so hidden columns still occupy a position in the list.

This attribute is applied even if the column filter fields are not visible. However, when filtering rows, only visible columns are evaluated. Values assigned to hidden columns are ignored. Matching is case-insensitive.

A column with Filter=false is always excluded from filtering. Individual columns can also specify whether the filter applies to the original or formatted value with the Filter column attribute.

Attribute Values

Value	Description
<comma-separated list>	List of filter values by declared column order. Hidden columns still take a position in the list, even though their values are not used for matching.

Column Filters Preset

Specifies a hidden base filter that is applied before the user-defined filters. It is always active and is not shown in the column filter fields.

Like Column Filters Value, this attribute is a comma-separated list mapped by declared column position, so hidden columns still occupy a position in the list. Unlike Column Filters Value, preset filters are also applied to hidden columns. Matching is case-insensitive.

This makes it possible to restrict the table using data that is not shown to the user. A column with Filter=false is still excluded from preset filtering.

Attribute Values

Value	Description
<comma-separated list>	List of preset filter values by declared column order. Hidden columns still take a position in the list and their values are also used for matching.

Import/Export

Import Preview

Displays a popup that previews how data is interpreted. It shows the number of items that will be inserted, updated, deleted, skipped and shows errors.

Note: the preview is based on the current datasource data set. It may not be accurate if the data set is filtered server side.

Attribute Values

Value	Description
false	False.
true	Default value. True.

This attribute is available when importenabled is "true".

When importenabled is "true", this attribute defaults to true.

Import Settings

Shows a settings option on the preview popup, that allows the user to configure how the file is parsed.

User settings have the priority over the initial settings.

Attribute Values

Value	Description
false	Default value. False.
true	True.

This attribute is available when importenabled is "true" and importpreview is "true".

When importenabled is "true" and importpreview is "true", this attribute defaults to false.

Export Filename

Specifies the filename of the exported CSV file, without path or extension.

The default is "table_<id>_<date>" where id is from either the object or the datasource.

This attribute is available when exportenabled is "true".

CSV Separator

Specifies the CSV separator.

Attribute Values

Value	Description	Example
<character>	A single character.	;

This attribute is available when importenabled is "true" or exportenabled is "true".

When importenabled is "true" or exportenabled is "true", this attribute defaults to ,.

CSV Enclose

Specifies the CSV enclose character.

Attribute Values

Value	Description	Example
<character>	CSV enclose character.	'

This attribute is available when importenabled is "true" or exportenabled is "true".

When importenabled is "true" or exportenabled is "true", this attribute defaults to ".

CSV Escape

Specifies the CSV escape character.

Attribute Values

Value	Description	Example
<character>	Escape character.	\

This attribute is available when importenabled is "true" or exportenabled is "true".

When importenabled is "true" or exportenabled is "true", this attribute defaults to ".

CSV New Line

Specifies the CSV new line character.

Attribute Values

Value	Description	Example
<string>	New line character.	\r\n

This attribute is available when importenabled is "true" or exportenabled is "true".

When importenabled is "true" or exportenabled is "true", this attribute defaults to \n.

Styling

Panel

Shows a panel that frames the object. Its style can be modified.

Attribute Values

Value	Description
true	Default value. Shows the panel.
false	Hides the panel.

The default value is: true.

Panel Color

Specifies the panel color.

Attribute Values

Value	Description
default	Default value. Default color.
primary	Primary color, used to highlight important areas.
warning	Warning color, used to highlight warning areas.
success	Success color, used to highlight success areas.
error	Error color, used to highlight error areas.
red,blue,yellow,green,yellow,purple,orange,green	Palette colors.
custom	Custom color, defined in the "Custom Color" attribute.

This attribute is available when panel is "true".

The default value is: default.

Panel Custom Color

Specifies the panel custom color.

Attribute Values

Value	Description	Example
<html color>	Color in any html accepted format.	#ff0000

This attribute is available when panelstyle is "custom" or panelstyle is "glass" or panelcolor is "custom".

Header

Displays the column header.

Attribute Values

Value	Description
false	False.
true	Default value. True.

The default value is: true.

Borders

Displays vertical and/or horizontal borders on every cell.

Attribute Values

Value	Description
none	Default value. No borders.
vertical	Vertical borders.
horizontal	Horizontal borders.
both	Both vertical and horizontal borders.

The default value is: none.

Striped

Adds zebra-striping to rows.

Attribute Values

Value	Description
false	Default value. False.
true	True.

The default value is: false.

Cell Background

Specifies the default cell's background color. Specific background colors can be set for a whole column or for specific cells (JSON Value = true or with Attribute bindings).

Attribute Values

Value	Description	Example
<html color>	Color in any html accepted format.	#ff0000

Header Cell Background

Specifies the header, summary cells' background color.

Attribute Values

Value	Description	Example
<html color>	Color in any html accepted format.	#ff0000

Fixed Cell Background

Specifies the fixed cells' background color.

Attribute Values

Value	Description	Example
<html color>	Color in any html accepted format.	#ff0000

Cell Border Color

Specifies the cell's border color.

Attribute Values

Value	Description	Example
<html color>	Color in any html accepted format.	#ff0000

Highlight Rows

Highlights rows on mouse over. Not available with touch devices.

Attribute Values

Value	Description
false	Default value. No higlight.
true	Highlight on mouse over.

The default value is: false.

Highlight Selected Rows

Highlights selected rows.

Attribute Values

Value	Description
false	Default value. No higlight.
true	Highlight selected rows.

The default value is: false.

View

Visible

Sets the object's visibility.

Attribute Values

Value	Description
true	Default value. Visible.
false	Hidden.

The default value is: true.

Enabled

Specifies if the object is enabled or disabled. A disabled object appears as grayed out and can't be interacted with.

Attribute Values

Value	Description
true	Default value. Enabled.
false	Disabled.

The default value is: true.

Blink

Blinks the object at the specified speed.

Attribute Values

Value	Description
false	Default value. Not blinking.
slow	Blinks slowly.
fast	Blinks fast.

The default value is: false.

Transition

Specifies the transition effect when the object is shown or hidden.

Attribute Values

Value	Description
none	Default value. No transition.
fade	Fade in/out.
fade-left	Slide from left and fade in/out.
fade-right	Slide from right and fade in/out.
fade-up	Slide from top and fade in/out.
fade-down	Slide from bottom and fade in/out.
slide-left	Slide from left.
slide-right	Slide from right.
slide-up	Slide from top.
slide-down	Slide from bottom.
zoom-in	Zoom in.
zoom-out	Zoom out.
3d-flip-left	3D flip from left.
3d-flip-right	3D flip from right.

The default value is: none.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Transition Duration

Specifies the transition duration in milliseconds.

Attribute Values

Value	Description
<integer>	Duration in milliseconds.

This attribute is available when transition is not "none".

When transition is not "none", this attribute defaults to 300.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Transition Delay

Specifies the transition delay in milliseconds.

Attribute Values

Value	Description
<integer>	Delay in milliseconds.

This attribute is available when transition is not "none".

When transition is not "none", this attribute defaults to 0.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Opacity

Sets the object's opacity. Opacity is the degree to which content behind an object is hidden.

Attribute Values

Value	Description
0	The object is fully transparent.
>0.0, <1.0	The object is translucent (content behind the element can be seen).
1.0	Default value. The object is fully opaque.

The default value is: 1.0.

Rotation

Specifies the degrees by which the object is rotated. A positive number rotates it clockwise, while a negative value rotates it counter-clockwise.

The default value is: 0.

CSS Class

Specifies a CSS Class that applies to the object, useful to customize its appearance. Custom CSS Classes are specified within the custom.css file.

Margin

Specifies the margin of the object. The margin is the space outside the object's border.

Attribute Values

Value	Description	Example
<int>	Specify the margin in pixels for all sides of the object.
<top> <right> <bottom> <left>	Specify the margin in pixels for each side of the object.	10 20 30 40

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

View Scale

Specifies the scale of the object. The scale is the ratio between the object's size and the size of the view it is contained in.

Attribute Values

Value	Description
<float>	Specify the scale for both width and height of the object.

The default value is: 1.0.

note

This attribute is experimental. It might not work properly and it might be modified or removed in a future release.

Meta

Comment

Specifies a comment, visible only in the Project Editor. It can be used to add a note or a tag to the object. The filter in the object's SELECT panel applies to the comment as well.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Exclude

Excludes the object from the UI. Useful to temporarily hide an object without deleting it. Different from the "Visible" attribute, which hides the object in the UI but keeps it in the project, allowing it to be shown again with a UISet.

Attribute Values

Value	Description
false	Default value. Object is included in the UI.
true	Object is excluded from the UI.

The default value is: false.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.