Tablas
Clase 19 de 24 • Curso de Maquetación con Angular CDK y Tailwind CSS
Contenido del curso
Victor Alfredo Matzar Say
student•
hace 3 años
Giovanni Andres Alzate Agudelo
student•
hace 2 años
Victor Alfredo Matzar Say
Giovanni Andres Alzate Agudelo
José Nicolás Aristizabal Ramírez
Elioenai Garcia
Daniel Carranza Ruedas
Jose Armando Acevedo Angarita
Victor Alfredo Matzar Say
Reinaldo Mendoza
PiPe Ramirez
Reinaldo Mendoza
Benito Vargas
Benito Vargas
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 😃
en esta clase me hice esa pregunta, cual es la diferencia de esta tabla a una normal en html .... gracias
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>
Bien :)
DUDA: Se pueden hacer columnas dinamicas? o siempre deben ser fijas?
Y si hay una forma de hacerlas dinamicas... cual es?
Una pregunta Nicolas, por que las tablas de angular usan esa forma tan particular de crear las tablas?
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.
Dado que cambiar los estilos en angular material no es lo mas sencillo del mundo, esta herramienta es mucho mas personalizable
Tambien existe un script llamado DataTable, facil de implementar y agil sobre la interfaz de usuario.
🙀
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.
Al final no se que hice mal, Copiar y Pegar me resolvio el problema