Estilos en Tablas
Contenido del curso
Maquetando con Tailwind
Componentes interactivos con Angular CDK
Drag and drop
Modales y listas
Table CDK
Próximos pasos para completar el Clon de Trello
Estilos en Tablas
Contenido del curso
Estilos en Tablas
José Flores
Estudiante
Julian Alejandro Sanchez Burbano
Estudiante
Daniel Meza
Estudiante
Max Andy Diaz Neyra
EstudiantecolumnConfig: 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']; }