primeVueのDataTableに配列がうまく適用できずtsで頑張った話

TypeScript、 Vue初学者ですが、業務で使用し始めたところです。
金曜日実装に取りかかった機能で、どうすんだ？これ？と思う部分があったので、方法の検討をしました。

やりたかったこと

const valueList =  [
        { yyyyMM : '202401', valueArray : [100, 200]},
        { yyyyMM : '202402', valueArray : [200, 300]},
        { yyyyMM : '202403', valueArray : [400, 500]},        
    ]
const columnList = [{code :"aa" , name : "aaName"} ,{code :"bb" , name : "bbName"}]

この形のobjをPrimeVueのDataTableに適用したい。
valueArrayの要素数は可変とする仕様であるため、形は変えられない。
作りたいのはこんな表。

yyyyMM	aaName	bbName
202401	100	200
202402	200	300
202403	400	500

試したこと

Data Tableを何やらかんやらして出力できないか試す
多分Dynamic Columnsを使わないと無理なのはわかった

頭がこんがらがって何を書けばいいのか迷走しつつ何個か有力そうなものをテスト

試したこと１

const columnList = [{code :"valueArray[0]" , name : "aaName"} ,{code :"valueArray[1]" , name : "bbName"}]

<DataTable :value="valueList" tableStyle="min-width: 50rem">
    <Column field="yyyyMM" header="yyyyMM"></Column>
    <Column v-for="col of columnList" :key="col.code" :field="col.code" :header="col.name"></Column>
</DataTable>

aaName、bbNameに値が表示されなかった　　−→失敗

試したこと２

const columnList2 = [{code :0 , name : "aaName"} ,{code :1 , name : "bbName"}]

<DataTable :value="valueList" tableStyle="min-width: 50rem">
    <Column field="yyyyMM" header="yyyyMM"></Column>
    <Column v-for="col of columnList2" :key="valueArray[col.code]" :field="valueArray[col.code]" :header="col.name"></Column>
</DataTable>

エラー発生　　−→失敗

22:23:56 [ERROR] Cannot read properties of undefined (reading '0')

ここらで、PrimeVueのDataTableのDynamic Columnsはobj[key]のkeyをColumnで動的に指定させることで実現してるのかもなーと想像し、DataTableの書き方を工夫することを諦める

試したこと３

typeScriptで配列をflatなobjectに変換して、それをDataTableに突っ込む作戦に変更。
objのイメージはこんな感じ

  { yyyyMM: '202401', aa: 100, bb: 200 },
  { yyyyMM: '202402', aa: 200, bb: 300 },
  { yyyyMM: '202403', aa: 400, bb: 500 }

こちらの記事を参考にさせていただきました（感謝）

const columnList = [{code :"aa" , name : "aaName"} ,{code :"bb" , name : "bbName"}]
var list = [];    

for(const val of valueList){
    var obj = {}
    type objKey = keyof typeof obj
    obj["yyyyMM"] = val.yyyyMM
    var cnt = 0
    for(const item of val.valueArray){
        const data :objKey = columnList[cnt].code as objKey
        obj[data] = item
        cnt ++
    }
    list.push(obj)
}

<DataTable :value="list" tableStyle="min-width: 50rem">
    <Column field="yyyyMM" header="yyyyMM"></Column>
    <Column v-for="col of columnList" :key="col.code" :field="col.code" :header="col.name"></Column>
</DataTable>

成功！

本当にこれが最適解かはわかりませんでしたが、とても勉強になりました。