JSGrid Complex Header

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

.ui-widget {
    font-size: 12px;
}

.jsgrid tr:first-child th {
    padding: 0;
    border: none;
}

.jsgrid th {
    padding: .5em 0;
}

.jsgrid tr th {
    border: 1px solid #e9e9e9;
}

JavaScript

var data = [
    { FirstName: "John", LastName: "White" , age:22},
    { FirstName: "Jimmy", LastName: "Black",age:22 },
    { FirstName: "Tom", LastName: "Smitt",age:22 },
    { FirstName: "Frank", LastName: "Don",age:22 },
    { FirstName: "Peter", LastName: "Brown" ,age:22}
];

$("#jsgrid").jsGrid({
    autoload: true,
    width: "100%",
    controller: {
        loadData: function() {
            return data;
        }
    },
    headerRowRenderer: function() {
        var $result = $("<tr>").height(0)
            .append($("<th>").width(200))
            .append($("<th>").width(300));
            
        //$result = $result.add($("<tr>")
          //  .append($("<th>").attr("colspan", 2).text("Name")))
        
        return $result.add($("<tr>")
            .append($("<th>").width(200).text("First Name"))
            .append($("<th>").width(300).text("Last Name"))
            .append($("<th>").width(300).text("Edad")));
    },
    fields: [
        { type: "text", name: "FirstName", width: 200 },
        { type: "text", name: "LastName" , width: 300 },
        { type: "text", name: "age" , width: 300 }
    ]
});