You can replace a collection column's standard list with a small read-only HTML table when users only need to see the collection items, not select rows or run list actions.

This example is an AngularJS EXT Component for MDriven Turnkey. It renders the collection as one table column:

• The table heading is the presentation label of the ViewModel column.
• Each collection item is rendered with its default string representation, row.asString.
• The component does not implement row selection, multi-selection, sorting, filtering, editing, or actions.

For a standard interactive list, use Documentation:Tables and Grids instead. For list search and ordering, see Documentation:Tables, search and ordering.

When to use this component

Use this component for a collection that is informational and short enough to present as a simple list.

For example, if a ViewModel column named Tags contains the tags for a product, the component can render:

Tags
Seasonal
Clearance
Online

Do not use this component when the user must open an item, invoke an action for an item, edit cells, or select one or more rows. Those behaviors belong to the standard table/list rendering. In particular, do not use this override for a list that needs multi-selection; see Documentation:Nesting.MultiSelect.

Create the component files

In the Turnkey Web application, open the EXT_Components folder. Each subfolder defines one component, and the folder name is also the component name.

1. Create the folder EXT_Components/plaintable.
2. Create plaintable.cshtml in that folder.
3. Create plaintable.css in the same folder.

The required HTML file is named after the component: <component name>.cshtml. CSS files in the component folder are loaded with the component. For the general component file conventions and JavaScript options, see Documentation:EXT Components.

plaintable.cshtml

Save the following content as EXT_Components/plaintable/plaintable.cshtml:

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

The ng-repeat expression iterates the collection exposed through the component's data root. Each row is one item in that collection. Template:Row.asString displays that item's default string representation.

plaintable.css

Save the following content as EXT_Components/plaintable/plaintable.css:

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

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

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

Apply the component to a collection column

In MDriven Designer, configure the ViewModel column that holds the collection.

1. Select the collection ViewModelColumn.
2. Set its UIOverride property.
3. Add the tagged value Angular_Ext_Component with the value plaintable.
4. Run the Turnkey application and open the ViewModel that contains the column.

The Angular_Ext_Component value must match the component folder name and the .cshtml filename: plaintable.

How the generic template works

The component is generic because MDriven replaces placeholder tokens when it compiles the override HTML for the actual ViewModel column.

Placeholder	Replaced with	Example
[ViewModelColumnName]	The ViewModel column runtime name.	If the runtime name is Tags, data.[ViewModelColumnName] becomes data.Tags.
[ViewModelColumnLabel]	The column's designed presentation string.	If the column label is Product tags, the heading becomes Product tags.

This lets one component work with multiple collection columns. Without [ViewModelColumnName], you would need a separate HTML component for every different column name.

Limits and design guidance

This override intentionally renders only a heading and a text row for each item. It does not have the metadata or behavior of MDriven's standard table implementation. Keep the collection modelled and supplied by the ViewModel; the component only controls its HTML presentation.

If the display must show different content in cells or coordinate rows and columns, use a purpose-built structure rather than extending this one-column example. Documentation:Pivot tables describes a pattern for rendering cells with different content and actions.

See also

• Documentation:EXT Components
• Documentation:Tables and Grids
• Documentation:Tables, search and ordering
• Documentation:Nesting.MultiSelect
• Documentation:Pivot tables