I am trying to write code using TypeScript and HTML to create a table to display my data. However, I encountered difficulty due to the complexity of managing the “rowspan”. Here is my data:

data = [
    { d: 1, A: [{ a: 11, C: [{ c: 111 }, { c: 112 }] }, { a: 12, C: [] }] },
    { d: 2, A: [{ a: 21, C: [{ c: 211 }] }] }
]

enter image description here
what’s makes it more difficult is the fact that i want it to be dynamic. this is an other data to check :

data = [
    { d: 1, A: [{ a: 11, C: [{ c: 111 }, { c: 222 }] }, { a: 22, C: [{ c: 333 }, { c: 444 }] }] },
    { d: 2, A: [{ a: 33, C: [{ c: 555 }] }] },
    { d: 3, A: [{ a: 44, C: [{ c: 666 }, { c: 777 }, { c: 888 }] }, { a: 55, C: [{ c: 999 }] }] }
]

i tried multiple code but nothing is working.