I need help with displaying dynamic headers in an Angular table for certain <td> elements. Here is a sample of my data:
let data = [
{
id: 1,
name: 'name',
fields: {
field1: { value: '123'},
field2: {value: 'macx'}
}
},
{
id: 2,
name: 'name2',
fields: {
field1: { value: '456'},
field2: {value: '3333'}
}
}
]
I want these fields to be displayed as additional columns in the same table dynamically. Since the fields are dynamic and unknown, I am looking for suggestions on how to achieve this through code.
<tr ng-repeat="data in $data">
<td data-title="'id'|translate"
sortable="'id'">
{{data.id}}
</td>
<td ng-repeat="(key, value) in data.fields track by $index"
ng-show="columnsHash[key]"
data-title="customFieldsTitles[$index]"
filterable="{field:'fields', type:'text', align:'LEFT'}"
data-title-text="customFieldsTitles[$index]">
{{value && value.value || ''}}
</td>
<td ng-show="columnsHash.totalBenefitTarget"
data-title="'target_total_benefit' | translate"
sortable="'total_benefit_target'"
style="text-align:center;"
filterable="{field: 'total_benefit_target', type:'number_range', options: {min: Number.MIN_VALUE, max: Number.MAX_VALUE}}">
{{data.total_benefit_target | number: 0}}
</td>
<td ng-show="columnsHash.totalBenefitActual"
data-title="'actual_total_benefit' | translate"
sortable="'total_benefit_actual'"
style="text-align:center;"
filterable="{field: 'total_benefit_actual', type:'number_range',
options: {min: Number.MIN_VALUE, max: Number.MAX_VALUE}}">
{{data.total_benefit_actual | number: 0}}
</td>
<tr>
The order of the columns is crucial, so the structure should follow the example above. Any insights or alternative approaches to achieve the desired view are greatly appreciated. Thank you!