No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Tablas

19/24
Recursos

Aportes 5

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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 😃

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>
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.
DUDA: Se pueden hacer columnas dinamicas? o siempre deben ser fijas? Y si hay una forma de hacerlas dinamicas... cual es?