sorting not working

[AmbroiseVuaridel]

I managed to make everything work except for the sorting. i have reproduced it there : https://stackblitz.com/edit/angular-8nw22p

[edistefano]

I've got same the issue. No updates available? Thanks in advance.

Elisa

[mbeta]

tampoco me ha funcionado :(

[razor143225]

im have a same issue, datasource is not changing when hit sort method. it is not rearranging the datasource

[mbeta]

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( data.sort);

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

[diprokon]

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

[mbeta]

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!