After preparing my data, I aim to showcase it in an HTML table. However, a complication arises each time the $http service is called as it returns a varying number of columns (n). Essentially, I wish to have the first row of the data serve as column names, while the subsequent rows represent the actual data entries. Keep in mind that the column names are dynamic and there could be any number of them. Here is a snippet of the sample data:
[["Product",2016,2017],["A",50.92,550],["B",10,0],["C",20,0]]
or
[["Product",2015, 2016,2017],["A",80, 50.92,550],["B",20, 10,0],["C",75,20,0]]While attempting this task, I am struggling to figure out how to display the first row as columns and then present the remaining rows below them.
<table style="width:100%; font-size:11px; " ng-repeat="(key, value) in NewTable">
<thead>
<tr style="background-color:#00372B; height: 50px; ">
<th style="padding:1%; color:white;" colspan="3">{{ key }}:{{value}}</th>
</tr>
</thead>
</table>I kindly request someone to offer a solution that includes the use of angular-filter so that I can incorporate some calculated columns into the table as well. Thank you.