Estilos en Tablas

Curso de Maquetación con Angular CDK y Tailwind CSS

Contenido del curso

Introducción

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

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0013:25

Estilos en Tablas

Curso de Maquetación con Angular CDK y Tailwind CSS

Clase 20 de 24

Clase 20 / 24

Comentarios (3)3 comentarios

José Flores

Hace 2 años

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

Hace 4 años

¿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

Hace 4 años

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

Max Andy Diaz Neyra

Hace un año

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

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

Estilos en Tablas

Progreso del curso

Introducción

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