A simple table component for just listing a collection
(Adding message template to the top of the page) |
(Replacing message template with parser tag) |
||
Line 1: | Line 1: | ||
<message>Write the content here to display this box</message> | |||
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 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. | ||
Revision as of 08:01, 17 June 2024
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; }
This page was edited 11 days ago on 06/18/2024. What links here