0
1.3K
Vistasng-zorro antd, nz-table columnas y filas de tablas dinámicas
Tengo una tabla donde las columnas y las celdas de fila se configuran dinámicamente, en el encabezado de la tabla , el contenido debe ser dinámico y también para table body tr tal vez contenga HTML que contenga otra etiqueta de componente.
¿Hay alguna forma de manejar eso? He creado un componente llamado tabla y esta tabla tiene @Input y @Output para ser reutilizable para diferentes usos.
en la documentación de ng-zorro, no hay forma de usar la técnica de la fuente de datos de la tabla, por lo que puedo usar funciones de procesamiento como reaccionar y.
1 Respuestas
Responde la pregunta0
Puede crear dos entradas, una para las columnas y otra para las filas.
Para hacer que las columnas sean dinámicas, debe enviar a la entrada de la columna una matriz con objetos de columna. Allí puedes configurar todo lo que quieras. Usualmente uso el título y la función de columna así:
listOfColumn = [ { title: 'Code', compare: (a: User, b: User) => a.code.localeCompare(b.code) }, { title: 'Customer', compare: (a: User, b: User) => a.name.localeCompare(b.name) } ]El código html para usarlo es el siguiente:
<thead> <tr> <th *ngFor="let column of listOfColumn" [nzSortFn]="column.compare">{{ column.title }}</th> </tr> </thead>Y para los datos, simplemente envíelos a otra entrada y configure la matriz como entrada de datos para la tabla y haga un bucle para mostrar el contenido:
<nz-table #basicTable [nzData]="data"> <thead> <tr> <th *ngFor="let column of listOfColumn" [nzSortFn]="column.compare">{{ column.title }}</th> </tr> </thead> <tbody> <tr *ngFor="let user of basicTable.data"> <td>{{ user.code }}</td> <td>{{ user.name }}</td> </tbody> </nz-table>Espero haber respondido a tu pregunta :D