I am trying to represent this table in angular13 I have created a backend API with Django Rest Framework with the following structure: FieldHead:{id,name} e.g Production FieldProperty: { id, name,FieldHead} e.g PRODUCTION in HRS Product: {id,name,weight} e.g.20ltrs Supplier: {id, name} e.g. ABZ, XYZ ProductPropertyCost:{FieldProperty,Product,Supplier,cost} I am trying to find the best format I can return the data inorder to represent it in this format for every Supplier and how to represent it like this

Complex Tabular Data Representation in Angular from an API

I am trying to represent this table in angular13

I have created a backend API with Django Rest Framework with the following structure:

FieldHead:{id,name} e.g Production
FieldProperty: { id, name,FieldHead} e.g PRODUCTION in HRS
Product: {id,name,weight} e.g.20ltrs
Supplier: {id, name} e.g. ABZ, XYZ
ProductPropertyCost:{FieldProperty,Product,Supplier,cost} I am trying to find the best format I can return the data inorder to represent it in this format for every Supplier and how to represent it like this