How to form the following table with Ember?

Question

Name         Date                 Date-1              Date-2              Date-3
------------------------------------------------------------------------------------------
         Header1   Header2    Header1   Header2    Header1   Header2     Header1   Header2
------------------------------------------------------------------------------------------


Name1     val        val        val       val        val       val        val       val

Name2     val        val        val       val        val       val        val       val

Name3     val        val        val       val        val       val        val       val

Name4     val        val        val       val        val       val        val       val

Eg.

Name         May 22             May 21              May 20              May 19
------------------------------------------------------------------------------------------
         Added   Deleted    Added   Deleted    Added   Deleted     Added   Deleted
------------------------------------------------------------------------------------------


Susan     5         6          7       4          2        8         6       2

Rex       1         3          4       6          4        0         1       9

Johny     2         8          5       1          5        4         1       0

Sam       6         5          2       7          6        4         3       0

Data will be available as a REST API/JSON in the below format

.
.
.
.
{
 "id":123,
 "name":"susan",
 "added": 5,
 "deleted":6,
 "date":"May 22"
},
{
 "id":183,
 "name":"susan",
 "added": 7,
 "deleted":4,
 "date":"May 21"

}
.
.
.
.

Any solutions ?

Answer 1

Since you've tagged ember-table, I'll answer briefly from that perspective: the format you want to set up with the dates requires rowspan, which isn't supported by ember-table right now. It's been requested as a feature and we'd like to add it eventually; we'll keep track of any progress here: https://github.com/Addepar/ember-table/issues/128 .

Ember Table might not be the best option for your use case: it's built around lazy rendering to handle large amounts of data, and has a bunch of other features which you might not need. If that's the case, you can just restructure your data into a list of rows, and use the {{#each}} helper to render one row at a time into a standard HTML table, like selvagsz suggested in a comment.