sacg-cronogramas/src/app/pages/actualizacion-pd/actualizacion-pd.component.html

<div class="p-3 text-white">
  <div
    class="flex align-content-start flex-wrap gap-2 border-round border-blue-400 my-2 lg:px-0 py-3 my-1"
  >
    <div class="col-12 md:col-3 lg:col-2 tablaAzul border-round">
      <div class="border-round font-bold">
        <div class="h-4rem">Filtro Empresa</div>
        <p-select
          [options]="empresas"
          [(ngModel)]="selectedCity"
          optionLabel="name"
          placeholder="Seleccione..."
          class="w-full md:w-56"
        />
      </div>
    </div>
    <div class="col-12 md:col-3 lg:col-2 tablaAzul border-round">
      <div class="border-round font-bold">
        <div class="h-4rem">Filtro C&oacute;digo Cronograma</div>
        <p-select
          [options]="empresas"
          [(ngModel)]="selectedCity"
          optionLabel="name"
          placeholder="Seleccione..."
          class="w-full md:w-56"
        />
      </div>
    </div>
  </div>
  <!-- Tabla1 -->
  <div class="flex justify-content-end align-items-center my-2 py-2">
    <!-- <div class="font-bold tituloTabla">T&iacute;tulo de la tabla:</div> -->
    <p-button
      icon="pi pi-file-excel"
      (onClick)="exportExcelWithStyles(dt)"
      styleClass="p-button-success"
      pTooltip="Descargar planilla Excel"
      tooltipPosition="top"
      label="Exportar"
      [tooltipOptions]="{showDelay: 100, appendTo: 'body'}"
    >
    </p-button>
  </div>
  <p-table
    id="azul"
    #dt
    [value]="products"
    stripedRows
    showGridlines
    [paginator]="true"
    [rows]="5"
    [showCurrentPageReport]="true"
    currentPageReportTemplate="Mostrando del {first} al {last} de un total de {totalRecords} registros"
    [rowsPerPageOptions]="[5, 10, 20]"
    styleClass="p-datatable-sm"
  >
    <ng-template pTemplate="header">
      <tr>
        <th class="tablaAzul font-bold text-white">Empresa</th>
        <th class="tablaAzul font-bold text-white">C&oacute;digo de cronograma</th>
        <th class="tablaAzul font-bold text-white">Etapa del Servicio</th>
        <th class="tablaAzul font-bold text-white">Nombre sistema</th>
        <th class="tablaAzul font-bold text-white">Tipo de inversi&oacute;n</th>
        <th class="tablaAzul font-bold text-white">C&oacute;digo de glosa PD</th>
        <th class="tablaAzul font-bold text-white">Descripci&oacute;n glosa</th>
        <th class="tablaAzul font-bold text-white">Monto Inversi&oacute;n Total (UF)</th>
        <th class="tablaAzul font-bold text-white">A&ntilde;o de Inicio</th>
        <th class="tablaAzul font-bold text-white">A&ntilde;o de T&eacute;rmino</th>
        <th class="tablaAzul font-bold text-white">Mes de T&eacute;rmino</th>
        <th class="tablaAzul font-bold text-white">Nota</th>
        <th class="bg-green-400 font-bold text-white">Estado aprobaci&oacute;n</th>
        <th class="bg-green-400 font-bold text-white">Observaci&oacute;n</th>
      </tr>
    </ng-template>
    <ng-template pTemplate="body" let-product>
      <tr>
        <td>{{ product.empresa }}</td>
        <td>{{ product.codigoCronograma }}</td>
        <td>{{ product.codigoCronogramaAjuste }}</td>
        <td>{{ product.tipoCarga }}</td>
        <td>{{ product.estadoRevision }}</td>
        <td>{{ product.estadoRevision }}</td>
        <td>{{ product.fechaIngreso }}</td>
        <td>
          <div class="border-round font-bold">
            <p-select
              [options]="estadoAprobacion"
              [(ngModel)]="product.dato13"
              optionLabel="name"
              placeholder="Seleccione..."
              class="selectTabla"
            />
          </div>
        </td>
        <td>{{ product.dato9 }}</td>
        <td>{{ product.dato10 }}</td>
        <td>{{ product.dato11 }}</td>
        <td>{{ product.dato12 }}</td>
        <td class="bg-verde">
          <div class="border-round font-bold">
            <p-select
              [options]="estadoAprobacion"
              [(ngModel)]="product.dato13"
              optionLabel="name"
              placeholder="Seleccione..."
              class="selectTabla"
            />
          </div>
        </td>
        <td class="bg-verde">
          <input
            type="analista"
            pInputText
            pTool
            [(ngModel)]="product.analista"
            placeholder="Analista"
            name="analista"
            class="input-with-icon w-full"
            style="
              background-color: white;
              color: black;
              width: 228px !important;
            "
          />
        </td>
      </tr>
    </ng-template>
  </p-table>

  <!-- Botón de exportar debajo de la tabla -->
  <div class="flex justify-content-end mt-3">
    <button
      pButton
      type="button"
      icon="pi pi-file-excel"
      (click)="exportExcelWithStyles(dt)"
      class="p-button-success"
      label="Exportar a Excel"
      pTooltip="Descargar planilla Excel"
      tooltipPosition="top"
      [tooltipOptions]="{showDelay: 100, appendTo: 'body'}"
    ></button>
  </div>
</div>