last day (15 days later) » 

12:14 AM
3
Q: How to do sorting and pagination if put matTableDataSource in like hasmap structure in angular

Hongli BuWe know it is easy to do sorting and pagination in angular(only consider sorting in client end). refer to : https://stackblitz.com/angular/dnblbyvggqyj?file=src%2Fapp%2Ftable-sorting-example.ts. But how to integrate sorting and pagination for several seperate tables(same data structure for these ...

 
There is a one key thing: we don't know how many table need to be generated before fetching the data. So we don't know how many ViewChild and MatTableDataSource
can anyone help?
 
Raj
you have multiple tables in single component and you want to show each of table with pagination right?
 
@Raj yes! You are correct.
 
Raj
do you have any idea how many tables will be in the same component?
 
@Raj it depends, actually. sometimes 0, sometimes can be 10. Max <= 10
@Raj Rightnow, I am thinking it may easier to put each table as a child component, and use *ngFor to generate the table. Initialize the viewChild in the child component and in afterViewInit{} of child component, we assign sorting and pagination propety. Like this.dataSource.sort = this. sort
 
Raj
12:14 AM
can you show me the sample of the json data of the tables
 
@Raj, The Raw data is A HashMap, in this hashmap, we have key, one key means one table. for each key, the value is the json array filling in the table so like {'k1' : [{'id' : '1'}, {'id': '2'} ], 'k2': [{}]}
 
Raj
12:27 AM
K1 is the table name or unique id?
 
table name,the name is also an unique string
 
Raj
ohh okay... give sometime I will update you
 
like, in this case, we have k1 table, k2 table. in k1 table, we have two rows.
I want to do sorting in these two separate table
 
Raj
okay I will update you
 
Thank you Raj
 
Raj
12:30 AM
the data for the all the tables will have same properities right
 
yes
very simple strcture, no nested object
I need to put to different table only because they are belonging to different group
 
Raj
okay
 
Raj
12:52 AM
check out the code
I pasted in the answer
 
ok
thank you
 
Raj
1:23 AM
if it works let me know.
 
 
14 hours later…
Raj
2:54 PM
did it worked?
 
 
4 hours later…
Raj
7:17 PM
Thank you my friend for accepting the answer
 

last day (15 days later) »