Tablas

Clase 19 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS

Victor Alfredo Matzar Say

student•

La tabla que ofrece Angular Material CDK proporciona una tabla con características adicionales a las que ofrece una tabla de HTML básica. A continuación, se presentan algunas ventajas de utilizar Angular Material CDK Table en lugar de una tabla HTML:

Funciones de paginación y filtrado: Angular Material CDK Table proporciona una funcionalidad de paginación y filtrado incorporada. Puede hacer que su tabla sea más interactiva para los usuarios, permitiéndoles buscar y filtrar los datos con facilidad.

Ordenamiento incorporado: Angular Material CDK Table tiene una función incorporada para ordenar los datos en la tabla. Esta función hace que sea más fácil para los usuarios ordenar los datos por una columna específica.

Flexibilidad en el diseño: Con Angular Material CDK Table, puede personalizar el diseño de la tabla a su gusto. Puede ajustar el ancho de la columna, el color de fondo, la fuente y otros aspectos de la tabla para que se adapte a su diseño.

Aumenta la accesibilidad: Angular Material CDK Table proporciona una mejor accesibilidad que una tabla HTML estándar. Cumple con los estándares de accesibilidad web y es compatible con las tecnologías de asistencia, lo que significa que los usuarios con discapacidades pueden acceder a los datos de la tabla de manera más efectiva.

Angular Material CDK Table ofrece una tabla más potente y personalizable que una tabla HTML estándar, lo que hace que sea una excelente opción para desarrolladores de Angular que necesitan mostrar datos tabulares en sus aplicaciones 😃

Giovanni Andres Alzate Agudelo

student•

en esta clase me hice esa pregunta, cual es la diferencia de esta tabla a una normal en html .... gracias

José Nicolás Aristizabal Ramírez

student•

Implementación dinamica basada en el arr de columnas declarado en el archivo ts, con ello nos ahorramos bastantes líneas de código en el html.

 <table cdk-table [dataSource]="products">
        
      <!-- Position Column -->
      <ng-container *ngFor="let col of columns">
        <ng-container [cdkColumnDef]="col">
          <th cdk-header-cell *cdkHeaderCellDef>{{ col }}</th>
          <td cdk-cell *cdkCellDef="let product">{{ product[col] }}</td>
        </ng-container>
      </ng-container>

      <tr cdk-header-row *cdkHeaderRowDef="columns"></tr>
      <tr cdk-row *cdkRowDef="let row; columns: columns"></tr>
  </table>

Elioenai Garcia

student•

Bien :)

Daniel Carranza Ruedas

student•

DUDA: Se pueden hacer columnas dinamicas? o siempre deben ser fijas?

Y si hay una forma de hacerlas dinamicas... cual es?

Jose Armando Acevedo Angarita

student•

Una pregunta Nicolas, por que las tablas de angular usan esa forma tan particular de crear las tablas?

Victor Alfredo Matzar Say

student•

Que tal :)

Angular Material CDK Table proporciona una gran cantidad de funciones y características que no están disponibles en una tabla HTML básica. Estas características incluyen ordenamiento, filtrado, paginación, ajuste de ancho de columna, selección de fila, entre otras. Para proporcionar estas características avanzadas, Angular Material CDK Table utiliza nuevas directivas y etiquetas html, y al utilizarlas, se puede acceder a todas las funciones avanzadas que proporciona. Además, estas directivas y etiquetas también proporcionan una mejor accesibilidad y compatibilidad con las tecnologías de asistencia, lo que mejora la experiencia del usuario final.

Reinaldo Mendoza

student•

Dado que cambiar los estilos en angular material no es lo mas sencillo del mundo, esta herramienta es mucho mas personalizable

PiPe Ramirez

student•

Tambien existe un script llamado DataTable, facil de implementar y agil sobre la interfaz de usuario.

Reinaldo Mendoza

student•

🙀

Benito Vargas

student•

Buenas tardes, a alguien mas le sale este error. debido a este error no me renderiza los datos en la Tabla y el codigo es tal cual en la clase.

table.component.html:29 NG0303: Can't bind to 'cdkRowRefColumns' since it isn't a known property of 'tr' (used in the 'TableComponent' component template).

1. If 'tr' is an Angular component and it has the 'cdkRowRefColumns' input, then verify that it is a part of an @NgModule where this component is declared.

2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

Benito Vargas

student•

Al final no se que hice mal, Copiar y Pegar me resolvio el problema

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