Dealing with numerous dynamically generated tables while incorporating sorting in Angular: a comprehensive guide

Question

Dealing with numerous dynamically generated tables while incorporating sorting in Angular: a comprehensive guide

I am faced with a challenge involving multiple dynamically created Angular tables, each containing the same columns but different data. The issue at hand is sorting the columns in each table separately. At present, I have two tables set up. On clicking the column header arrow on the first table, it sorts correctly while doing the same on the second table yields no result.

Below is the pertinent HTML code snippet:

  <div appMaterialElevation *ngFor="let item of tables; let i = index">  
    <table
      mat-table
      [dataSource]="item.dataSource"
      multiTemplateDataRows
      matSort
      matSortActive="configName"
      matSortDirection="asc"
    > 
      <ng-container matColumnDef="configName">
        <th mat-header-cell *matHeaderCellDef mat-sort-header>Table Name</th>
      </ng-container>

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

Here's the relevant TypeScript snippet:

import { Component, ViewChild, ViewChildren, QueryList, OnInit, AfterViewInit, OnDestroy } from '@angular/core';
export class Row {
  configName: string;
}

export class FormatData {
  formatName: string;
  dataSource: MatTableDataSource<Row>;
  selection: SelectionModel<Row>;
}

export class ConfigureFormatsComponent implements OnInit, AfterViewInit, OnDestroy {
  @ViewChildren(MatPaginator) paginators = new QueryList<MatPaginator>();
  @ViewChildren(MatSort) sorts = new QueryList<MatSort>();
  tables: FormatData[];
  displayedColumns: string[] = ['configName'];

  getconfigformats() {
    this.tables = [] as FormatData[];    
    this.myService.getMyData()
      .subscribe((configList: MyConfigs[]) => {
        let table = new FormatData();
        let configNamesList = [] as Row[];
        configList.forEach(config => {
          let row = new Row();
          row.configName = config.configName;
          configNamesList.push(row);
         });
       table.dataSource = new MatTableDataSource<Row>(configNamesList);
       table.selection = new SelectionModel<Row>(true, []);
       this.tables.push(table);
       this.ngAfterViewInit();
     }
   });
  }

  ngAfterViewInit() {
    for (let i=0; i<this.tables.length; i++) {
      let table = this.tables[i];
      table.dataSource.sort = this.sorts.toArray()[i];
      table.dataSource.paginator = this.paginators.toArray()[i];
    };
  }

Is there anyone who can identify what might be causing my issue?

angular typescript angular-material

Answer 1

Answer №1

It is important to assign the sort to each "dataSource"

Therefore, a solution could look like this:

this.tables.forEach((item,i)=>{
  item.dataSource.sort=this.sort.find((_,index)=>index==i)
}

Notice how we select the QueryList using find((_x,index)

NOTE: it's crucial to note that

   //note that there are no ()
  @ViewChildren(MatPaginator) paginators = new QueryList<MatPaginator>;
  @ViewChildren(MatSort) sorts = new QueryList<MatSort>;

Update: It is necessary to allow Angular time to render the tables. We can achieve this by enclosing it in a setTimeout when assigning the MatSort.

In the stackblitz example, I have used something similar to:

dataSources:MatTableDataSource<any>[]=[]
@ViewChildren(MatSort) sorts:QueryList<MatSort>

ngOnInit()
{
  service.getData().subscribe((res:any[])=>{
    res.forEach((x,index)=>{
         this.dataSources[index]=new MatTableDataSource(x)
     })
     setTimeout(()=>{
      this.dataSources.forEach((x,index)=>{
        x.sort=this.sorts.find((_,i)=>i==index)
      })
     })
    })
  }

Update2: If you are unsure about your code, you can create a function like:

setSorts()
{
   setTimeout(()=>{
      this.tables.forEach((item:any,index:number)=>{
        const sort=this.sorts.find((_,i:number)=>i==index)
        item.dataSource.sort=sort
      })
   })
}

NOTE: Please note that your dataSource should be a MatTableDataSource. If you have an array, you should use:

table.dataSource=new MatTableDataSource<Row>(yourArray);

The setTimeout is necessary because when you add an element to your array, there may not be any sorting applied initially. You need to "wait" for Angular to render the tables. The setTimeout tells Angular: "hey! render the tables and then execute the functions inside the setTimeout."

Always remember to call this function whenever you add or remove an element from the "this.tables" array (each time you do a this.tables.push(..) or this.tables.remove)

About using find((_x,index)=>....), arrays or queryLists have methods like forEach, map, find.. which we usually use with only one argument, e.g. `

myArray.forEach((x:any)=>{...x is the value of the element..}

However, these methods also allow a second argument representing the index of the element, e.g.

myArray.forEach((x:any,index:number)=>{
 ...x is the value of the element and index the position..
 console.log(x,index)
}

When using "find", you can retrieve the element at the specified 'index'. Since we don't necessarily need the value of the variable, using a _ is common practice (but you can use any variable name)

Answer 2

It is important to assign the sort to each "dataSource"

Therefore, a solution could look like this:

this.tables.forEach((item,i)=>{
  item.dataSource.sort=this.sort.find((_,index)=>index==i)
}

Notice how we select the QueryList using find((_x,index)

NOTE: it's crucial to note that

   //note that there are no ()
  @ViewChildren(MatPaginator) paginators = new QueryList<MatPaginator>;
  @ViewChildren(MatSort) sorts = new QueryList<MatSort>;

Update: It is necessary to allow Angular time to render the tables. We can achieve this by enclosing it in a setTimeout when assigning the MatSort.

In the stackblitz example, I have used something similar to:

dataSources:MatTableDataSource<any>[]=[]
@ViewChildren(MatSort) sorts:QueryList<MatSort>

ngOnInit()
{
  service.getData().subscribe((res:any[])=>{
    res.forEach((x,index)=>{
         this.dataSources[index]=new MatTableDataSource(x)
     })
     setTimeout(()=>{
      this.dataSources.forEach((x,index)=>{
        x.sort=this.sorts.find((_,i)=>i==index)
      })
     })
    })
  }

Update2: If you are unsure about your code, you can create a function like:

setSorts()
{
   setTimeout(()=>{
      this.tables.forEach((item:any,index:number)=>{
        const sort=this.sorts.find((_,i:number)=>i==index)
        item.dataSource.sort=sort
      })
   })
}

NOTE: Please note that your dataSource should be a MatTableDataSource. If you have an array, you should use:

table.dataSource=new MatTableDataSource<Row>(yourArray);

The setTimeout is necessary because when you add an element to your array, there may not be any sorting applied initially. You need to "wait" for Angular to render the tables. The setTimeout tells Angular: "hey! render the tables and then execute the functions inside the setTimeout."

Always remember to call this function whenever you add or remove an element from the "this.tables" array (each time you do a this.tables.push(..) or this.tables.remove)

About using find((_x,index)=>....), arrays or queryLists have methods like forEach, map, find.. which we usually use with only one argument, e.g. `

myArray.forEach((x:any)=>{...x is the value of the element..}

However, these methods also allow a second argument representing the index of the element, e.g.

myArray.forEach((x:any,index:number)=>{
 ...x is the value of the element and index the position..
 console.log(x,index)
}

When using "find", you can retrieve the element at the specified 'index'. Since we don't necessarily need the value of the variable, using a _ is common practice (but you can use any variable name)

Dealing with numerous dynamically generated tables while incorporating sorting in Angular: a comprehensive guide

Answer №1

Similar questions

Developing a TypeScript library for versatile features across multiple projects

The process of retrieving input field values from a table within an Angular reactive form

Issue with Angular polyfill in IE11: The core-js version 3.6.5 method es.string.split.js is having trouble parsing the regex /^|s+/ when used with

How can I display 4 react components, such as custom buttons, in a manner that ensures the most recently pressed button appears on top?

Ensuring the accuracy of nested objects through class validator in combination with nestjs

Best practices for customizing Material UI v5 Switch using Theme

To implement a filter in MongoDB, make sure to specify a function argument before

Retrieving an array of objects from a JSON file using Angular 2

Troubleshooting: Unable to locate .vue.d.ts file during declaration generation with Vue, webpack, and TypeScript

Accessing the 'comment' property within the .then() function is not possible if it is undefined

Developing a React-based UI library that combines both client-side and server-side components: A step-by-step

Using Typescript: invoking static functions within a constructor

How should we correctly import jquery.inputmask?

Angular (Ionic): Updating component view with loop does not refresh

The interaction between Web API, Angular, and the unique MAC Address

Attempting to send numerous identifiers in an API request

Is the 'Remaining Amount' field and 'Remaining Amount is Greater than 0' field accessible within the Netsuite platform? If not, are there any alternative methods to achieve the same result?

Migrating to Angular Universal for server-side rendering with an external API server

Issue encountered: [object Object] is being displayed upon attempting to submit my username and password through a REST service in Angular

Exploring the concept of individuality within front-end development