src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.html

@@ -1,14 +1,20 @@
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" multiTemplateDataRows>
   <ng-container matColumnDef="name">
     <th mat-header-cell *matHeaderCellDef>Label</th>
     <td mat-cell *matCellDef="let state">{{state.stateLabel}}</td>
   </ng-container>
 
-  <ng-container matColumnDef="description">
-    <th mat-header-cell *matHeaderCellDef>Label</th>
-    <td mat-cell *matCellDef="let state">{{state.stateDescription}}</td>
+  <!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
+  <ng-container matColumnDef="expandedDetail">
+    <td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
+      <div class="example-element-detail" [@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
+        <p>{{element.stateDescription}}</p>
+      </div>
+    </td>
   </ng-container>
 
+
+
   <ng-container matColumnDef="initial">
     <th mat-header-cell *matHeaderCellDef>Initial</th>
     <td mat-cell *matCellDef="let state">
@@ -31,6 +37,24 @@
     </td>
   </ng-container>
 
-  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+  <ng-container matColumnDef="expand">
+    <th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</th>
+    <td mat-cell *matCellDef="let element">
+      <button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()">
+        @if (expandedElement === element) {
+          <mat-icon>keyboard_arrow_up</mat-icon>
+        } @else {
+          <mat-icon>keyboard_arrow_down</mat-icon>
+        }
+      </button>
+    </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
+  <tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;"
+      class="example-element-row"
+      [class.example-expanded-row]="expandedElement === element"
+      (click)="expandedElement = expandedElement === element ? null : element">
+  </tr>
+  <tr mat-row *matRowDef="let row; columns: ['expandedDetail']" class="example-detail-row"></tr>
 </table>

src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.scss

@@ -7,11 +7,11 @@ tr.example-detail-row {
 }
 
 tr.example-element-row:not(.example-expanded-row):hover {
-  background: whitesmoke;
+  background: #545456
 }
 
 tr.example-element-row:not(.example-expanded-row):active {
-  background: #efefef;
+  background: #545456;
 }
 
 .example-element-row td {
@@ -46,6 +46,6 @@ tr.example-element-row:not(.example-expanded-row):active {
   opacity: 0.5;
 }
 
-.mat-column-edit, .mat-column-delete {
+.mat-column-edit, .mat-column-delete, .mat-column-expand {
   width: 32px;
 }

src/app/editor/gamesystem-editor/state-editor/simple-state-editor/simple-state-editor.component.ts

@@ -1,17 +1,27 @@
 import {Component, Input, OnInit} from '@angular/core';
 import {SimpleState} from "../../../../game-model/gamesystems/SimpleState";
 import {MatTableDataSource} from "@angular/material/table";
+import {animate, state, style, transition, trigger} from "@angular/animations";
 
 @Component({
   selector: 'app-simple-state-editor',
   templateUrl: './simple-state-editor.component.html',
-  styleUrl: './simple-state-editor.component.scss'
+  styleUrl: './simple-state-editor.component.scss',
+  animations: [
+    trigger('detailExpand', [
+      state('collapsed,void', style({height: '0px', minHeight: '0'})),
+      state('expanded', style({height: '*'})),
+      transition('expanded <=> collapsed', animate('225ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
+    ]),
+  ],
 })
 export class SimpleStateEditorComponent implements OnInit{
 
   @Input() states: SimpleState[] = [];
   dataSource = new MatTableDataSource();
   displayedColumns = ["name", "initial", "edit", "delete"];
+  columnsToDisplayWithExpand = [...this.displayedColumns, 'expand'];
+  expandedElement: SimpleState | null = null;
 
   ngOnInit() {
     this.dataSource.data = this.states;