Training:A simple table component for just listing a collection

This is an example of using EXT Components to override the default grid / table when you just want to show the contents and don't need any actions / selections.

This is a generic component named plaintable

that could be used for any viewmodel column with a collection value. The presentation

of the column will be the title of the table (in the header row) and the rows will show the default string representation of the items in the collection.

plaintable.chtml

<table class="plaintable">
<thead>
	<tr>
		<th class="plaintable">[ViewModelColumnLabel]</th>
	</tr>
</thead>
<tr ng-repeat="row in data.[ViewModelColumnName]">
	<td class="plaintable">{{row.asString}}
	</td>
</tr>
</table>

plaintable.css

table.plaintable {
  border-collapse: collapse;
  border: 1px solid black;
}

td.plaintable {
  border: 1px solid black;
  padding: 2px 5px 2px 5px;
  background-color: rgb(255,242,149);
  padding: 15px;
  text-align: left;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 1rem;
  font-weight: 400;
}

th.plaintable {
  border: 1px solid black;
  padding: 10px 10px 10px 10px;
  background-color: rgb(254,223,0);
  padding: 15px;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}