Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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.

...

NameOther AttributesSummary
onos-table-resizecol-widthResizes the table to fit the available window space and sets table columns to custom widths.
onos-sortable-headercolId, sortableSorts the table contents by the header and direction indicated on click.
onos-flash-changesid-prop, ng-repeat-complete, row-idFlashes 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

...

RequirementsOther AttributesSummary
  • onos-flash-changes must be on the <div> or <table> elements that represent the table body
  • id-props must be on the same element as onos-flash-changes (see right)
  • include the directive ng-repeat-complete in the same element that ng-repeat is in
  • include row-id attribute with the interpolated unique identifier (see right)
  

 

...

id-props - the value for this attribute must be the property key for the unique identifier. Most often, the unique identifier will be "id", but not always.

row-id - put the interpolated value of the unique identifier for this item as the value for this attribute, such as {{item.id}} (which will evaluate to the actual value at runtime)

ng-repeat-complete - tells onos-flash-changes to start looking for the elements that have changed in the dataset

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.