EXC | DEV | Documentation | Version 1.0

Component Table

<w type="table" name = "table1" issearchable=1 enumerateRows=1>
	{
		"columns": [
			{"name": "fname", "caption":"First Name"},
			{"name": "lname", "caption":"Last Name"},
			{"name": "email", "caption":"email", "editable":true},
			{"name": "salary", "caption":"Salary", "format":"2", "sortable": true, "tally":true, "lookupCSS":[{"className":"high-pay", "when":"%salary%>=3500"},{"className":"low-pay", "when":"%salary%<3500"}] },
			{"name": "type", "caption":"Type","lookup":{"P":"Permanent","T":"Temporary","C":"Contract"} },
			{"name": "active", "caption":"Active" },
			{"name": "hiredate", "caption":"Hired" }
		],
		"rowActions": [
			{"caption":"View...", "help":"View record...", "condition":"true", "type":"publish", "msg":"table1RowView", "params":{}},
			{"caption":"Remove", "condition":"true", "type":"publish", "msg":"table1RowRemove", "params":{}},
			{"caption":"Go To", "condition":"true", "help":"Navigate to page", "type":"navigate", "url":"index.html", "params":{"a":"doThis","n":"%fname%"}}
		],
		"actions":[
			{"caption":"Add new record...", "help":"New record record...", "condition":"true", "type":"publish", "msg":"table1AddRow", "params":{}}
		],
		"widgets":{
			"active": {"type": "toggle", "name":"active"},
			"hiredate": {"type": "date", "name":"hiredate", "classes":["style-embedded", "style-with-border"]}
		}
	}
</w>

Properties

Properties for the <w></w> tag.

Property	Description
type	Required Value is "table"
name	Required A name for this widget.
enumerateRows	Adds a column with row numbers. Value: 1 or 0
issearchable	Makes a table searchable and adds a search box to the table header. Value: 1 or 0

Column definitions

The table takes a JSON object on the body of the <w></w> with information to define the columns.

A column is declared in the "columns" key of the JSON object. A column has the following keys:

Key	Description
name	Required A string with a "variable" friendly name for the column. It is used for data binding and other operations.
caption	Required A string with the column header.
editable	Makes a column cell editable. Only applies for basic text/numeric columns without formatting.
format	Sets a numeric format parameters. The value is a pipe `"\|"` delimited string with the amount of decimal places, the character used for decimal point, and the character for thousands separator. Examples: `"\|2\|.\|,"` or `"2"`.
sortable	A boolean indicating if this column is a sort key.
tally	A boolean indicating that a tally of the column values will be added and show as a footer.
hideonsize	An array of strings. Each entry with the code of a layout size that will hide this column. For example: `["S","M"]`.
lookupCSS	An array of plain objects with conditional rules to apply a css class to a column cell. An entry in this array has a `"className"` with the css class to be applied and a `"when"` key with an expression to evaluate. For example: `"%salary%>=3500"` or `"%salary%<3500"`. The expressions use the column names as variables for example `%salary%` is the value of the column "salary".
lookup	A plain object with key-value pairs of captions for a given code (key). When the value of a cell is matched to a key in this object the caption of the key is displayed. For example `{"P":"Permanent","T":"Temporary","C":"Contract"}`

A column may be editable by using widgets. The "widgets" key defines a widget for a given column. This widgets key is plain object made up of key value pairs. The key of an entry is the column name. The entry value is a plain object that describes the widget to use.

"active": {"type": "toggle", "name":"active"},

Methods

This component inherits methods from generic.

Function	Syntax	Description
getData	`getData()`	Returns the table associated data.
rowSetDataForIndex	`rowSetDataForIndex(rowIdx, data)`	The parameter data is a plain object.
refreshRow	`refreshRow(rowIdx)`
rowAdd	`rowAdd(data)`	The parameter data is a plain object.
sortColumn	`sortColumn(thNode)`
updateTallies	`updateTallies()`

myTable = $.component("table1");

myTable.rowAdd({"fname":"Jose","lname":"Cuevas-1","email":"jcuevas@mac.com", "salary":1250, "type":"P", "active":0,"hiredate":"2/15/2019"});

myRecord = {"fname":"Joe","lname":"Cuevas-3","email":"info@expworks.io", "salary":3250.2, "type":"T","active":1,"hiredate":"2/18/2019"};
myRecordUID = myTable.rowAdd(myRecord);

myTable.rowSetDataForIndex( 1, {"email":"jcuevas50@ma.com", "active": 1, "type": "T"});