Tablas con filtros y debounce

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

Tablas con filtros y debounce

Todos los cursos GRATIS

Se acaba en:

00díasd:00hrsh:00minm:00segs

Max Andy Diaz Neyra

Estudiante

Hace un año

Mi solución adaptada a Angular 19 que maneja la reactividad con signal:

import { Component, computed, inject } from '@angular/core';
import { CdkTableModule } from '@angular/cdk/table';
import { rxResource, toSignal } from '@angular/core/rxjs-interop';
import { CommonModule } from '@angular/common';
import { NavbarComponent } from '../../components/navbar/navbar.component';
import { ProductService } from '../../services/product.service';
import { BtnComponent } from '../../components/btn/btn.component';
import { Product } from '../../models/product.model';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { debounceTime } from 'rxjs';

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

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

  // filteredProducts = signal<Product[]>([]);
  input = new FormControl('', { nonNullable: true });

  readonly search = toSignal(this.input.valueChanges.pipe(debounceTime(300)), {
    initialValue: '',
  });

  filteredProducts = computed(() => {
    const query = this.search();
    const products = this.products.value();

    return products.filter(
      (product) =>
        product.title.toLowerCase().includes(query.toLowerCase()) ||
        product.id.toString().includes(query) ||
        product.price.toString().includes(query),
    );
  });

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

  private updateData(id: Product['id'], changes: Partial<Product>) {
    this.products.update((products) =>
      products.map((product) =>
        product.id === id ? { ...product, ...changes } : product,
      ),
    );
  }

  // ngOnInit() {
  //   this.input.valueChanges.pipe(debounceTime(3000)).subscribe((value) => {
  //     this.find(value);
  //   });
  // }

  update(product: Product) {
    this.updateData(product.id, { price: 20 });
  }

  // find(query: string) {
  //   const filteredProducts = this.products
  //     .value()
  // .filter((product) =>
  //   product.title.toLowerCase().includes(query.toLowerCase()),
  // );

  //   this.filteredProducts.set(filteredProducts);
  // }

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

Max Andy Diaz Neyra

Estudiante

Hace un año

<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>
    <input type="search" [formControl]="input" />
    <table
      class="w-full text-sm text-left rtl:text-right text-gray-500"
      cdk-table
      [dataSource]="filteredProducts()"
    >
      <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-white': row.price >= 50,
          'bg-red-200': row.price < 50,
        }"
        *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>

      <!-- actions -->
      <ng-container cdkColumnDef="actions">
        <th class="px-6 py-3" cdk-header-cell *cdkHeaderCellDef>Actions</th>
        <td class="px-6 py-4" cdk-cell *cdkCellDef="let row">
          <app-btn (click)="update(row)">Update</app-btn>
        </td>
        <td class="px-6 py-3" cdk-footer-cell *cdkFooterCellDef></td>
      </ng-container>
    </table>
  </div>
</div>

Elcira Ibarra

Hace 4 años

Mi solución al reto:

// data-source.ts

  find(query: string) {
    const newProducts = this.originalData.filter(item =>
      item.title.toLowerCase().includes(query.toLowerCase())
      || item.id == query
      || item.price === Number(query)
      )
    this.data.next(newProducts);
  }

Vladimir Raigosa

Encontré este articulo donde explican el manejo de sort y paginator:

Victor Alfredo Matzar Say

Hace 3 años

Aparece con un error

Mi solución al reto :):

const newProducts = this.originalData.filter((element) => {
    return element.title.toLowerCase().includes(query.toLowerCase()) || element.id.toString().includes(query) || element.price.toString().includes(query);
})

Usando este enfoque de extender el DataSource como se puede hacer un sort y un paginator a la tabla??

Patrick Feeney

Hace 9 meses

Muy simple y bueno. Me gusto

Gersom Hernandez

Me parece que el datasource esta tomando forma de Facade o esa es mi percepción

carlos andres Gudiño

Agregarf filtros para mapear el valor e igualarlo segun el parametros

Pablo García Rodríguez

Hace 2 años

find(query: string){
  const newProducts = this.originalData.filter(
    (item) => 
      item.title.toLowerCase().includes(query.toLowerCase()) ||
      item.id.toString().includes(query) ||
      item.price.toString().includes(query)
  );
}

Jhon Pabon

Mi solucion al reto fue :

const newProducts=this.originalData.filter(element=>element.description.toLowerCase().includes(query.toLocaleLowerCase())|| element.price.toString()===query);

en la interface product defini number como number al igualarlo con query que es de tipo string causaba error ,con toString lo transformo y funciona correctamente

Tablas con filtros y debounce

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

Todos los cursos GRATIS