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.

The result will look like this:

Plaintable.PNG

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;
}
This page was edited 113 days ago on 01/11/2024. What links here