Expandable nested Angular material data tables with pagination Not working as expected?

Question

I have a requirement that nested table with tabs, I am using angular material.

Required pagination for Branch Data(server Side Pagigantion) and inner tables within a two tabs(client side pagigantion) as well

it's not working as expected, Pagigantion is applying one for 0 index , from second recored I fi click second page paging it's updating third table , third-> 4 th updating

I taken like thease

//branch

branchSource: MatTableDataSource;

@ViewChild('branchSort', { static: true }) sort: MatSort;

@ViewChild(MatPaginator, { static: true }) branchPaginator: MatPaginator;

//tab1

@ViewChildren('innerTables') innerTables: QueryList<MatTable>;

@ViewChildren(MatPaginator) paginator: QueryList;

@ViewChildren('innerSort') innerSort: QueryList;

//tab2

@ViewChildren('innerTables1') innerTables1: QueryList<MatTable>;

@ViewChildren('innerSort1') innerSort1: QueryList;

@ViewChildren(MatPaginator) paginator1: QueryList;

For Reference Please check: < https://stackblitz.com/edit/angular-nested-mat-table-2ave8p?file=app%2Ftable-expandable-rows-example.ts>

Suggest me good approach to fullfill the requiremnet . Thanks in advance

Soumya Gangamwar Soumya Gangamwar · Accepted Answer · 2020-08-15T08:56:57

I solved my problem

The problem is mat viewchild reference

I modified my code like this

@ViewChild('branchSort', { static: true }) sort: MatSort;
  @ViewChildren('innerSort') innerSort: QueryList<MatSort>;
  @ViewChildren('innerSort1') innerSort1: QueryList<MatSort>;
  @ViewChildren('innerTables') innerTables: QueryList<MatTable<any>>;
  @ViewChildren('innerTables1') innerTables1: QueryList<MatTable<any>>;
  @ViewChildren('paginator') paginator: QueryList<MatPaginator>;

  @ViewChildren('paginator1') paginator1: QueryList<MatPaginator>;
  @ViewChild(MatPaginator, { static: true }) batchPaginator: MatPaginator;

https://stackblitz.com/edit/angular-nested-mat-table-dmzvun?file=app%2Ftable-expandable-rows-example.ts

Expandable nested Angular material data tables with pagination Not working as expected?

1 Answers