add-identificacion-poblacion.component.html

<!-- Importaciones necesarias -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet" />
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

<div class="contenedorP">

  <div class="mat-elevation-z8">
    <table mat-table matSort [dataSource]="dataSource" matSort>

      <ng-container matColumnDef="tipo" class="Column">
        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
          Tipo
        </th>
        <td class="Column" mat-cell *matCellDef="let dato">
          {{ dato.tipo === 'directos' ? 'Directos' : 'Indirectos' }}
        </td>
      </ng-container>

      <ng-container matColumnDef="hombre" class="Column">
        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
          Hombre
        </th>
        <td class="Column" mat-cell *matCellDef="let dato" [contentEditable]="true"(keydown)="handleKeyDown($event, dato)">
          {{ dato.tipo === 'directos' ? dato.uzytavproyec_directos_hombres : dato.uzytavproyec_inidirectos_hombres }}
        </td>

      </ng-container>

      <ng-container matColumnDef="mujer" class="Column">
        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
          Mujer
        </th>
        <td class="Column" mat-cell *matCellDef="let dato" [contentEditable]="true"(keydown)="handleKeyDown($event, dato)">
          {{ dato.tipo === 'directos' ? dato.uzytavproyec_directos_mujeres : dato.uzytavproyec_inidirectos_mujeres }}
        </td>
      </ng-container>

      <ng-container matColumnDef="ninos" class="Column">
        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
          Niños
        </th>
        <td class="Column" mat-cell *matCellDef="let dato" [contentEditable]="true"(keydown)="handleKeyDown($event, dato)">
          {{ dato.tipo === 'directos' ? dato.uzytavproyec_directos_ninios : dato.uzytavproyec_indirectos_ninios }}
        </td>
      </ng-container>

      <ng-container matColumnDef="discapacidad" class="Column">
        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
          Discapacidad
        </th>
        <td class="Column" mat-cell *matCellDef="let dato" [contentEditable]="true"(keydown)="handleKeyDown($event, dato)">
          {{ dato.tipo === 'directos' ? dato.uzytavproyec_directos_discapac : dato.uzytavproyec_inidirectos_discapa }}
        </td>
      </ng-container>

      <ng-container matColumnDef="total" class="Column">
        <th class="Column" mat-header-cell *matHeaderCellDef mat-sort-header>
          Total
        </th>
        <td class="Column" mat-cell *matCellDef="let dato">
          {{ dato.tipo === 'directos' ? dato.uzytavproyec_tipo : dato.uzytavproyec_indirectos }}
        </td>
      </ng-container>


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

    </table>

  </div>
</div>