Question 298189 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Datasource mat-table is not updating

I have a function that trigger when I sort the table deepens of a column I click but the data is not updating.
This is the function and the table code:

<table mat-table #table [dataSource]="dataSourceMD" matSort (matSortChange)="getRowMaximoTable($event)" matTableExporter #exporter="matTableExporter" #sortMD="matSort" class="tr_table">

    <ng-container *ngFor="let disCol of displayedColumnsMD; let colIndex = index"
        matColumnDef="{{disCol}}" [sticky]="isIn(disCol)">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>
            <div [innerHTML]="displayedColumnsNamesMD[colIndex]"></div>
        </th>
        <td mat-cell *matCellDef="let element"  [style.background-color]="element[disCol+'Color']" [style.color]="element[disCol+'Texto']">
            <div *ngIf="element[disCol]" [innerHTML]="element[disCol]"></div>
            <div *ngIf="!element[disCol] && !isIn(disCol)" [innerHTML]="'-'"></div>
        </td>
    </ng-container>

    <ng-container *ngFor="let filCol of displayedFilterColumnMD; let colIndexF = index"
        matColumnDef="{{filCol}}" [sticky]="colIndexF<3">
        <th mat-header-cell *matHeaderCellDef [style.text-align]="center" [attr.colspan]="1">
            <mat-form-field class="columnas" floatLabel='never'>
                <input matInput placeholder="Filtro" type="text"
                    [(ngModel)]='filterTableMD[displayedColumnsMD[colIndexF]]'
                    name="displayedColumnsMD[colIndexF]"
                    (keyup)="hanlerOnChangeFilter($event, 'MD',displayedColumnsMD[colIndexF])">
                <button mat-button *ngIf="filterTableMD[displayedColumnsMD[colIndexF]]"
                    (click)="handlerClearFilterField('MD',displayedColumnsMD[colIndexF])" matSuffix
                    mat-icon-button aria-label="Clear">
                    <mat-icon class="material-icons-outlined">close</mat-icon>
                </button>
            </mat-form-field>
        </th>
    </ng-container>          

    <tr mat-header-row *matHeaderRowDef="displayedColumnsMD; sticky: true"></tr>
    <tr mat-header-row *matHeaderRowDef="displayedFilterColumnMD"></tr>
    <tr mat-row [ngClass]="{ 'maximo-row': i == indexMaximoMD }" *matRowDef="let row; columns: displayedColumnsMD; let i = index"></tr>

</table>

function:

getRowMaximoTable(event?: MatSort) {
    let originalArrayData = [ ...this.dataSourceMD.data ];

    const valoresArrayASortear = originalArrayData.slice(0, -4);
    const valoresArrayFijos = originalArrayData.slice(-4);
    const sortedArray = this.dataSourceMD.sortData(valoresArrayASortear, this.dataSourceMD.sort);

    this.dataSourceMD.data = [...sortedArray, ...valoresArrayFijos];
}

I want to update the data correctly when i click of one header columns

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I solved it this way:

     this.dataSourceMD.sortingDataAccessor = (item, property) => {
      let sortDirection = this.sortMD.direction;
      if((this.dataSourceMD.data.indexOf(item) >= this.dataSourceMD.data.length - 4) && (sortDirection == 'asc')){
        return "ZZZZZ";
      } else if((this.dataSourceMD.data.indexOf(item) >= this.dataSourceMD.data.length - 4) && (sortDirection == 'desc')){
        return "AAAAA";
      }
      return item[property];
    };

  2. 0

    Can you try forcing angular to run change detection again to solve this issue?

    import { Component, ChangeDetectorRef } from '@angular/core';

@Component({
  selector: 'app-dummy',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class DummyComponent {

  constructor(private cdr: ChangeDetectorRef) {}

  getRowMaximoTable(event?: MatSort) {
    let originalArrayData = [...this.dataSourceMD.data];

    const valoresArrayASortear = originalArrayData.slice(0, -4);
    const valoresArrayFijos = originalArrayData.slice(-4);
    const sortedArray = this.dataSourceMD.sortData(valoresArrayASortear, this.dataSourceMD.sort);

    this.dataSourceMD.data = [...sortedArray, ...valoresArrayFijos];
    this.cdr.detectChanges(); // force change detection to recheck array
  }
}
    Login or Signup to reply.
  3. 0

    you can try get the MatdataTable using viewChild and use table.renderRows() to force to render again or create a new MatDataTable

    @ViewChild('table') table!:MatTable
//or Simple
//@ViewChild('table') table!:MatTable


//and use:
this.table.renderRows()

    Or use

    this.dataSourceMD=new MatTableDataSource([...sortedArray, ...valoresArrayFijos])
//remember that if you create a new MatDataTable
//you loose the matSort and paginator

this.dataSourceMD.sort=this.matSort  
this.dataSourceMD.paginator=this.paginator
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search