Francisco, miembro de este equipo de trabajo, nos hizo el favor de escribir este artículo porque controla muy bien el tema.
Solución:
Nota: Para aquellos que quieran saltarse la larga explicación, aquí está el ejemplo de StackBlitz.
Lo que realmente quieres es crear un anidado mat-table donde todas las tablas anidadas se pueden ordenar y también se pueden filtrar.
En primer lugar, dado que necesita filtrar y clasificar en su tabla anidada, debe crear una nueva MatTableDataSource para ello. Esto se puede hacer inicialmente cuando se crea el principal dataSource en el ngOnInit como abajo.
usersData: User[] = [];
USERS.forEach(user =>
if (user.addresses && Array.isArray(user.addresses) && user.addresses.length)
this.usersData = [...this.usersData, ...user, addresses: new MatTableDataSource(user.addresses) ];
else
this.usersData = [...this.usersData, user];
);
this.dataSource = new MatTableDataSource(this.usersData);
Del ejemplo de filas expandibles en los documentos, podemos ver cómo crear una fila expandible. En la fila expandible, ahora tendremos una tabla junto con el Filter aporte. Agregaremos algunas condiciones para que la fila sea expandible solo si hay addresses presente.
innerColumn
element[innerColumn]
Ahora que la fila se expande solo si hay elementos anidados, debemos deshacernos del desplazamiento para los usuarios que no tienen addresses
Aquí está el CSS responsable de agregar un background-color en vuelo estacionario
tr.example-element-row:not(.example-expanded-row):hover
background: #777;
Así que solo tenemos que agregar el example-element-row clase a nuestra fila si la fila tiene un address. Si no tiene una dirección, no se debe hacer clic en la fila y no debe haber un cursor que le indique al usuario que, de hecho, no se puede hacer clic en la fila.
En toggleRow, definiremos la lógica de lo que sucede cuando hace clic en una fila de la plantilla. También implementaremos sort cuando el usuario hace clic en la fila en esta función.
@ViewChildren('innerSort') innerSort: QueryList;
toggleRow(element: User)
element.addresses && (element.addresses as MatTableDataSource).data.length ? (this.expandedElement = this.expandedElement === element ? null : element) : null;
this.cd.detectChanges();
this.innerTables.forEach((table, index) => (table.dataSource as MatTableDataSource).sort = this.innerSort.toArray()[index]);
Finalmente, necesitamos definir el applyFilter para que las tablas anidadas se puedan filtrar.
@ViewChildren('innerTables') innerTables: QueryList>;
applyFilter(filterValue: string)
this.innerTables.forEach((table, index) => (table.dataSource as MatTableDataSource).filter = filterValue.trim().toLowerCase());
Aquí hay un ejemplo de trabajo en StackBlitz.
Si guardas algún incógnita o disposición de aclarar nuestro sección eres capaz de escribir una anotación y con gusto lo estudiaremos.