JSGrid Basic Grouping

HTML

<link rel="stylesheet" href="http://js-grid.com/css/jsgrid.min.css">
<link rel="stylesheet" href="http://js-grid.com/css/jsgrid-theme.min.css">
<script src="http://js-grid.com/js/jsgrid.min.js"></script>
<script src="http://underscorejs.org/underscore-min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<div id="jsGrid"></div>

CSS

.nested-grid * { border: none; }

JavaScript

var data = [
    {
        "Name": "Otto Clay",
        "Addresses": [
        	{ Address: "Home Address" },
          { Address: "Work Address" },
          { Address: "Post Address" }
        ]
    },
    {
        "Name": "Connor Johnston",
        "Addresses": [
        	{ Address: "Home Address" },
          { Address: "Work Address" },
          { Address: "Post Address" }
        ]
    }
];

$("#jsGrid").jsGrid({
        height: 300,
        width: "100%",
 
 				paging: true,
        autoload: true,
 
        pageSize: 2,
        
        fields: [{name:'address', type:'text'}],
 
        controller: {
        	loadData: function() {
          	return data;
          }
        },
        
        rowRenderer: function(item) {
        	var $row = $("<tr>");
          var $cell = $("<td>");
          
          var $addressesGrid = $("<div>").addClass("nested-grid").hide();
          
          $addressesGrid.jsGrid({
          	width: 200,
            height: "auto",
            data: item.Addresses,
            heading: false,
            fields: [
            	{ name: "Address", width: 200 }
            ]
          });
          
          var $link = $("<a>").text(item.Name)
          							.prop("href", "#")
          							.click(function() {
                        	$addressesGrid.toggle();
                        });
          
          $cell.append($link)
          	.append($addressesGrid);
            
          return $row.append($cell);
        }
    });