plugins/org.eclipse.osee.web/src/app/ple/messaging/message-interface/components/message-table/message-table.component.html

<div class="message-interface message-element-interface-button-header">
    <button mat-raised-button (click)="openSettingsDialog()" style="float:right">Settings</button>
</div>
<button *ngIf="editMode===true" mat-fab (click)="openNewMessageDialog()" class="new-message-button" color="primary">+</button>
<div class="message-interface message-element-interface-top-level-table">
    <mat-form-field class="message-interface-table-view-width-100 message-interface-table-filter-padding">
        <mat-label>Filter Message Information</mat-label>
        <input matInput type="text" (keyup)="applyFilter($event)" #input>
        <mat-hint>Enter text to filter Message Table.
            Only full text matches will display results.
            <!-- To filter inner tables, use sub message: in the filter. -->
        </mat-hint>
    </mat-form-field>
    <table mat-table  [dataSource]="dataSource" multiTemplateDataRows class="mat-elevation-z8">
        <ng-container [matColumnDef]="header" *ngFor="let header of headers; let i = index; trackBy:valueTracker;">
            <th mat-header-cell *matHeaderCellDef [attr.colspan]="headers[i]" class="message-interface-table-view-message-header" [matTooltip]="header">
                <ng-container>
                    {{header |convertMessageTableTitlesToString}}
                </ng-container>
            </th>
            <td mat-cell *matCellDef="let element; let i = dataIndex" [ngClass]="i%2===0? 'message-table-row-even':'message-table-row-odd'">
                <div class="flex-row">
                    <ng-container *ngIf="header==='name'">
                        <button mat-icon-button [@expandButton]="!expandedElement.includes(element.id) ?  'closed' : 'open'" (click)="rowChange(element.id,!expandedElement.includes(element.id))">V</button>
                    </ng-container>
                    <ng-container *ngIf="editMode===true;else no_edit">
                        <osee-messaging-edit-message-field [messageId]="element.id" [header]="header" [value]="element[header]"></osee-messaging-edit-message-field>
                    </ng-container>
                    <ng-template #no_edit>
                        <div appHighlightFilteredText [searchTerms]="searchTerms" [text]="element[header]" classToApply="ple-message-interface-table-highlighted-text">
                            {{element[header]}}
                        </div>
                    </ng-template>
                </div>
            </td>
        </ng-container>
        <ng-container matColumnDef="expandedMessage">
            <td mat-cell *matCellDef="let element" [attr.colspan]="headers.length" class="no-pad">    
                <div class="sub-message-table-message-table-detail message-element-interface-table-view-width-100"
                   [@detailExpand]="expandedElement.includes(element.id) ? 'expanded' : 'collapsed'">
                   <ng-container *ngIf="expandedElement.includes(element.id)">
                    <ple-messaging-sub-message-table [data]="element.subMessages" [filter]="filter" [element]="element" (expandRow)="expandRow($event)" [editMode]="editMode"></ple-messaging-sub-message-table>
                   </ng-container>
                </div>
            </td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="headers; sticky:true">
        </tr>    
        <tr mat-row *matRowDef= "let row; columns: headers;"    
        class="message-detail-row"
        [class.message-expanded-detail-row]="expandedElement.includes(row.id)">
        </tr>
        <tr mat-row *matRowDef="let row; columns: ['expandedMessage']" class="message-expanded-detail-row">
        </tr>
    </table>
</div>