<div class="right-column" id="dataScreen">
  <div class="Settings-div">
    <router-outlet></router-outlet>
    <div class="title-table">
      <div class="title-row">
        <h1 class="title title-cell-text">Settings</h1>
        <span class="title-cell-button">
          <button
            mat-icon-button
            matTooltip="This functionality is not yet implemented."
          >
            <mat-icon>add</mat-icon>
          </button>
        </span>
      </div>
    </div>
    <div>
      <mat-form-field appearance="fill">
        <mat-label>Filter</mat-label>
        <input
          matInput
          (keyup)="applyFilter($event)"
          placeholder="Ex. auto_migrate_settings"
          #input
        />
      </mat-form-field>
      <!-- TODO -  [dataSource]="data" -->
      <table mat-table [dataSource]="data" class="mat-elevation-z8" matSort>
        <!-- Name Column -->
        <ng-container matColumnDef="name">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
          <td mat-cell *matCellDef="let element">{{ element.name }}</td>
        </ng-container>

        <!-- Value Column -->
        <ng-container matColumnDef="value">
          <th mat-header-cell *matHeaderCellDef mat-sort-header>Value</th>
          <td mat-cell *matCellDef="let element">
            <!-- View -->
            @if (element.type === "string" || element.type === "number") {
              <code class="settings-values"> "{{ element.value }}" </code>
            }

            <!-- View - Boolean -->
            @if (element.type === "boolean") {
              <mat-slide-toggle [checked]="element.value" disabled="true">
              </mat-slide-toggle>
            }

            <!-- View Array-->
            @if (isArray(element.value)) {
              <mat-list role="list">
                @for (c of element.value; track c) {
                  <mat-list-item> {{ c }} </mat-list-item>
                }
              </mat-list>
            }

            <!-- View - Object -->
            @if (element.type === "object" && !isArray(element.value)) {
              <cobbler-viewable-tree
                [inputObject]="element.value"
              ></cobbler-viewable-tree>
            }
          </td>
        </ng-container>

        <!-- Edit Actions -->
        <ng-container matColumnDef="actions">
          <th mat-header-cell *matHeaderCellDef>Actions</th>
          <td mat-cell *matCellDef="let element">
            <div style="display: flex; justify-content: flex-end">
              <button
                mat-icon-button
                matTooltip="This functionality is not yet implemented."
              >
                <mat-icon>edit</mat-icon>
              </button>
              <button
                style=""
                mat-icon-button
                matTooltip="This functionality is not yet implemented."
              >
                <mat-icon>clear_all</mat-icon>
              </button>
            </div>
          </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>

        <!-- Row shown when there is no matching data. -->
        <tr class="mat-row" *matNoDataRow>
          <td class="mat-cell" colspan="4">
            No data matching the filter "{{ input.value }}"
          </td>
        </tr>
      </table>
      <mat-paginator
        [pageSizeOptions]="[5, 10, 25, 100]"
        aria-label="Select page of users"
      ></mat-paginator>
    </div>
  </div>
</div>

./settings-view.component.css

table {
  width: 100%;
}

.mat-form-field {
  font-size: 14px;
  width: 100%;
}

.title-table {
  display: table;
  width: 100%;
}

.title-row {
  display: table-cell;
  width: 100%;
}

.title-cell-text {
  display: table-cell;
  width: 100%;
  vertical-align: middle;
}

.title-cell-button {
  display: table-cell;
}