EXC | DEV | Documentation | Version 1.0
<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 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 |
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"},
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"});