Table 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.
Resizes the table to fit the available window space and sets table columns to custom widths.
This is the minimum HTML to get this directive to work.
<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 col-width="350px">Baz</td> </tr> </table> </div> <div class="table-body"> <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> |
Also, you must include these styles in your CSS.
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. |
Sorts the table contents by the header and direction indicated on click.
<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. |
Flashes the table rows whose information is new or updated.
<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.
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. |