DOCS

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"});
Fork me on GitHub