Training:A simple table component for just listing a collection

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

This is a generic component named plaintable that can 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.

The result will look like this:

The files below are saved in a plaintable folder like this:

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;
}