Mantén la atención porque en esta reseña encontrarás la solución que buscas.
Solución:
Una respuesta muy simple sería ordenar por GroupID, esto juntará esas filas en grupos. Sin embargo, supongo que desea que se muestre una fila de encabezado antes de cada grupo.
Puede proporcionar una alternativa
Los datos que proporcione a la tabla serían las filas de datos intercaladas con filas de grupo, y la función diferencia una de la otra. Tomando el uso básico de
como iniciador, agregue manualmente los grupos y agregue la función de cláusula where a app/table-basic-example.ts:
`
*/
@Component(
selector: 'table-basic-example',
styleUrls: ['table-basic-example.css'],
templateUrl: 'table-basic-example.html',
)
export class TableBasicExample
displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
dataSource = ELEMENT_DATA;
isGroup(index, item): boolean
return item.group;
/** Copyright 2018 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license */
Y agregue la columna groupHeader y matRowDef adicional a app/table-basic-example.html:
No. element.position Name element.name Weight element.weight Symbol element.symbol group.group
Aquí hay un stackblitz terminado que se agrupa por la letra inicial del elemento.
Y aquí hay un stackblitz mucho más desarrollado, solo proporcione la lista de columnas por las que desea agrupar e insertará las filas del grupo por usted. También puede hacer clic en las filas del grupo para expandirlas o contraerlas.
Y finalmente, aquí hay un proyecto de Github que modifica una copia de la clase MatTableDataSource del código base del material. Funciona bien con filtrar y ordenar, pero 'compite' con el paginador, ya que ambos limitan la vista de los registros de diferentes maneras.
Usando la respuesta de Stephen Turner, ahora compartiendo esta bifurcación stackblitz que
Dinámicamente descubre columnas en los datos dados
Permite agrupar por distintos valores de las columnas bajo demanda
Como se señaló anteriormente en este hilo,
la manera fácil de agrupar con Mat-Table es en la práctica agregar filas en los datos mostrados,
estas líneas agregadas al inicio de cada nuevo grupo pueden recibir una plantilla personalizada con @Input(matRowDefWhen)
En el ejemplo anterior, la función isAGroup debería devolver true cuando una línea es un grupo y no parte de los datos iniciales.
Además, la plantilla de columna groupName podría implementarse de la siguiente manera
group.name
Finalmente, si su conjunto de datos puede variar, se podría agregar un ciclo en las definiciones de plantilla de columna
col
row[col]
luego, ocultar y mostrar las líneas del grupo es solo una cuestión de filtrar los datos mostrados en función de los criterios de grupo recientemente ocultos y actualizar los datos mostrados.
Lo siento por este hilo necro, solo con el objetivo de compartir un código reutilizable para aquellos que buscan una solución.
