Table in angular material with one top heading for two rows and a side heading

I am trying to create responsive angular material tables in a row having separate top heading and side heading as shown: enter image description here

The Table1, Table2, Value1, value2,... and item1, item2 headings are static. While 001,002,... and 011, 012,.. values are coming from service response.

To create the same, I tried to implement by modifying basic model code from . It its supports only one heading for a row. When I tried to add a common heading it didn't worked and I messed up the code altering. Thus not worth sharing. How can I implement the same so that I get responsive material table with single column of dynamic data from service side and side headings and top common heading. Please help. Any link to sample code to learn from would be also helpful. Thanks in advance.