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.
Directives
Name | Other Attributes | Summary |
---|---|---|
UI Service - TableService onos-table-resize | col-width | Resizes the table to fit the available window space and sets table columns to custom widths. |
UI Service - TableService onos-sortable-header | colId, sortable | Sorts the table contents by the header and direction indicated on click. |
UI Service - TableService 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
Resizes the table to fit the available window space and sets table columns to custom widths.
Example Usage
This is the minimum HTML to get this directive to work.
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
<div class="summary-list" onos-table-resize> <div class="table-header"> <table> <tr> <td col-width="50px">ID</td> <td class="table-icon">Foo</td> <td>Bar</td> <td>Foo Id<<td col-width="350px">Baz</td> </tr> </table> </div> <div class="table-body"> <table> ...Body tr <tr ng-repeat elements here... ="item in tableData track by $index"> <td>{{item.id}}</td> <td>{{item.foo}}</td> <td>{{item.bar}}</td> <td>{{item.baz}}</td> </tr> </table> </div> </div> |
Also, you must include these styles in your CSS.
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
div.summary-list { border-spacing: 0; } div.summary-list table { border-collapse: collapse; table-layout: fixed; empty-cells: show; margin: 0; } div.summary-list div.table-body { overflow-y: scroll; } |
Requirements | Other Attributes | Summary |
---|---|---|
|
** If these attributes are not included, then the columns will be the default calculated size. ** | This directive looks for the "table-header" and "table-body" classes, selects all the <td> elements, and sizes them so that table fits within the window. |
onos-sortable-header
Sorts the table contents by the header and direction indicated on click.
Example Usage
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
<div class="summary-list"> <div onos-sortable-header> <table> <tr> <td colId="id" sortable>ID</td> <td colId="foo" sortable>Foo</td> <td colId="bar" sortable>Bar</td> <td>Baz</td> </tr> </table> </div> <div> <table> <tr ng-repeat="item in tableData track by $index"> <td>{{item.id}}</td> <td>{{item.foo}}</td> <td>{{item.bar}}</td> <td>{{item.baz}}</td> </tr> </table> </div> </div> |
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. |
...