...

<div class="refresh" ng-class="{active: autoRefresh}"
     icon icon-size="36" icon-id="refresh"
     tooltip tt-msg="autoRefreshTip"
     ng-click="toggleRefresh()"></div>

class="refresh"

The refresh class is defined in table.css to style the <div> element appropriately for light and dark themes, when active or hovered-over.

ng-class="{active: autoRefresh}"

...

The ng-click directive, provided by Angular, invokes the toggleRefresh() function (defined on our scope) when the user clicks on the <div> element.

Notes on Main Table

onos-table-resize

The onos-table-resize directive monitors the browser window and resizes the table elements whenever the window size changes. See table.js for the gory details.

Note that the table view makes use of two HTML <table> elements; the first for the (non-scrolling) table headers, and the second for the (scrolling) table contents:

Table Header

onos-sortable-header & sortable

The onos-sortable-header directive injects a click handler into every <td> element in the header that has a sortable attribute defined (see table.js for details).

sort-callback

sort-callback="sortCallback(requestParams)"The handler toggles the sort state between ascending and descending sort direction, as well as inserting the sort direction icons (up and down arrows) into the element. In addition, a sort request event is fired off to the server to re-fetch the table data, sorted with the new criteria.

Table Column Options

The first thing to note about the table columns is that the column headers use td tags (not th tags).

...