Closed AmbroiseVuaridel closed 4 years ago
I've got same the issue. No updates available? Thanks in advance.
Elisa
tampoco me ha funcionado :(
im have a same issue, datasource is not changing when hit sort method. it is not rearranging the datasource
He encontrado una solución, aun que no muy efectiva.
El problema es que para que puedan verse los cambios en el orden, debe llamarse al constructor nuevamente. Es un gran defecto de la libreria, por que se pierden configuraciones al hacerlo.
this.dataSource = new TableVirtualScrollDataSource
Entonces, para controlar el momento donde se asigna el orden en los datos tuve que controlar el metodo de ordenamiento: en HTML:
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8"
(matSortChange)="sortData($event)">
en app.component.ts
import {Sort} from '@angular/material/sort';
....
sortData(sort: Sort) {
const data = this.dataSource.data
if (!sort.active || sort.direction === '') {
this.dataSource.data = data;
return;
}
this.dataSource = new TableVirtualScrollDataSource<PeriodicElement>( data.sort((a, b) => {
const isAsc = sort.direction === 'asc';
switch (sort.active) {
case 'position': return compare(a.position, b.position, isAsc);
case 'name': return compare(a.name, b.name, isAsc);
case 'weight': return compare(a.weight, b.weight, isAsc);
case 'symbol': return compare(a.symbol, b.symbol, isAsc);
default: return 0;
}
}))
}
function compare(a: number | string, b: number | string, isAsc: boolean) {
return (a < b ? -1 : 1) * (isAsc ? 1 : -1);
}
Se deben configurar nuevamente los filtros si los tienen (this.dataSource.filterPredicate).
https://stackblitz.com/edit/angular-jcigfk?file=src/app/app.component.ts
Hi!
Looks like the problem was in import of MatSort in component.
When I made this change
import { MatSort } from '@angular/material';
->
import { MatSort } from '@angular/material/sort';
all works for me.
I add the fix to your stackblitz: https://stackblitz.com/edit/angular-zo2noq Please, let me know if this fixed your issue
Me ha funcionado con eso! y mejore mi codigo..
El único inconveniente, es que al tener objetos complejos tuve que configurar el sortingDataAccessor.
Por ejemplo, para mi proyecto:
this.dataSource.sortingDataAccessor = (item, property) => {
switch (property) {
case 'agente': return item.agente.nombre;
case 'direccion': return item.direccion.nombre;
default: return item[property];
}
};
this.dataSource.sort = this.sort;
y funciono perfectamente, gracias!
I managed to make everything work except for the sorting. i have reproduced it there : https://stackblitz.com/edit/angular-8nw22p