Versions Compared

Old Version 5

changes.mady.by.user Bri Prebilic Cole

Saved on

compared with

New Version 6

changes.mady.by.user Bri Prebilic Cole

Saved on

Key

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

...

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.

 

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
themeConfluence
languagexml
linenumberstrue
<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
themeConfluence
languagecss
linenumberstrue
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;
}
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.

onos-sortable-header

Sorts the table contents by the header and direction indicated on click.

...