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'];
}

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>
}

<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>

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'];
}

Estilos en Tablas

Introducción

¿Qué es el Angular CDK?

Instalando Angular CDK y TailwindCSS

Maquetando con Tailwind

Maquetando la página de login con Tailwind

Maquetando formularios con Tailwind

Componente de botón reutilizable

Reto: colores y propiedades dinámicas

Componentes interactivos con Angular CDK

Creando Overlays

Múltiples Overlays

Iconos en Angular con Font Awesome

Creando acordeones

Acordeones dinámicos

Drag and drop

Drag and drop con ordenamiento

Drag and drop con transferencia entre columnas

Drag and drop con columnas dinámicas

Modales y listas

Modales y diálogos

Modales recibiendo información

Listas con scroll

Listas con virtual scrolling

Table CDK

Tablas

Estilos en Tablas

Usando un DataSource en Tablas

Tablas con filtros y debounce

Próximos pasos para completar el Clon de Trello

Mejoras en UX y reusabilidad

Toma el Curso de Autenticación con Angular