This page is a work in progress.
Table Directives
Table is Directives are an extension of the Widget module with the name table.js
. It provides Angular directives for Tabular View features. To use these directives, see the documentation on Angular directives.
...
Name | Other Attributes | Summary |
---|---|---|
onos-table-resize | col-width | Resizes the table to fit the available window space and sets table columns to custom widths. |
onos-sortable-header | colId, sortable | Sorts the table contents by the header and direction indicated on click. |
onos-flash-changes | id-prop, ng-repeat-complete, row-id | Flashes the table rows whose information is new or updated. |
Note that all of these directives can be used with each other. All of the Tabular Views use all three directives in tandem.
Directive Usage
onos-table-resize
...
Requirements | Other Attributes | Summary |
---|---|---|
|
** If you don't include these attributes, then the column won't be sortable. ** | This directive selects all of the <td> elements below the onos-sortable-header attribute and checks if they have the sortable attribute. If it does, then it installs a sort click event on the <td> element. |
...
onos-flash-changes
Flashes the table rows whose information is new or updated.
...
Example Usage
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
<div class="summary-list">
<div>
<table>
<tr>
<td>ID</td>
<td>Foo</td>
<td>Bar</td>
<td>Baz</td>
</tr>
</table>
</div>
<div>
<table onos-flash-changes id-prop="id">
<tr ng-repeat="item in tableData track by $index"
ng-repeat-complete row-id="{{item.id}}">
<td>{{item.id}}</td>
<td>{{item.foo}}</td>
<td>{{item.bar}}</td>
<td>{{item.baz}}</td>
</tr>
</table>
</div>
</div> |
You will also need CSS to style the table flash.
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
div.summary-list tr {
transition: background-color 500ms;
}
.light div.summary-list tr.data-change {
background-color: #FDFFDC;
}
.dark div.summary-list tr.data-change {
background-color: #5A5600;
} |
Requirements | Other Attributes | Summary |
---|---|---|
|
| Finds changes in the tableData set and finds the element that corresponds to those changes. The class "data-change " will appear for a 1.5 seconds and then be removed. |