Angular mat table with dynamic multi header row

Question

I want to create following table with help of angular mat table.

It consists of 2 header rows with dynamic values.

Example on mat-table -

Here, its top row static - https://v15.material.angular.io/components/table/examples#table-multiple-header-footer

Here Both row header has some content- https://v15.material.angular.io/components/table/examples#table-sticky-complex-flex

My top row has offset and dynamic values and second header row has repeated values like cities

Answer 1

you can use the exact solution from this https://stackblitz.com/edit/angular-material-table-multiple-header-rows?file=main.ts