Versions Compared

Old Version 6

changes.mady.by.user Bri Prebilic Cole

Saved on

compared with

New Version 7

changes.mady.by.user Bri Prebilic Cole

Saved on

Key

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

...

RequirementsOther AttributesSummary
  • onos-table-resize has to be on a <div> that has two child <div>s
  • the two child <div>s are classed "table-header" and "table-body"
  • the child <div>s each have <table> and <tr> elements inside of them
  • ALL elements within the <tr> must be <td> elements NOT <th>

col-width - (optional) the value for this attribute should be a number in pixels of how wide you would like this column to be. Make sure you include the "px".

class="table-icon" - (optional) if this column will be holding an icon, you can class the column as table-icon, which will adjust the width of the column to the default size for icons

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

 Example Usage

Code Block
themeConfluence
languagexml
linenumberstrue
<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>
RequirementsOther AttributesSummary
  • onos-sortable-header has to be on an element that has children that represent the table header row (<td> elements)
    • in the above example, the directive is on the <div>, but it would also work on the <table> or <tr> elements
  • the <td> elements you want to be sortable must have the sortable and the colId attributes (see right -->)
  • ALL column headers must be <td> elements NOT <th>

sortable - (required) put this attribute (with no value) on the td element whose column you want to be sortable.

colId - (required) this attribute's value must be the tag of the column's contents which you want to sort by. As shown above, to sort by ID, the attribute must be colId="id"

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

 

onos-flash-changes

Flashes the table rows whose information is new or updated.

...