How to show data by pivoting on a column value in a table using angular mat-table?

I have a datasource which looks something similar like below

[{
    "testDisplayName": "Test_Name_1",
    "data": {
       "metrics": [
          {
            "metricValue": -0.18,
            "metricKey": "metricKey_1"
          },
          {
            "metricValue": 3.9,
            "metricKey": "metricKey_2"
          },
        ]
    },
    "url": "some_url",
    "revision": "rev1",
    "dId": "dId_1",
    "release": "release_1",
    "buildId": "build_1"
},
{
    "testDisplayName": "Test_Name_1",
    "data": {
       "metrics": [
          {
            "metricValue": -0.20,
            "metricKey": "metricKey_3"
          },
          {
            "metricValue": 3.8,
            "metricKey": "metricKey_4"
          },
        ]
    "url": "url_2",
    "revision": "rev2",
    "dId": "dId_2",
    "release": "release_2",
    "buildId": "build_2"
}]

Now I would like to show the above data in a tabular format using mat table something like below.

             build_1 release_1     build_2 release_2 => these are dynamic values from the data
                             
Metric Key     Metric value          Metric Value         => Static displayColumns

metricKey_1      -0.18                   3.9
metricKey_2      -0.20                   3.8

The above table data will get filtered based on the testDisplayName. So the metricKey and metricValue will be different based on the testDisplayName. Say for e.g. now it is filtered on Test_Name_1 So coming to the actual question, Is this achievable in mat-table ? because from the research I have done on angular mat tables I can't have same column name in the displayColumn and also I can't display two values from the object in a same cell i,e. in my e.g it (build_1 release_1...).

Any help or pointers would be appreciated. Thanks in advance.