creating sub views(table inside another table) using backbone JS - backbone.js

Question

Trying to create a table inside a table with backbone but could not able to find out a way. Can anybody help me out with an example to achieve this?
My Collection:
this.collection = new Backbone.Collection([
{ first: 'John', last: 'Doe', desig: 'E1', location: 'C' },
{ first: 'Mary', last: 'Jane', desig: 'E3', location: 'C' },
{ first: 'Billy', last: 'Bob', desig: 'E2', location: 'C' },
{ first: 'Dexter', last: 'Morgan', desig: 'E1', location: 'P' },
{ first: 'Walter', last: 'White', desig: 'E2', location: 'P' },
{ first: 'Billy', last: 'Bobby', desig: 'E1', location: 'B' }
]);
Normal View: Achieved this using a table view. refer code here
first last desig location
----------------------------------
Billy Bobby E1 B
Walter White E2 P
Dexter Morgan E1 P
Billy Bob E2 C
Marry Jane E3 C
John Doe E1 C
Want to group by location then want to render as new view like below
location first last desig
----------------------------------
C Billy Bob E2
Marry Jane E3
John Doe E1
P Walter White E2
Dexter Morgan E1
B Billy Bobby E1
Using underscore we can do grouping but after that, I am struggling to render that object in the above view
_.groupby(this.collection, "location");
is giving me an object which has the required result.

Answer 1

Every row in the table should be represented in a Backbone.View.
The grouping you want is mostly a rowspan feature of standard HTML tables.
See the snippet:
var collection = new Backbone.Collection([{
first: 'John',
last: 'Doe',
desig: 'E1',
location: 'Chennai'
}, {
first: 'Mary',
last: 'Jane',
desig: 'E3',
location: 'Chennai'
}, {
first: 'Billy',
last: 'Bob',
desig: 'E2',
location: 'Chennai'
}, {
first: 'Dexter',
last: 'Morgan',
desig: 'E1',
location: 'Pune'
}, {
first: 'Walter',
last: 'White',
desig: 'E2',
location: 'Pune'
}, {
first: 'Billy',
last: 'Bobby',
desig: 'E1',
location: 'Bangalore'
}]);
var GroupRowView = Backbone.View.extend({
tagName: 'tr',
initialize: function(options) {
this.groupBy = options.groupBy;
this.index = options.index;
this.total = options.total;
},
render: function() {
this.$el.empty();
if (this.index == 0) {
this.$el.append('<td rowspan="' + this.total + '">' + this.model.get(this.groupBy) + '</td>');
}
_.each(this.model.omit(this.groupBy), function(value, key) {
this.$el.append('<td>' + value + '</td>');
}, this);
return this;
}
});
var SimpleRowView = Backbone.View.extend({
tagName: 'tr',
render: function() {
this.$el.empty();
//this.$el.append('<td>' + this.model.get('location') + '</td>')
_.each(this.model.values(), function(value) {
this.$el.append('<td>' + value + '</td>');
}, this);
return this;
}
})
var TableView = Backbone.View.extend({
tagName: 'table',
render: function() {
/*var self = this;
self.$el.empty();
self.collection.each(function(rowModel) {
self.$el.append(_.template('<tr><td><%= location %></td><td><%= first %></td><td><%= last %></td><td><%= desig %></td></tr>')(rowModel.attributes))
});*/
var self = this;
self.$el.empty();
self.collection.each(function(model) {
var row = new SimpleRowView({
model: model
});
self.$el.append(row.render().el);
});
return this;
},
groupCollection: function() {
var self = this;
var groups = self.collection.groupBy('location');
self.$el.empty();
_.each(groups, function(group) {
var length = group.length;
_.each(group, function(model, i) {
var row = new GroupRowView({
model: model,
groupBy: 'location',
index: i,
total: length
});
self.$el.append(row.render().el);
})
})
}
});
var table = new TableView({
collection: collection
});
$('#table-container').append(table.render().el);
$('#sortBtn').click(function(e) {
table.groupCollection();
})
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<p>What the table should be:</p>
<table border="1">
<thead>
<tr>
<th>Location</th>
<th>First</th>
<th>Last</th>
<th>Desig</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">C</td>
<td>Billy</td>
<td>Bob</td>
<td>E2</td>
</tr>
<tr>
<td>Marry</td>
<td>Jane</td>
<td>E3</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>E1</td>
</tr>
<tr>
<td rowspan="2">P</td>
<td>Walter</td>
<td>White</td>
<td>E2</td>
</tr>
<tr>
<td>Dexter</td>
<td>Morgan</td>
<td>E1</td>
</tr>
<tr>
<td rowspan="1">B</td>
<td>Billy</td>
<td>Bobby</td>
<td>E1</td>
</tr>
</tbody>
</table>
<p>What the resulting table is:</p>
<button id="sortBtn">Sort!</button>
<div id="table-container">
</div>

Answer 2

Updated fiddle with 2 different views using user input
jsfiddle.net/WebDev81/ddbf9ckv/10
Let me know anybody has a better approach to achieve this.