angular - tablas - Tabla mat múltiple con MatSort dentro del mismo componente

pagination angular material

Question

Tengo 2 tablas de material 2 en el mismo componente con clasificación. No puedo encontrar una manera de asignar la directiva MatSort a su propia tabla. Solo puedo usar MatSort en la primera tabla y la segunda tabla no reconoce que hay un MatSort en ella. ¿Alguien sabe cómo configurar dos tablas con clasificación en el mismo componente?

He intentado definir el ViewChild con diferentes nombres, pero no funcionó.

@ViewChild(''hBSort'') hBSort: MatSort;
@ViewChild(''sBSort'') sBSort: MatSort;


this.hBSource = new HBDataSource(this.hBDatabase, this.hBPaginator, 
this.hBSort);
this.sBSource = new SBDataSource(this.sBDatabase, this.sBPaginator, 
this.sBSort);

Table 1
const displayDataChanges = [
   this.hBPaginator.page,
   this.hBSort.sortChange,
   this._filterChange
];

Table 2
const displayDataChanges = [
   this.sBPaginator.page,
   this.sBSort.sortChange,
   this._filterChange
];

Table 1
<mat-table #hBtable [dataSource]="hBSource" matSort style="min-width: 
740px;">
    <ng-container matColumnDef="domain">
        <mat-header-cell *matHeaderCellDef mat-sort-header> {{''list.domain'' | translate}} </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.domain}} </mat-cell>
    </ng-container>
    <ng-container matColumnDef="general">
        <mat-header-cell *matHeaderCellDef mat-sort-header> {{''list.general'' | translate}} </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.general.gNum}} ({{row.general.gPct | number: ''1.1-2''}}%) </mat-cell>
    </ng-container>
    <mat-header-row *matHeaderRowDef="hBColumns"></mat-header-row>
    <mat-row *matRowDef="let row; columns: hBColumns;"></mat-row>
 </mat-table>


Table 2
<mat-table #sBSort [dataSource]="sBSource" matSort style="min-width: 1200px;">
      <ng-container matColumnDef="domain">
        <mat-header-cell *matHeaderCellDef mat-sort-header> {{''list.domain'' | translate}} </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.domain}} </mat-cell>
      </ng-container>
      <ng-container matColumnDef="general">
        <mat-header-cell *matHeaderCellDef mat-sort-header> {{''list.general'' | translate}} </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.general.gNum}} ({{row.general.gPct | number: ''1.1-2''}}%) </mat-cell>
      </ng-container>
      <mat-header-row *matHeaderRowDef="sBColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: sBColumns;"></mat-row>
</mat-table>

Answer 1

Aquí hay una solución de trabajo Angular 6:

import { MatSort, MatTableDataSource } from ''@angular/material'';

...

@ViewChild(''sortCol1'') sortCol1: MatSort;
@ViewChild(''sortCol2'') sortCol2: MatSort;

...

Fuente de datos 1:

this.dataSource1 = new MatTableDataSource(this.dataSource1);
this.dataSource1.sort = this.sortCol1;

Fuente de datos 2:

this.dataSource2 = new MatTableDataSource(this.dataSource2);
this.dataSource2.sort = this.sortCol2;

...

Tabla 1 (Vista):

<table mat-table #sortCol1="matSort" [dataSource]="dataSource1" matSort matSortActive="ID" matSortDirection="asc">
...
</table>

Tabla 2 (Vista):

<table mat-table #sortCol2="matSort" [dataSource]="dataSource2" matSort matSortActive="ID" matSortDirection="asc">
...
</table>

Answer 2

La solución a esto es que después de definir su referencia de ViewChild en el DOM, debe asegurarse de agregar el = "matSort" después.

Pasos:

1. Configure instancias de MatSort en su componente y defíndalas en sus dependencias de DataSource de la siguiente manera:

   @ViewChild(''hBSort'') hBSort: MatSort;
   @ViewChild(''sBSort'') sBSort: MatSort;
   
   this.hBSource = new HBDataSource(this.hBDatabase, this.hBPaginator, 
   this.hBSort);
   this.sBSource = new SBDataSource(this.sBDatabase, this.sBPaginator, 
   this.sBSort);

2. Defina ViewChild References en el DOM y ajústelos a matSort (Nota: el atributo matSort está en la etiqueta mat-table):

   Table 1
   <mat-table #hBSort="matSort" [dataSource]="hBSource" matSort 
     style="min-width: 740px;">
               ***Table Rows and pagination***
   </mat-table>
   
   Table 2
   <mat-table #sBSort="matSort" [dataSource]="sBSource" matSort 
     style="min-width: 1200px;">
               ***Table Rows and pagination***
   </mat-table>   

Answer 3

Recomendaría crear un componente común para la tabla que se pueda utilizar en varios lugares de la aplicación. Como el componente creará la instancia separada de él, la tabla mat no entrará en conflicto con la funcionalidad.

En ese caso, no es necesario repetir el código de 2 tablas. A continuación se muestra el componente común de la tabla que puede implementar.

Home.component.ts

export class HomeComponent implements OnInit {
  public data1: any[];
  public data2: any[];
  constructor() {
  }
  ngOnInit() {
   this.data1 = [
    {domain: ''Hello1'', gNum: 1, gPct: ''table-data1''},
    {domain: ''Hello2'', gNum: 2, gPct: ''table-data2''},
    {domain: ''Hello3'', gNum: 3, gPct: ''table-data3''},
    {domain: ''Hello4'', gNum: 4, gPct: ''table-data4''},
    {domain: ''Hello5'', gNum: 5, gPct: ''table-data5''},
    {domain: ''Hello6'', gNum: 6, gPct: ''table-data6''},
    {domain: ''Hello7'', gNum: 7, gPct: ''table-data7''},
   ];
   this.data2 = [
    {domain: ''Hello1'', gNum: 1, gPct: ''table-data1''},
    {domain: ''Hello2'', gNum: 2, gPct: ''table-data2''},
    {domain: ''Hello3'', gNum: 3, gPct: ''table-data3''},
    {domain: ''Hello4'', gNum: 4, gPct: ''table-data4''},
    {domain: ''Hello5'', gNum: 5, gPct: ''table-data5''},
    {domain: ''Hello6'', gNum: 6, gPct: ''table-data6''},
    {domain: ''Hello7'', gNum: 7, gPct: ''table-data7''},
   ]
  }
}

Home.component.html

 <app-table-component [data]=''data1''></app-table-component>
 <app-table-component [data]=''data2''></app-table-component>

Table.component.ts

@Component({
  selector: ''app-table-component'',
  templateUrl: ''table.component.html'',
  styleUrls: [''table.component.scss''],
  changeDetection: ChangeDetectionStrategy.OnPush
})

export class TableComponent implements OnInit, OnChanges {
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;
  @Input() data: any[];
  public displayedColumns = [''domain'', ''gNum'', ''gPct''];
  public dataSource: MatTableDataSource<any>;

  constructor() {
  }

  public ngOnInit() {
    setTimeout(() => {
        this.dataSource = new MatTableDataSource(this.data);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
   });
  }

  public ngOnChanges(changes: SimpleChanges) {
    this.dataSource = new MatTableDataSource(changes.data.currentValue);
  }

}

Table.component.html

   <mat-table #table [dataSource]="dataSource" matSort  matSortDisableClear matSortDirection="asc">
  <ng-container matColumnDef="domain">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Domain </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.domain}} </mat-cell>
  </ng-container>

 <ng-container matColumnDef="gNum">
    <mat-header-cell *matHeaderCellDef mat-sort-header>G Number </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.gNum}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="gPct">
    <mat-header-cell *matHeaderCellDef mat-sort-header>Global Pct </mat-header-cell>
    <mat-cell *matCellDef="let row"> {{row.gPct}} </mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
  <mat-row  *matRowDef="let row; columns: displayedColumns;">
  </mat-row>
</mat-table>

<mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>

Answer 4

Editar:

Creo que necesitas:

@ViewChild(MatSort) sort: MatSort;

encima de tu

@ViewChild(''hBSort'') hBSort: MatSort;
@ViewChild(''sBSort'') sBSort: MatSort;

Entonces:

ngAfterViewInit() {
    this.hBSource.sort = this.sort;
    this.sBSource.sort = this.sort;
  }

Suponiendo que su HBDataSource y SBDataSource exportan MatTableDataSource ();

Estoy haciendo referencia a estas fuentes:

https://material.angular.io/components/sort/overview https://github.com/angular/material2/blob/master/src/demo-app/table/table-demo.ts