Is there general problem Nested Table sorting an Angular?

Question

If I have only one datatable I can sorting all values correctly. But sometimes I have nested table. For examle user can select city on the table, after that (city has lots of location ) location showns and user can select one of location on the second table. After that (location has lots of house) user can select one of house on the third table. So, sometimes I have to show to user nested table. I want to user can sort house number or house gate colour or etc. correctly. BUt sorting does not work. I checked matColumnDef and matCellDef some word. ( matColumnDef="name" and *matCellDef="let element"> {{element.name}} ) All values shown correctly so actually table work good. Only table sorting does not work. On diffrent page (has only one table like user) sorting works good. Can anybody help me ?

OnInit:

export class ListComponent implements OnInit {
nestedZoneTableData = new MatTableDataSource<any>();
senderDevicesData = new MatTableDataSource<any>();
devicesData = new MatTableDataSource<any>();
}

AfterViewInit:

ngAfterViewInit() {

this.nestedZoneTableData.sortingDataAccessor = (
  data,
  sortHeaderId
): string => {
  return data[sortHeaderId];
};
this.nestedZoneTableData.sort = this.zsorter;

this.senderDevicesData.sortingDataAccessor = (
  data,
  sortHeaderId
): string => {
  return data[sortHeaderId];
};
this.senderDevicesData.sort = this.sdsorter;

this.devicesData.sortingDataAccessor = (data, sortHeaderId): string => {
  return data[sortHeaderId];
};
this.devicesData.sort = this.dsorter;

}

HTML too long so I can show only small part.:

      <table mat-table style="background-color: pink;" [dataSource]="senderDevicesData" matSortActive="description" matSortDirection="asc"
                  matSort matSortDisableClear multiTemplateDataRows #sdsorter="matSort"
                  class=" deneme col-md-12 mat-elevation-z8">
                  <ng-container matColumnDef="activeFlag">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header="activeFlag"></th>
                    <td mat-cell *matCellDef="let element"></td>
                  </ng-container>
                  <ng-container matColumnDef="legacyOctogateSerialnumber">
                    <th mat-header-cell *matHeaderCellDef mat-sort-header="legacyOctogateSerialnumber">
                      {{'i18n-sender-serial_number' | translate}}
                    </th>
                    <td mat-cell *matCellDef="let element"> {{element.legacyOctogateSerialnumber}} </td>
                  </ng-container> 


...
      <table style = "background-color: yellow;" mat-table [dataSource]="devicesData" matSortActive="name" matSortDirection="asc"
                              matSort matSortDisableClear multiTemplateDataRows #dsorter="matSort"
                              class="col-md-12 mat-elevation-z8">
<ng-container matColumnDef="mChannel">
                                <th mat-header-cell *matHeaderCellDef mat-sort-header="mChannel">
                                  {{'i18n-sender-m_channel' | translate}}
                                </th>
                                <td mat-cell *matCellDef="let element"> {{element.mChannel}} </td>
                              </ng-container>
 <ng-container matColumnDef="mSlaveAddress">
                                <th mat-header-cell *matHeaderCellDef mat-sort-header="mSlaveAddress">
                                  {{'i18n-sender-m_slave_address' | translate}}
                                </th>
                                <td mat-cell *matCellDef="let element"> {{element.mSlaveAddress}} </td>
                              </ng-container>
...

Vishal Pandey · Answer 1 · 2021-06-02T12:40:42.497

1

here you'll find all sorting packages and api's you can use those to

to sort the nested table you can use sortingDataAccessor from angular documentation you can refer following documentation for more information

https://github.com/angular/components/issues/15888

getProperty = (obj, path) => (
  path.split('.').reduce((o, p) => o && o[p], obj)
)

ngOnInit() {
  this.dataSource = new MatTableDataSource(yourData);
  this.dataSource.sortingDataAccessor = (obj, property) => this.getProperty(obj, property);
  this.dataSource.sort = sort;
}

columnDefs = [
  {name: 'project.name', title: 'Project Name'},
  {name: 'position', title: 'Position'},
  {name: 'name', title: 'Name'},
  {name: 'test', title: 'Test'},
  {name: 'symbol', title: 'Symbol'}
];

and in html you can call by using jinga syntax tell me if above code worked for you

edited Jun 02 '21 at 12:40

answered Jun 02 '21 at 09:16

Vishal Pandey

349
1
4
15

I edit my question ( add my code part). In your suggested documentation they say that : Sorting works as expected if the sortingDataAccessor is assigned before the sort member, so I do like that. Do you see any mistake my code ? thanks. – Gülay Uygun Jun 02 '21 at 11:02
i think yes its right also i have used `import { MatSort } from '@angular/material/sort';` this module from angular material i'll paste the link in answer you refer that to – Vishal Pandey Jun 02 '21 at 12:39
I can not solve my sorting problem yet, but thanks your advice. 1) add app.module.ts to MatSortModule and MatTableModule. 2) in ts file , add setTimeout to this.devicesData.sort = this.dsorter; 3) add @ViewChild like @ViewChild("dsorter", { static: false, read: MatSort }) dsorter: MatSort; 4) in html file , in table tag , try to [dataSource]="senderDevicesData" and [dataSource]="this.senderDevicesData" 5) also matColumnDef and matCellDef same BUT SORTING DOES NOT WORKING YET! – Gülay Uygun Jun 02 '21 at 12:52
ok i'll search for another solutions as well – Vishal Pandey Jun 02 '21 at 13:01
`displayColumns1: string[] = ['media_type', 'profile_picture_url', 'username', 'impressions', 'reach', 'engagement', 'likes', 'comments', 'caption', 'create_date', 'post_link']; @ViewChild('sort1', { static: true }) sort1: MatSort; ` I have used this to sort my table and this is working – Vishal Pandey Jun 02 '21 at 13:03
Have install and imported matsort if yes then just some more packages in angular materials – Vishal Pandey Jun 02 '21 at 13:47

Is there general problem Nested Table sorting an Angular?

1 Answers1