🚀 Welcome to MDriven Learn –  MDriven is now on Discord!  Don’t miss the latest Release Notes.
Parsed/A simple table component for just listing a collection
This page was created by PageReplicator on 2025-09-01. Last edited by PageReplicator on 2025-09-01.

Template:Notice




This is an example of how to use <a href="/Documentation:EXT_Components" title="Documentation:EXT Components" data-bs-title="Documentation:EXT_Components">EXT Components</a> 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:

<a href="/File:Plaintable.PNG" class="image" data-bs-title="File:Plaintable.PNG" data-bs-filetimestamp="20210211134402"><img alt="Plaintable.PNG" src="/images/e/ee/Plaintable.PNG" decoding="async" width="451" height="314" /></a>

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

<a href="/File:Plaintablekatalog.PNG" class="image" data-bs-title="File:Plaintablekatalog.PNG" data-bs-filetimestamp="20210211140031"><img alt="Plaintablekatalog.PNG" src="/images/a/a5/Plaintablekatalog.PNG" decoding="async" width="187" height="99" /></a>

plaintable.cshtml[<a href="/index.php?title=Documentation:A_simple_table_component_for_just_listing_a_collection&veaction=edit&section=1" class="mw-editsection-visualeditor" title="Edit section: plaintable.cshtml" data-bs-title="Documentation:A_simple_table_component_for_just_listing_a_collection">edit</a> | <a href="/index.php?title=Documentation:A_simple_table_component_for_just_listing_a_collection&action=edit&section=1" title="Edit section: plaintable.cshtml" data-bs-title="Documentation:A_simple_table_component_for_just_listing_a_collection">edit source</a>]

<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[<a href="/index.php?title=Documentation:A_simple_table_component_for_just_listing_a_collection&veaction=edit&section=2" class="mw-editsection-visualeditor" title="Edit section: plaintable.css" data-bs-title="Documentation:A_simple_table_component_for_just_listing_a_collection">edit</a> | <a href="/index.php?title=Documentation:A_simple_table_component_for_just_listing_a_collection&action=edit&section=2" title="Edit section: plaintable.css" data-bs-title="Documentation:A_simple_table_component_for_just_listing_a_collection">edit source</a>]

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