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

Steps to set up Node.js Express.js for API, React.js for the front end, and Angular for the admin panel

How to build a login page with a static header and footer using Angular2

Issue with pre-selected default value in AngularJS TypeScript Kendo UI DropDownList

Encountering a Typescript error when defining a curried function after an uncurried function

"Launching" conduit for Observable

Securing your Angular application with an SSL certificate and key in the Ng Serve root directory

Navigating the Angular Element: A Guide to Clicking Buttons within Modal-Dialogs Using Protractor

Issue with using useState inside alert: unexpected empty array

Consolidating Angular 4 Observable HTTP requests into a single Observable to optimize caching

Dealing with reactive form controls using HTML select elements

When attempting to install an npm package using npm link, you may encounter the error TS2307: Module not found

Executing debounceTime outside of Angular's zone inside a material dialog

Unusual class title following npm packaging

Efficient method to activate openLayers 3 'singleClick' event from karma test

Angular 2's innovative approach to implementing a sticky footer concept

Using LitElement: What is the best way to call functions when the Template is defined as a const?

Creating a hierarchical visualization in Angular using a JSON object array

Transform the Standard class into a generic one in typescript

The modal stubbornly refuses to close

Receiving an error message "Cannot read property 'X' of undefined" when invoking a sibling method