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