Estilos en Tablas
Clase 20 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS
Contenido del curso
José Flores
student•
hace un año
Clase 20 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS
Contenido del curso
José Flores
Julian Alejandro Sanchez Burbano
Daniel Meza
Max Andy Diaz Neyra
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> }
¿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.
Sin lío. Mientras no se vuelva ilegible de tan abstracto que se pueda volver. Todo está bien
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']; }