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://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>
<script src="http://js-grid.com/js/jsgrid.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;
}

.jsgrid-header-sort:before {
    display: none;
}

JavaScript

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

$("#jsgrid").jsGrid({
    filtering: true,
               editing: true,
                inserting: false,
                sorting: true,
                paging: true,
                autoload: true,
    controller: {
        loadData: function() {
            return data;
        }
    },
    
    fields: [
        { type: "text", name: "name.FirstName", title: "First Name", width: 200 },
        { type: "text", name: "name.LastName" , title: "Last Name", width: 300 },
        { type: "control" }
    ]
});