How to show split header in the material table having nested group of data in angular

Question

I am having trouble displaying data in the material table when the data is coming as a nested array of objects.

I would like to display the table which is currently displayed in the stackblitz.

If I changed the existing data with my newData variable it will start breaking whole table.

Can anybody guide me How I can achieve split header function with group of nested data in the material table?

I would like to achieve something like this.

Here is my stackblitz. https://stackblitz.com/edit/angular-bklajw-5foa62

As you have grouping data means nested array also. The best way to handling it using a nested table inside a parent table. — Vimal Patel
– Vimal Patel, Commented Dec 18, 2020 at 15:32
Thanks vimal.. How I can make sticky header to this table ? stackoverflow.com/questions/65430713/… — app
– app, Commented Dec 23, 2020 at 21:39

Christophe Le Besnerais · Accepted Answer · 2020-12-18 13:42:22Z

1

the data source need to be an array of data you want to display. So you have to change

dataSource1 = newData;

to

dataSource1 = newData.data.summary;

You will also need to change the columns in the template since the objects are different, for example:

<td mat-cell *matCellDef="let element" class="similar-cell-width">{{ element.data[0].amount }}</td>

answered Dec 18, 2020 at 13:42

Christophe Le Besnerais

4,8533 gold badges29 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

app Over a year ago

thanks for answer Chris..what if the positions will change in the array? Is there anyway to check the condition before using element.data[0].amount?

Christophe Le Besnerais Over a year ago

you can use regular typescript code between the {{ }}, even call a method (like {{ processData(element) }}). So you can do whatever array manipulation you want here.

app Over a year ago

Sorry, if I am asking much. Is it possible for you to provide an example in the stackblitz?stackblitz.com/edit/angular-bklajw-5foa62

app Over a year ago

Thanks Chris.. it worked, I just have one question that how I can apply style to header now? I am not able to add sticky header here. stackoverflow.com/questions/65430713/…

Collectives™ on Stack Overflow

How to show split header in the material table having nested group of data in angular

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related