Overview
The tabular views make heavy use of Angular directives, to keep the source code concise. However, it can be tricky to understand what all those non-standard-HTML attributes are for. This page sheds some light on the mystery. In addition, further configuration options / variants are described.
Warning |
---|
Details coming shortly. |
Directives
onos-sortable-header
sort-callback
sort-callback="sortCallback(requestParams)"
sortable
Table Column Options
Notes on Directives
Refresh Button
ng-class="{active: autoRefresh}"
icon icon-id="refresh" icon-size="36"
tooltip tt-msg="autoRefreshTip"
ng-click="toggleRefresh()"
Notes on Main Table
onos-table-resize
Note that the table view makes use of two HTML HTML <table> elements elements; the first for the (non-scrolling) table headers, and the second for the (scrolling) table contents:
Table Header
onos-sortable-header
sortable
sort-callback
sort-callback="sortCallback(requestParams)"
Table Column Options
The first thing to note about the table columns is that the column headers use td tags (not th tags).
Columns may be labeled, or have no label at all (e.g. for columns with icons). The following table lists the possible options to be applied to a column:
Name | Usage | Description | Required for |
---|---|---|---|
col-width | attribute col-width with pixel value | Sets column to that specific width in pixels | onos-table-resize |
table-icon | class | Sets column width to a good size for icons | onos-table-resize |
colId | attribute colId with value | Used to identify columns for sorting in ascending or descending order | onos-sortable-header |
sortable | attribute without value | Allows that column to be sortable | onos-sortable-header |
See the following code snippet for an example:
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
<div class="table-header"
onos-sortable-header sort-callback="sortCallback(requestParams)">
<table>
<tr>
<td colId="active" class="table-icon" sortable></td>
<td colId="id" sortable>Foo ID </td>
<td colId="bar" sortable>Bar </td>
<td colId="baz" sortable>Baz </td>
<td colId="desc" col-width="475px">Description </td>
</tr>
</table>
</div> |
Table Body
A typical table body might look something like this:
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
<div class="table-body"> <table> <tr ng-if="!tableData.length" class="no-data"> <td colspan="5"> No Foos found :( </td> </tr> <tr ng-repeat="foo in tableData track by $index" ng-click="selectCallback($event, foo)" ng-class="{selected: foo === sel}"> <td class="table-icon"> <div icon icon-id="{{foo._iconid_active}}"></div> </td> <td>{{foo.id}}</td> <td>{{foo.bar}}</td> <td>{{foo.baz}}</td> <td>{{foo.desc}}</td> </tr> </table> </div> |
The first <tr> element is made visible only if there are no rows of table data.
The second <tr> element is a pattern that is used repeatedly by Angular to create a row for every element in the tableData variable (defined on our controller scope). Note the icon column <td> is classed with "table-icon" so that it is sized correctly.
Table Row Options
If you wish to create a table where one item spans multiple rows, you can specify your data <tr> elements to look something like this:
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
<tr ng-repeat-start="foo in tableData track by $index">
<td>{{foo.id}}</td>
<td>{{foo.bar}}</td>
<td>{{foo.baz}}</td>
<td>{{foo.zoo}}</td>
</tr>
<tr>
<td class="desc" colspan="4">{{foo.desc}}</td>
</tr>
<tr ng-repeat-end>
<td class="instructions" colspan="4">{{foo.instructions}}</td>
</tr> |
Note the use of the ng-repeat-start directive in the first row, and the ng-repeat-end directive in the last.
With appropriate styling, the rows can be made to look as if they belong together. The Intent View makes use of this technique. (See intent.html and intent.css for more details)