Table is 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. |
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.