Estilos en Tablas

Clase 20 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS

José Flores

student•

columnConfig: ColumnConfig[] = [
  { name: '#No', header: 'Id.', field: 'id', type: 'text' },
  { name: 'Name', header: 'Title', field: 'title', type: 'text' },
  { name: 'price', header: 'Price', field: 'price', type: 'text', showTotal: true },
  { name: 'cover', header: 'Cover', field: 'images', type: 'image' },
  { name: 'actions', header: 'Actions', field: '', type: 'action' }
];

@for (column of columnConfig; track column.name) {
  <ng-container [cdkColumnDef]="column.name">
    <th cdk-header-cell class="py-3 px-6" *cdkHeaderCellDef>{{ column.header }}</th>
    <td cdk-cell class="py-4 px-6" *cdkCellDef="let row">
      @if (column.type === 'image') {
        <img class="w-20" [src]="row[column.field][0]" alt="">
      } @else if (column.type === 'action') {
        <app-btn (click)="update(row)">Update</app-btn>
      } @else {
        {{ row[column.field] }}
      }
    </td>
    <td cdk-footer-cell class="py-3 px-6" *cdkFooterCellDef>
      @if (column.showTotal) {
        {{ total }}
      }
    </td>
  </ng-container>
}

Julian Alejandro Sanchez Burbano

student•

¿Qué tan buena practica es hacer un *ngFor en los ng-container?

Lo pregunto mas que todo cuando el contenido de las celdas es un parecido.

Daniel Meza

student•

Sin lío. Mientras no se vuelva ilegible de tan abstracto que se pueda volver. Todo está bien

Max Andy Diaz Neyra

student•

Codigo de la clase con Angular 19:

html

<div class="flex flex-col h-screen">
  <app-navbar></app-navbar>
  <div class="w-full grow bgwhite p-6">
    <h1 class="text-xl text-gray-700 font-semibold italic mb-5">Table</h2>
    <table
      class="w-full text-sm text-left rtl:text-right text-gray-500"
      cdk-table
      [dataSource]="products.value()"
    >
      <tr
        cdk-header-row
        class="text-xs text-gray-700 uppercase bg-gray-50"
        *cdkHeaderRowDef="columns"
      ></tr>
      <tr
        cdk-row
        class="bg-white border-b dark:bg-gray-800"
        [ngClass]="{ 'bg-red-200': row.price < 100 }"
        *cdkRowDef="let row; columns: columns"
      ></tr>
      <tr
        cdk-footer-row
        class="text-xl text-gray-700 uppercase bg-gray-200"
        *cdkFooterRowDef="columns"
      ></tr>

      <!-- id -->
      <ng-container cdkColumnDef="id">
        <th class="px-6 py-3" cdk-header-cell *cdkHeaderCellDef>Id.</th>
        <td class="px-6 py-4" cdk-cell *cdkCellDef="let row">{{ row.id }}</td>
        <td class="px-6 py-3" cdk-footer-cell *cdkFooterCellDef></td>
      </ng-container>

      <!-- title -->
      <ng-container cdkColumnDef="title">
        <th class="px-6 py-3" cdk-header-cell *cdkHeaderCellDef>Title</th>
        <td class="px-6 py-4" cdk-cell *cdkCellDef="let row">
          {{ row.title }}
        </td>
        <td class="px-6 py-3" cdk-footer-cell *cdkFooterCellDef></td>
      </ng-container>

      <!-- price -->
      <ng-container cdkColumnDef="price">
        <th class="px-6 py-3" cdk-header-cell *cdkHeaderCellDef>Price</th>
        <td class="px-6 py-4" cdk-cell *cdkCellDef="let row">
          {{ row.price }}
        </td>
        <td class="px-6 py-3" cdk-footer-cell *cdkFooterCellDef>
          {{ totalPrice() }}
        </td>
      </ng-container>

      <!-- cover -->
      <ng-container cdkColumnDef="cover">
        <th class="px-6 py-3" cdk-header-cell *cdkHeaderCellDef>Cover</th>
        <td class="px-6 py-4" cdk-cell *cdkCellDef="let row">
          <img class="w-20" [src]="row.images[0]" [alt]="row.title" />
        </td>
        <td class="px-6 py-3" cdk-footer-cell *cdkFooterCellDef></td>
      </ng-container>
    </table>
  </div>
</div>

ts:

import { Component, computed, inject } from '@angular/core';
import { CdkTableModule } from '@angular/cdk/table';
import { rxResource } from '@angular/core/rxjs-interop';
import { NavbarComponent } from '../../components/navbar/navbar.component';
import { ProductService } from '../../services/product.service';
import { NgClass } from '@angular/common';

@Component({
  selector: 'app-table',
  imports: [NavbarComponent, CdkTableModule, NgClass],
  templateUrl: './table.component.html',
})
export class TableComponent {
  private productService = inject(ProductService);

  products = rxResource({
    loader: () => this.productService.getProducts(),
    defaultValue: [],
  });

  totalPrice = computed(() => {
    const products = this.products.value();
    return products.reduce((acc, product) => acc + Number(product.price), 0);
  });

  columns = ['id', 'title', 'price', 'cover'];
}